原生JS实现九宫格抽奖效果


Posted in Javascript onApril 01, 2017

效果图:

原生JS实现九宫格抽奖效果

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <style>
 *{margin:0;padding:0;}
 #container{width:310px;height:310px;margin:30px auto;}
 #ul1{width:310px;height:310px;list-style:none;}
 #ul1 li,#ul1 a{width:100px;height:100px;border:1px solid #565656;float:left;text-align:center;line-height:100px;}
 #ul1 a:hover{cursor:pointer;color:orange;font-size:18px;}
 #ul1 .active{background:red;color:#fff;}
 #pp{line-height:32px;color:#9a9a9a;text-align:center;}
 </style>
</head>
<body>
<div id="container">
 <ul id="ul1">
 <li>一等奖</li>
 <li>二等奖</li>
 <li>三等奖</li>
 <li>四等奖</li>
 <a>开始</a>
 <li>五等奖</li>
 <li>六等奖</li>
 <li>七等奖</li>
 <li>八等奖</li>
 </ul>
 <p id="pp"></p>
</div>
<script>
 var container = document.getElementById('container'),
 li = container.getElementsByTagName('li'),
 aa = container.getElementsByTagName('a')[0],
 pp = document.getElementById('pp'),
 timer = null;
 function start(){
 var i = 0;
 var num = Math.floor(Math.random() * li.length) + 20;
 if(i<num){
 timer = setInterval(function(){
 for(var j=0;j<li.length;j++){
  li[j].className = '';
 }
 li[i%li.length].className = 'active';
 i++;
 if(i === num){
  clearInterval(timer);
  if(num%li.length === 0){
  pp.innerHTML += "恭喜您中了:8 等奖" + '<br/>';
  }else{
  pp.innerHTML += "恭喜您中了:"+ parseInt(num%li.length) + " 等奖"+ '<br/>';
  }
 }
 },130);
 }
 }
 aa.onclick = function(){
 start();
 }
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 #Javascript
ES6 Promise对象概念与用法分析
Apr 01 #Javascript
JavaScript中闭包的详解
Apr 01 #Javascript
基于JavaScript实现验证码功能
Apr 01 #Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 #Javascript
Angularjs使用指令做表单校验的方法
Mar 31 #Javascript
JS正则获取HTML元素的方法
Mar 31 #Javascript
You might like
php5.2.0内存管理改进
2007/01/22 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
javascript里的条件判断
2007/02/27 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
全面解读Python Web开发框架Django
2014/06/30 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
keras导入weights方式
2020/06/12 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
初级Java程序员面试题
2016/03/03 面试题
农村党员干部承诺书
2015/05/04 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python