微客导航 » 文章资讯 » js实现抽奖的两种方法

js实现抽奖的两种方法

2023-07-28 10:18:06 391

本文实例为大家分享了js实现抽奖的具体代码，供大家参考，具体内容如下

抽奖活动的原理还是很简单的，通过代码一目了然，如果看不懂就私聊我，可以私下交流！

方法一：使用table写一个随机抽奖

这是html+js代码









抽奖





抽奖活动

百度	腾讯	阿里	京东	华为
滴滴	蚂蚁金服	乐视	中国电网	中石化
美团	乐视	小米	网易	酷我
爱奇艺	盛大	短文学	浅墨诗韵	浪子一秋

vartimer; varbutton=document.querySelector("#button"); functiontoStart(){ //启动定时器 if(timer==undefined){ timer=setInterval(changeStyle,100); button.setAttribute("value","停止"); }else{ clearInterval(timer); timer=undefined; button.setAttribute("value","开始"); } } //改变样式 vara,b; functionchangeStyle(){ vartb=document.querySelector("table"); console.log(a); if(a!=undefined){ tb.rows[a].cells[b].style.backgroundColor="white"; } // //获取要操作的元素 a=parseInt(Math.random()*4); b=parseInt(Math.random()*5); //console.log(a); varcol=tb.rows[a].cells[b]; col.style.backgroundColor="red"; }

方法二：使用span标签写

html+js代码如下









抽奖





抽奖活动

//获取要操作的元素 vardiv=document.getElementById("body"); //动态添加span for(vari=0;i<25;i++){ //创建一个新的标签 varel=document.createElement("span"); //给标签设置内容 el.innerText=i; //添加子元素 div.appendChild(el); } vartimer; varbutton=document.querySelector("#button"); functiontoStart(){ //启动定时器 if(timer==undefined){ timer=setInterval(changeStyle,100); button.setAttribute("value","停止"); }else{ clearInterval(timer); timer=undefined; button.setAttribute("value","开始"); } } //改变样式 varselection; functionchangeStyle(){ varspans=document.getElementsByTagName("span"); if(selection!=undefined){ console.log(selection); spans[selection].style.backgroundColor="white"; } selection=parseInt(Math.random()*25); varspans=document.getElementsByTagName("span"); varselectSpan=spans[selection]; selectSpan.style.backgroundColor="red"; }

两个页面的css代码

*{
margin:0;
padding:0;
}
body{
display:block;
}
.content{
width:500px;
margin:auto;
}
.top{
text-align:center;
height:50px;
color:red;
font-size:30px;

}
table{
width:100%;
border:1pxsolidred;
border-spacing:0;
}
th{
border:1pxdashedrgb(189,189,86);
height:40px;
}
.bottom{
height:50px;
margin-top:20px;
text-align:center;
}
.button{
background-color:#4CAF50;/*Green*/
border:none;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
}


/*test2-1*/
.body{
width:512px;
height:260px;
border:1pxsolidred;
}
span{
display:inline-block;
width:100px;
height:50px;
border:1pxdashed#b1da1f;
line-height:50px;
text-align:center;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js实现抽奖的两种方法

热门推荐

随机推荐