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 对象定义方法 简单易学
Mar 22 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
js style动态设置table高度
Oct 21 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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自动选择 连接本地还是远程数据库
2010/12/02 PHP
php 使用array函数实现分页
2015/02/13 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
初中国旗下的演讲稿
2014/08/28 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
春节慰问信范文
2015/02/15 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
Python实现视频自动打码的示例代码
2022/04/08 Python