简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  •  
    您现在的位置:首页 >> JS >> 内容

    js实现九宫格抽奖

    内容摘要:div id='contaner'div id='one'一块钱/divdiv id='two'谢谢惠顾/divdiv id='three'下去写作业/divdiv id='four'一局游戏/divdiv id='five'点击抽奖/divdiv id='six'两块钱/divdiv id='seven'下去写作业/divdiv id='eight'谢谢惠......

      <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)

    }

    }

    }

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/5/8 发布时间:15:46:09 点击:551 
  • 上一篇:JS刷新框架的脚本语句
  • 下一篇:js页面跳转常用的几种方式
  • 本类新增
    本类热门文章
    Baidu
    壹 家 软 件 工 作 室(YiJia SoftWare Workroom) 齐天大圣® 制 作 ©2000-2020

    本空间由景安网络提供,百度云加速提供加速防护
    YiJiaCMS V3.31 Build 20.6.5(MSSQL) 闽ICP备05000814号-1