您的位置: 主页 > Office教程 > Office资讯 >

原生JS实现九宫格抽奖效果

时间:2017-07-31 02:03 来源:Word教程网 阅读:报告错误

     
     具有很好的参考价值。下面使结合小编一起来看下吧 效果图:
     代码如下:
     <!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-' 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 6;float:left;text-align:center;line-height:100px;} #ul1 a:hover{cursor:pointer;color:orange;font-size:18px;} #ul1 #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, li = container.getElementsByTagName, aa = container.getElementsByTagName, pp = document.getElementById, timer = null; function start{ var i = 0; var num = Math.floor li.length + 20; if{ timer = setInterval{ for{ li.className = ''; } li.className = 'active'; i++; if{ clearInterval; if{ pp.innerHTML += '使结合您中了:8 等奖' + '<br/>'; }else{ pp.innerHTML += '使结合您中了:'+ parseInt + ' 等奖'+ '<br/>'; } } },130; } } aa.onclick = function{ start; }</script></body></html>以上就是本文的全部内容,使结合本文的内容除了大家的学习况工作能带来一定的使结合,同时也使结合多多支持脚本惟家

    最新评论

    • 昵称:
    • 验证码:点击我更换图片
    • Word

    • Excel

    • PowerPoint

    Word2003视频教程

    Word2003视频教程

    《全集共50课》分别有基础入门和高级两部教程,让你从零开始学起,从菜鸟变成高手[详情]

    Word2007视频教程

    Word2007视频教程

    《全集共43课》从Word发展历史到文档操作应用到打印,教程风趣幽默通俗易懂[详情]

    Word2010视频教程

    Word2010视频教程

    《全集共47课》由微软官方提供的视频教程,详细讲解了Word2010的新功能[详情]

    Excel2003视频教程

    Excel2003视频教程

    《全集共65课》详细讲解了Excel表格的基础操作与图表、图形、数据、打印等[详情]

    Excel2007视频教程

    Excel2007视频教程

    《全集共36课》从Excel的初步了解到表格透视图表制作和函数公式应用[详情]

    Excel2010视频教程

    Excel2010视频教程

    《全集共22课》Excel2010最新功能介绍和使用,还在不断更新,尽情关注[详情]

    PowerPoint2003视频教程

    PowerPoint2003视频教程

    《全集共22课》PowerPoint软件的介绍和应用每篇都讲解了多个功能的使用[详情]

    PowerPoint2007视频教程

    PowerPoint2007视频教程

    《全集共29课》不会制作幻灯片不用担心,本篇视频教程详细讲解幻灯片制作和动画制作[详情]

    PowerPoint2010视频教程

    PowerPoint2010视频教程

    《全集共29课》新版本的PPT中增添了许多意想不到的功能,让你设计幻灯片时更加轻松[详情]

    必读

    Word教程网-最近更新-网站地图-RSS地图-意见反馈 - 粤ICP备14012962号-3