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 相关文章推荐
禁止js文件缓存的代码
Apr 09 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
python动态加载变量示例分享
2014/02/17 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
python 元组的使用方法
2020/06/09 Python
python的数学算法函数及公式用法
2020/11/18 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
医学生个人求职信范文
2013/09/24 职场文书
中青班党性分析材料
2014/02/16 职场文书
《问银河》教学反思
2014/02/19 职场文书
食品安全演讲稿
2014/09/01 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python