js实现九宫格抽奖


Posted in Javascript onMarch 19, 2020

本文实例为大家分享了js实现九宫格抽奖的具体代码,供大家参考,具体内容如下

<div id="contaner">
 <div id="one">一块钱</div>
 <div id="two">谢谢惠顾</div>
 <div id="three">下去写作业</div>
 <div id="four">一局游戏</div>
 <div id="five">点击抽奖</div>
 <div id="six">两块钱</div>
 <div id="seven">下去写作业</div>
 <div id="eight">谢谢惠顾</div>
 <div id="nigth">两局游戏</div>
</div>

CSS:

#contaner {
 width:606px;
 height:606px;
 border:1px solid #cccccc;
 margin:40px auto;
}
#contaner div {
 width:200px;
 height:200px;
 background:#09f;
 text-align:center;
 color:#fff;
 font-size:16px;
 font-weight:bold;
 line-height:200px;
 float:left;
 border:1px solid #cccccc;
}
#contaner #five {
 transition:all 0.5s ease-in-out 0s;
}
#contaner #five:hover {
 cursor:pointer;
 font-size:25px;
 transform:scale(1.2) rotate(360deg);
 background:#fff;
 color:#09f;
}
.ys {
 transform:scale(1.2);
 box-shadow:0 0 0 200px red inset;
}

js:

window.onload = function() {
  var $ = function(id) {
   return document.getElementById(id);
  }
  var contaner = $('contaner');
  var divs = contaner.getElementsByTagName('div');
  var one = $('one');
  var two = $('two');
  var three = $('three');
  var four = $('four');
  var five = $('five');
  var six = $('six');
  var seven = $('seven');
  var eight = $('eight');
  var night = $('night');
  var k = 0;
  var flag = true;
  five.onclick = function() {
   if (flag) {
    var l = Math.ceil(Math.random() * 10000);
    clearInterval(time);
    var time = setInterval(function() {
     for (var i = 0; i < divs.length; i++) {
      divs[i].className = '';
     }
     divs[k].className = 'ys';
     switch (k) {
      case 0:
      case 1:
       k++;
       break;
      case 2:
      case 5:
       k += 3;
       break;
      case 8:
      case 7:
       k--;
       break;
      case 6:
      case 3:
       k -= 3;
       break;
     }
    }, 100)
    flag = false;
    var jc = setTimeout(function() {
     clearInterval(time);
     flag = true;
    }, l)
   }
  }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
JavaScript Promise启示录
Aug 12 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 #Javascript
JS实现长图上下滚动效果
Mar 19 #Javascript
JavaScript实现简单计算器
Mar 19 #Javascript
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
webpack 动态批量加载文件的实现方法
Mar 19 #Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 #Javascript
js实现经典贪吃蛇小游戏
Mar 19 #Javascript
You might like
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
js html实现计算器功能
2018/11/13 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
Python批量修改文本文件内容的方法
2016/04/29 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
python3中rank函数的用法
2019/11/27 Python
python实现登录与注册系统
2020/11/30 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
求职信模板标准格式范文
2014/02/23 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
学校食品安全实施方案
2014/06/14 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏