原生js——抽奖系统（bootstrap引用）

前提：需引入bootstrap在线连接

1.案例演示：

2.代码示例：

• 外部css

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  

• 推荐bootcdn引用
  
• html代码

  //bootstrap容器
      <div class="container my-3">
         <div class="row">
             <div class="col"></div>
             <div class="col-4 text-center">
                 <div class="card">
                     <div class="card-body">
                         <h4 class="card-title">抽奖系统</h4>
                         <button id="start" type="button" class="btn btn-success">开始</button>
                         <button id="stop" type="button" class="btn btn-danger">结束</button>
                         <button id="fresh" type="button" class="btn btn-warning">刷新</button>
                     </div>
                 </div>
             </div>
             <div class="col"></div>
         </div>
     </div>
     
  

• js代码

  <script type="text/javascript">
     var timer;
     var number = 0;
     var items = ["华为", "小米", "三星", "苹果", "IPAd", "一加", "oppo", "vivo", "索尼"];
  
     window.onload = function() {
         var container = document.querySelector(".card-title"),
             start = document.getElementById("start"),
             stop = document.getElementById("stop"),
             fresh = document.getElementById("fresh");
             
     	   //事件调用
         start.onclick = play;
         stop.onclick = end;
         fresh.onclick = refresh;
  
         //添加回车键和空格键事件事件，摁下回车开始，再次摁下结束，空格键如此;
         document.onkeyup = function(event) {
             event = event || window.event;
             //console.log(event.keyCode);
             if (event.keyCode == 13 || event.keyCode == 32) {
                 if (number == 0) {
                     play();
                     number = 1;
                 } else {
                     end();
                     number = 0;
                 }
             }
         }
  
     	   //开始函数
         function play() {
             clearInterval(timer);
             timer = setInterval(function() {
                 var item = Math.floor(Math.random() * items.length);
                 container.innerHTML = items[item];
                 //console.log(item);
             }, 100);
             start.classList.remove("btn-success");
             start.classList.add("btn-primary");
             stop.classList.add("btn-danger");
         }
     	
     	   //停止函数
         function end() {
             clearInterval(timer);
             stop.classList.remove("btn-danger");
             stop.classList.add("btn-info");
             start.classList.remove("btn-primary");
             start.classList.add("btn-success");
         }
     
     	   //刷新函数
         function refresh() {
             window.location.reload();
         }
     }
  </script>
  

3.知识点总结

• 外部js替换内部框架样式
• 类名添加、移除、切换
• 随机数结合数据使用