原生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 相关文章推荐
当前流行的JavaScript代码风格指南
Sep 10 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
jQuery选择器基础入门教程
May 10 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 Javascript
JavaScript 定时器详情
Nov 11 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
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
Python struct.unpack
2008/09/06 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python面向对象类的继承实例详解
2018/06/27 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
python 求定积分和不定积分示例
2019/11/20 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
HTTP状态码详解
2021/03/18 杂记
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
大学生创业计划书的格式要求
2013/12/29 职场文书
上课看小说检讨书
2014/02/22 职场文书
环保倡议书500字
2014/05/15 职场文书
委托证明模板
2014/09/16 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python