原生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 相关文章推荐
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
jquery限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
js实现拖拽功能
Mar 01 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
js实现车辆管理系统
Aug 26 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读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
简明json介绍
2008/09/28 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
Angular2库初探
2017/03/01 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
django2 快速安装指南分享
2018/01/05 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
Linux文件系统类型
2012/09/16 面试题
大门门卫岗位职责
2013/11/30 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
保险公司开门红口号
2014/06/21 职场文书
投标授权委托书范文
2014/08/02 职场文书
先进党支部申报材料
2014/12/24 职场文书
学校远程教育工作总结
2015/08/11 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书