recherche

Maison  >  Article  >  interface Web  >  Yuansheng js implémente la fonction de loterie

Yuansheng js implémente la fonction de loterie

php中世界最好的语言
php中世界最好的语言original
2018-04-19 13:45:191669parcourir

Cette fois, je vais vous apporter Yuanshengjs pour mettre en œuvre la fonction de loterie. Quelles sont les précautions à prendre pour que Yuanshengjs implémente la fonction de loterie ? Ce qui suit est un cas pratique, jetons un coup d'œil.

Rendu :

Yuansheng js implémente la fonction de loterie

<!DOCTYPE html><htmllang="en"><head>  <metacharset="UTF-8">  <title>随机抽奖</title>  <style>    *{margin: 0;padding: 0;}    body{       background:darksalmon;    }    h1,#ks,#js{       text-align: center;     }    #ks{       width: 100px;       height: 70px;       background: blueviolet;       border-radius: 10px;       line-height: 70px;       margin:3% 0 0 40%;     }    #ks:hover{      width: 100px;      height: 70px;      background: tomato;      border-radius: 10px;      line-height: 70px;    }    #js{      width: 100px;      height: 70px;      background: blueviolet;      border-radius: 10px;      line-height: 70px;      margin:-5% 0 0 50%;    }    #js:hover{      width: 100px;      height: 70px;      background: tomato;      border-radius: 10px;      line-height: 70px;    }    .jp{      border:3px solid #CD5C5C;      border-radius:10px;      width:95px;      height:23px;      background:#ff3030;      padding-top:5px;      text-align:center;      color: #ff7ee1;    }    #jp{      width: 100%;      height: 200px;      background: orangered;      position: absolute;      margin-top: 300px;    }    #jp span{     font-size: 30px;    }    #tx{      font-size: 60px;      color: #fff;    }  </style></head><body>   <h1>抽奖了</h1>   <pid="ks"onclick="ks()">开始抽奖</p><!--如何通过一个按钮实现开始和关闭？-->   <pid="js"onclick="gb()">停止抽奖</p>   <pid="jp"><span>恭喜你获得了：</span><spanid="tx"></span></p><script>  var arr=["三星","苹果","华为・荣耀","小米","魅族","中兴・努比亚","酷派","vivo（蓝厂）","oppo(绿厂)"];  //循环添加的数组  var lieshu=3;//列数  console.log(arr.length);  console.log("可以分："+arr.length/lieshu+"行");  for(var i=0;i<arr.length/lieshu;i++){//控制行数    for(varj=0;j<lieshu;j++){//控制列      if(i*lieshu+j<arr.length){        console.log("循环最内层："+i*lieshu+j);        document.write("<p id=\"jiang"+(i*lieshu+j)+"\" class=\"jp\" style =\"" +          "position:absolute;left:"+(j*110+500)+"px;" +"top:" +(i*50+200)+"px;\">"+          arr[i*lieshu+j]+"</p>");           /*  document.write 网页内写文件              i*lieshu+j 为个数           *   (j*110+500) 110 为列边距 500为整个表格；列偏移           *   (i*40+300)  40 行间距  300为整个表格；列偏移           *           * */       }    }  }  var bs=-1;//用于循环过后变色  var t; function ks(){   /* 开始变色的方法*/   if(bs!=-1){    document.getElementById("jiang"+bs).style.background="#ff3030";    }    var shuijisu=Math.floor(Math.random()*arr.length);//生成arr.length个 随机数向下取证    document.getElementById("jiang"+shuijisu).style.background="#3500cc";     bs =shuijisu;//shuijisu 代指添加元素的下表    t =setTimeout("ks()",100); }function gb() {  clearTimeout(t);  document.getElementById("tx").innerHTML =document.getElementById("jiang"+bs).innerHTML;//修改id="tx"类的值 }</script></body></html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez. faites attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Explication détaillée des étapes de développement de composants Angular2

JS implémente l'arithmétique simple à quatre opérations

Comment gérer les publicités flottantes piratées http

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JS http
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation de v-cloak dans VueArticle suivant：Explication détaillée de l'utilisation de v-cloak dans Vue

Articles Liés

Voir plus