本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖游戏</title> <style> #box{ width:720px; margin:0 auto; margin-top:20px; box-shadow:0px 0px 2px #333; } .pic{ width:200px; height:200px; float:left; line-height:200px; margin:10px; border:5px #fff solid; color:blue; font-size: 35px; text-align: center; } .anniu{ width:200px; height:200px; float:left; margin:10px; } #drawBtn{ color:red; font-size:30px; width:200px; height:200px; box-shadow:0px 0px 2px #333; font-weight: bold; } </style> <script> window.onload=init; var setting={ count:0, total:24, delay:20, picIndex:[0,1,2,4,7,6,5,3] } function init(){ document.getElementById("drawBtn").onclick=function(){ setting.count=0; setting.delay=20; this.disable=true;//禁用按钮 var drawBtn=this; //获取所有图片的div var allDivs=document.getElementsByClassName("pic"); //获得一个随机整数,代表中奖的那个位置,3*8+(0-7) setting.total+=Math.floor(Math.random()*allDivs.length); //设置定时器,依次修改每个div边框的颜色. setTimeout(function show(){ //重置上一个边框的颜色 for (var i=0;i<allDivs.length;i++){ allDivs[i].style.borderColor="#fff"; allDivs[i].style.opacity=0.7; } //找到要修改的那个边框的颜色设置 var currentPic=allDivs[setting.picIndex[setting.count%8]]; currentPic.style.borderColor="red"; currentPic.style.opacity=1.0; setting.count++; setting.delay+=2*setting.count; if(setting.count>setting.total){ alert("您中奖了,哈哈"); drawBtn.disable=false; return; } setTimeout(show,setting.delay); },setting.delay); } } </script> </head> <body> <div id="box"> <div class="pic">1</div> <div class="pic">2</div> <div class="pic">3</div> <div class="pic">4</div> <div class="anniu"><input type="button" value="我要抽奖" id="drawBtn"/></div> <div class="pic">5</div> <div class="pic">6</div> <div class="pic">7</div> <div class="pic">8</div> </div> </body> </html>
想要学习更多关于抽奖功能的实现,请参考此专题:抽奖功能
以上就是本文的详细内容,希望对大家的学习有所帮助。
标签:
js,跑马灯,抽奖
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
金钱帮资源网 Copyright www.kbjia.com
暂无“javascript跑马灯抽奖实例讲解”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年10月12日
2024年10月12日
- 群星《金吾卫之风起金陵 动漫原声带》[FLAC/分轨][98.08MB]
- JessicaMolaskey-SittinginLimbo--2024[wav]
- 中国音乐地图之听见江苏扬州小调扬剧经典唱段2020[WAV分轨]
- 中国音乐地图之听见国乐阮柳琴音乐集2021[WAV+分轨]
- 常石磊.2010-自己【风向乐动】【WAV+CUE】
- TWINS.2008-桐话妍语(引进版)【英皇娱乐】【WAV+CUE】
- 钮大可陈本瑜-山谷与风的对话【飞碟】【WAV+CUE】
- 群星《百听不厌-HIFI金曲王》2CD[DTS-WAV分轨]
- HIFI天碟《发烧情路》2CD\DTS-ES[WAV]
- 群星《品味感性男声》2CD[DTSWAV]
- 群星《观风月》[320K/MP3][133.98MB]
- 群星《观风月》[FLAC/分轨][321.4MB]
- 群星《奔向所有时空的你 影视原声带》[320K/MP3][47.43MB]
- 陶喆.2013-再见你好吗【伟大文化】【WAV+CUE】
- 李宗盛.1994-不舍(纸盒版)【滚石】【WAV+CUE】