js实现简单抽奖功能


Posted in Javascript onNovember 24, 2020

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

代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style>
 #box{
 border: 1px solid aqua;
 height: 100px;
 width: 200px;
 text-align: center;
 line-height: 100px;
 margin: auto;
 font-size: 22px;
 }
 .active{
 background: slateblue;
 }
 li{
 text-align: center;
 list-style:none ;
 width: 40px;
 height: 20px;
 line-height: 20px;
 border: 1px solid blue;
 margin-left: 40px;
 
 float: left;
 }
 ul,li
 {
 list-style: none;
 
 }
 #shu
 {
 margin: auto;
 }
 
 </style>
 </head>
 <body>
 <button id="stp">开始</button><button id="off">停止</button>
 
 <div id="box">恭喜<span>1</span>号 </div>
 <div id="shu">0</div><span>等奖</span>
 <ul>
 <li class="active">1号</li>
 <li>2号</li>
 <li>3号</li>
 <li>4号</li>
 <li>5号</li>
 <li>6号</li>
 <li>7号</li>
 </ul>
 <script>
 var t=null;
 var ostp=document.getElementById("stp");
 var ooff=document.getElementById("off");
 var ospan=document.getElementsByTagName("div")[0].getElementsByTagName("span");
 var oli=document.getElementsByTagName("ul")[0].getElementsByTagName("li");
 var oshu=document.getElementsByClassName("shu");
 function mytime(){
 var n=Math.floor(Math.random()*7+1);
 ospan[0].innerText=n;
 ospan[1].innerText=oli[n-1].innerText;
 for(let i=0;i<oli.length;i++)
 {
 oli[i].className="";
 }
 oli[n-1].className="active";
 }
 function mytime2()
 {
 var a=Math.floor(Math.random()*3+1);
 shu.innerText=a;
 
 
 }
 ostp.onclick=function(){
 clearInterval(t);
 t=setInterval(mytime,50);
 at=setInterval(mytime2,1000)
 }
 ooff.onclick=function(){
 clearInterval(t);
 clearInterval(at);
 }
 </script>
 </body>
</html>

效果

js实现简单抽奖功能

js实现简单抽奖功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 #Javascript
Vue路由 重定向和别名的区别说明
Sep 09 #Javascript
JavaScript常用8种数组去重代码实例
Sep 09 #Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 #Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
js实现右键弹出自定义菜单
Sep 08 #Javascript
vue 使用原生组件上传图片的实例
Sep 08 #Javascript
You might like
模拟flock实现文件锁定
2007/02/14 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
yy生日主持词
2014/03/20 职场文书
捐款活动总结
2014/08/27 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
Python中22个万用公式的小结
2021/07/21 Python
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python