js实现抽奖效果

效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题随机抽奖/title style * { margin : 0；padd : 0；}车身{背景：深色三文鱼；} h1，#ks，# js { text-align : center} # ks { width: 100px高度： 70px背景：蓝紫色；边框半径： 10px线高： 70px保证金：3% 0 0 40%;} # ks :悬停{ width : 100px高度： 70px背景技术：番茄；边框半径： 10px线高： 70px} # js { width: 100px高度： 70px背景：蓝紫色；边框半径： 10px线高： 70px保证金：-5% 0 0 50%;} # js :悬停{ width : 100px高度： 70px背景技术：番茄；边框半径： 10px线高： 70px} .jp{ border:3px固体# cd5c cborder-radius :10 px；宽度：95 px高度：23px背景技术# ff 3030 padding-top :5 px；文本对齐：居中；color : # ff7ee 1 } # jp { width : 100%；高度： 200像素；背景：橙色；绝对位置：边距-top : 300 px；} # jp span { font-size : 30px} # tx { font-size : 60pxcolor: # fff}/style/head dy h1抽奖了/h1 div id='ks' onclick='ks()'开始抽奖/div！-如何通过一个按钮实现开始和关闭？- div id='js' onclick='gb()'停止抽奖/div div id='jp'span恭喜你获得了：/span span id=' tx '/span/div脚本var arr=['三星','苹果','华为荣耀','小米','魅族','中兴努比亚','酷派，' vivo(蓝厂)'，' oppo(绿厂)'];//循环添加的数组var lie Shu=3；//列数控制台。日志(arr。长度)；console.log('可以分：" arr.length/lieshu "行');for(var I=0；iarr.length/lieshu;i ){//控制行数for(var j=0；jlieshuj ){//控制列若(我*卧蜀贾尔。长度){控制台。日志('循环最内层：‘我*卧舒j)；文件。写(' div id=\ ' Jiang '(I * lieshu j)' \ ' class=\ ' jp ' style=\ ' ' '位置：绝对；左侧： '(j * 110 500)' px；top : '(I * 50 200)' px；\ ' ' arr[I * lieshu j]'/div ')；/* document.write网页内写文件i*lieshu j为个数* (j*110 500) 110为列边距500为整个表格；列偏移* (i*40 300) 40行间距300为整个表格；列偏移* * */} } } var bs=-1；//用于循环过后变色var t；函数ks(){ /*开始变色的方法*/if(bs！=-1){文档。getelementbyid(' Jiang ' bs)。风格。背景=' # ff 3030} var水吉素=数学。地板(数学。random()* arr。长度)；//生成由…改编长度个随机数向下取证文件。getelementbyid(' Jiang ' wati jisu)。风格。背景=' # 3500 ccbs=水吉苏；//水吉素代指添加元素的下表t=setTimeout('ks()'，100)；}函数GB(){ clear time out(t)；document.getElementById('tx ').innerHTML=文档。getelementbyid(' Jiang ' bs).innerHTML//修改id='tx '类的值}/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！