Heim > Artikel > Web-Frontend > Natives Javascript implementiert den Lotterieeffektcode von Jiugongge

Natives Javascript implementiert den Lotterieeffektcode von Jiugongge

零下一度Original: 2018-05-11 13:55:415647Durchsuche

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>

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!

JavaScript

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript implementiert den Code für den Fortschrittsbalkeneffekt der AudiosteuerungNächster Artikel：JavaScript implementiert den Code für den Fortschrittsbalkeneffekt der Audiosteuerung

In Verbindung stehende Artikel

Mehr sehen