这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要介绍了原生 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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0708/332603.html