原生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 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
js+css3实现旋转效果
Jan 20 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
python要安装在哪个盘
2020/06/15 Python
财务管理个人自荐书范文
2013/11/24 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
股东出资协议书
2016/03/21 职场文书
工作报告范文
2019/06/20 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫
mysql幻读详解实例以及解决办法
2022/06/16 MySQL