js實現(xiàn)抽獎的兩種方法

更新時間：2020年03月19日 12:00:23 作者：浪子一秋

這篇文章主要為大家詳細介紹了js實現(xiàn)抽獎的兩種方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)抽獎的具體代碼，供大家參考，具體內(nèi)容如下

抽獎活動的原理還是很簡單的，通過代碼一目了然，如果看不懂就私聊我，可以私下交流！

方法一：使用table寫一個隨機抽獎

這是html+js代碼

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="css/test2.css" >
 <title>抽獎</title>
</head>
 
<body>
 <div class="content">
  <div class="top">
   抽獎活動
  </div>
  <div class="body">
   <table>
    <tr>
     <th>百度</th>
     <th>騰訊</th>
     <th>阿里</th>
     <th>京東</th>
     <th>華為</th>
    </tr>
    <tr>
     <th>滴滴</th>
     <th>螞蟻金服</th>
     <th>樂視</th>
     <th>中國電網(wǎng)</th>
     <th>中石化</th>
    </tr>
    <tr>
     <th>美團</th>
     <th>樂視</th>
     <th>小米</th>
     <th>網(wǎng)易</th>
     <th>酷我</th>
    </tr>
    <tr>
     <th>愛奇藝</th>
     <th>盛大</th>
     <th>短文學</th>
     <th>淺墨詩韻</th>
     <th>浪子一秋</th>
    </tr>
   </table>
  </div>
  <div class="bottom">
   <input type="button" name="" id="button" class="button" value="開始" onclick="toStart(this)">
  </div>
 </div>
</body>
<script type="text/javascript">
 var timer;
 var button = document.querySelector("#button");
 function toStart() {
  // 啟動定時器
  if (timer == undefined) {
   timer = setInterval(changeStyle, 100);
   button.setAttribute("value", "停止");
  } else {
   clearInterval(timer);
   timer = undefined;
   button.setAttribute("value", "開始");
  }
 }
 // 改變樣式
 var a, b;
 function changeStyle() {
  var tb = document.querySelector("table");
  console.log(a);
  if (a != undefined) {
   tb.rows[a].cells[b].style.backgroundColor = "white";
  }
  // 
  // 獲取要操作的元素
  a = parseInt(Math.random() * 4);
  b = parseInt(Math.random() * 5);
  // console.log(a);
  var col = tb.rows[a].cells[b];
  col.style.backgroundColor = "red";
 }
 
 
</script>
 
</html>

方法二：使用span標簽寫

html+js代碼如下

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="css/test2.css" >
 <title>抽獎</title>
</head>
 
<body>
 <div class="content">
  <div class="top">
   抽獎活動
  </div>
  <div class="body" id="body">
 
  </div>
  <div class="bottom">
   <input type="button" name="" id="button" class="button" value="開始" onclick="toStart()">
  </div>
 </div>
</body>
<script type="text/javascript">
 // 獲取要操作的元素
 var div = document.getElementById("body");
 // 動態(tài)添加span
 for (var i = 0; i < 25; i++) {
  // 創(chuàng)建一個新的標簽
  var el = document.createElement("span");
  // 給標簽設置內(nèi)容
  el.innerText = i;
  // 添加子元素
  div.appendChild(el);
 }
 
 var timer;
 var button = document.querySelector("#button");
 function toStart() {
  // 啟動定時器
  if (timer == undefined) {
   timer = setInterval(changeStyle, 100);
   button.setAttribute("value", "停止");
  } else {
   clearInterval(timer);
   timer = undefined;
   button.setAttribute("value", "開始");
  }
 }
 // 改變樣式
 var selection;
 function changeStyle() {
  var spans = document.getElementsByTagName("span");
  if (selection != undefined) {
   console.log(selection);
   spans[selection].style.backgroundColor = "white";
  }
  selection = parseInt(Math.random() * 25);
  var spans = document.getElementsByTagName("span");
  var selectSpan = spans[selection];
  selectSpan.style.backgroundColor = "red";
 }
 
</script>
 
</html>

兩個頁面的css代碼

*{
 margin: 0;
 padding: 0;
}
body{
 display: block;
}
.content{
 width: 500px;
 margin: auto;
}
.top{
 text-align: center;
 height: 50px;
 color: red;
 font-size: 30px;
 
}
table{
 width: 100%;
 border: 1px solid red;
 border-spacing: 0;
}
th{
 border: 1px dashed rgb(189, 189, 86);
 height: 40px;
}
.bottom{
 height: 50px;
 margin-top: 20px;
 text-align: center;
}
.button{
 background-color: #4CAF50; /* Green */
 border: none;
 color: white;
 padding: 15px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
}
 
 
/* test2-1 */
.body{
 width: 512px;
 height: 260px;
 border: 1px solid red;
}
span{
 display: inline-block;
 width: 100px;
 height: 50px;
 border: 1px dashed #b1da1f;
 line-height: 50px;
 text-align: center;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: