js實(shí)現(xiàn)抽獎(jiǎng)的兩種方法

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

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)武川免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

方法一：使用table寫(xiě)一個(gè)隨機(jī)抽獎(jiǎng)

這是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>抽獎(jiǎng)</title>
</head>
 
<body>
 <div class="content">
  <div class="top">
   抽獎(jiǎng)活動(dòng)
  </div>
  <div class="body">
   <table>
    <tr>
     <th>百度</th>
     <th>騰訊</th>
     <th>阿里</th>
     <th>京東</th>
     <th>華為</th>
    </tr>
    <tr>
     <th>滴滴</th>
     <th>螞蟻金服</th>
     <th>樂(lè)視</th>
     <th>中國(guó)電網(wǎng)</th>
     <th>中石化</th>
    </tr>
    <tr>
     <th>美團(tuán)</th>
     <th>樂(lè)視</th>
     <th>小米</th>
     <th>網(wǎng)易</th>
     <th>酷我</th>
    </tr>
    <tr>
     <th>愛(ài)奇藝</th>
     <th>盛大</th>
     <th>短文學(xué)</th>
     <th>淺墨詩(shī)韻</th>
     <th>浪子一秋</th>
    </tr>
   </table>
  </div>
  <div class="bottom">
   <input type="button" name="" id="button" class="button" value="開(kāi)始" onclick="toStart(this)">
  </div>
 </div>
</body>
<script type="text/javascript">
 var timer;
 var button = document.querySelector("#button");
 function toStart() {
  // 啟動(dòng)定時(shí)器
  if (timer == undefined) {
   timer = setInterval(changeStyle, 100);
   button.setAttribute("value", "停止");
  } else {
   clearInterval(timer);
   timer = undefined;
   button.setAttribute("value", "開(kāi)始");
  }
 }
 // 改變樣式
 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標(biāo)簽寫(xiě)

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>抽獎(jiǎng)</title>
</head>
 
<body>
 <div class="content">
  <div class="top">
   抽獎(jiǎng)活動(dòng)
  </div>
  <div class="body" id="body">
 
  </div>
  <div class="bottom">
   <input type="button" name="" id="button" class="button" value="開(kāi)始" onclick="toStart()">
  </div>
 </div>
</body>
<script type="text/javascript">
 // 獲取要操作的元素
 var div = document.getElementById("body");
 // 動(dòng)態(tài)添加span
 for (var i = 0; i < 25; i++) {
  // 創(chuàng)建一個(gè)新的標(biāo)簽
  var el = document.createElement("span");
  // 給標(biāo)簽設(shè)置內(nèi)容
  el.innerText = i;
  // 添加子元素
  div.appendChild(el);
 }
 
 var timer;
 var button = document.querySelector("#button");
 function toStart() {
  // 啟動(dòng)定時(shí)器
  if (timer == undefined) {
   timer = setInterval(changeStyle, 100);
   button.setAttribute("value", "停止");
  } else {
   clearInterval(timer);
   timer = undefined;
   button.setAttribute("value", "開(kāi)始");
  }
 }
 // 改變樣式
 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>

兩個(gè)頁(yè)面的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;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：js實(shí)現(xiàn)抽獎(jiǎng)的兩種方法
文章URL：http://jinyejixie.com/article26/ppejjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、微信公眾號(hào)、全網(wǎng)營(yíng)銷推廣、標(biāo)簽優(yōu)化、軟件開(kāi)發(fā)、營(yíng)銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

js實(shí)現(xiàn)抽獎(jiǎng)的兩種方法