快捷導(dǎo)航

js實(shí)現(xiàn)抽獎(jiǎng)效果

更新時(shí)間：2017年03月27日 14:06:34 作者：kb碼農(nóng)

本文主要介紹了js實(shí)現(xiàn)抽獎(jiǎng)效果的方法實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

效果圖：

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>隨機(jī)抽獎(jiǎng)</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>抽獎(jiǎng)了</h1>
   <div id="ks" onclick="ks()">開(kāi)始抽獎(jiǎng)</div><!--如何通過(guò)一個(gè)按鈕實(shí)現(xiàn)開(kāi)始和關(guān)閉？-->
   <div id="js" onclick="gb()">停止抽獎(jiǎng)</div>
   <div id="jp"><span>恭喜你獲得了：</span><span id="tx"></span></div>
<script>
  var arr=["三星","蘋(píng)果","華為·榮耀","小米","魅族","中興·努比亞","酷派","vivo（藍(lán)廠）","oppo(綠廠)"];
  //循環(huán)添加的數(shù)組
  var lieshu=3;//列數(shù)
  console.log(arr.length);
  console.log("可以分："+arr.length/lieshu+"行");
  for(var i=0;i<arr.length/lieshu;i++){//控制行數(shù)
    for(var j=0;j<lieshu;j++){//控制列
      if(i*lieshu+j<arr.length){
        console.log("循環(huán)最內(nèi)層："+i*lieshu+j);
        document.write("<div id=\"jiang"+(i*lieshu+j)+"\" class=\"jp\" style =\"" +
          "position:absolute;left:"+(j*110+500)+"px;" +"top:" +(i*50+200)+"px;\">"+
          arr[i*lieshu+j]+"</div>");
           /*  document.write 網(wǎng)頁(yè)內(nèi)寫(xiě)文件
              i*lieshu+j 為個(gè)數(shù)
           *   (j*110+500) 110 為列邊距 500為整個(gè)表格；列偏移
           *   (i*40+300)  40 行間距  300為整個(gè)表格；列偏移
           *
           * */
       }
    }
  }
  var bs=-1;//用于循環(huán)過(guò)后變色
  var t;
 function ks(){
   /* 開(kāi)始變色的方法*/
   if(bs!=-1){
    document.getElementById("jiang"+bs).style.background="#ff3030";
    }
    var shuijisu=Math.floor(Math.random()*arr.length);//生成arr.length個(gè) 隨機(jī)數(shù)向下取證
    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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: