Natives Javascript implementiert den Lotterieeffektcode von Jiugongge-js-Tutorial-php.cn

Natives Javascript implementiert den Lotterieeffektcode von Jiugongge

零下一度

Freigeben： 2018-05-11 13:55:41

Original

5685 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der native Javascript-Code zur Implementierung des Jiugongge-Lotterieeffekts vorgestellt. Hat einen sehr guten Referenzwert. Schauen wir es uns mit dem Editor unten an

Rendering:

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonNatives Javascript implementiert den Lotterieeffektcode von Jiugongge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!