search

Home >Web Front-end >JS Tutorial >Native javascript implements Jiugongge lottery effect code

Native javascript implements Jiugongge lottery effect code

零下一度
零下一度Original
2018-05-11 13:55:415699browse

This article mainly introduces the native javascript to implement the Jiugongge lottery effect code. Has very good reference value. Let’s take a look at it with the editor below

Rendering:

##The code is as follows:

<!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>
<p 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>
</p>
<script>
 var container = document.getElementById(&#39;container&#39;),
 li = container.getElementsByTagName(&#39;li&#39;),
 aa = container.getElementsByTagName(&#39;a&#39;)[0],
 pp = document.getElementById(&#39;pp&#39;),
 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 = &#39;&#39;;
 }
 li[i%li.length].className = &#39;active&#39;;
 i++;
 if(i === num){
  clearInterval(timer);
  if(num%li.length === 0){
  pp.innerHTML += "恭喜您中了：8 等奖" + &#39;<br/>&#39;;
  }else{
  pp.innerHTML += "恭喜您中了："+ parseInt(num%li.length) + " 等奖"+ &#39;<br/>&#39;;
  }
 }
 },130);
 }
 }
 aa.onclick = function(){
 start();
 }
</script>
</body>
</html>

The above is the detailed content of Native javascript implements Jiugongge lottery effect code. For more information, please follow other related articles on the PHP Chinese website!

JavaScript
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript implements audio control progress bar effect codeNext article：JavaScript implements audio control progress bar effect code

Related articles

See more