js實(shí)現(xiàn)隨機(jī)點(diǎn)名功能

更新時(shí)間：2020年12月23日 10:55:49 作者：等待的L先生

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)隨機(jī)點(diǎn)名的具體代碼，供大家參考，具體內(nèi)容如下

效果：

PS:在原來的效果中很快的，但是不知怎么的錄下來就變得這么慢了

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隨機(jī)點(diǎn)名</title>
  <style>
    .box{
      width: 800px;
      margin: 200px auto;
      text-align: center;
    }
    .box h2{
      font-size: 55px;


      font-weight: 800;
    }
    .box input{
      outline: none;
      border: none;
      background: blue;
      color: white;
      width: 100px;
      height: 50px;
      font-size: 15px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="box">
    <h2 id="res">請(qǐng)點(diǎn)擊下面的按鈕，開始抽獎(jiǎng)！</h2>
    <input type="button" value="點(diǎn)擊開始" id="btn">
  </div>
  
  <script>
   var btn=  document.getElementById("btn");
   var res=  document.getElementById("res");
    var student=["張三","李四","王二","麻子","小明","小王","小胡","小虎","狗子","多銀幣","貢子哥","劉青松","瞎子","亞索"]
  
    var flag=true;
    var timer=null;
    //
    btn.onclick=function(){
     
      
      if(flag){
        timer= setInterval(function(){
         var index= getRandom(student.length-1,0) ;

         
         res.innerHTML=student[index];
         
         
        },10);
        
        btn.value="點(diǎn)擊結(jié)束";
        flag=false;
      }else{
        clearInterval(timer);
        btn.value="點(diǎn)擊開始";
        flag=true;
      }
      
    }


    function getRandom(max,min){
      
     return Math.round(Math.random()*(max-min)+min);
    }
  </script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
配置eslint規(guī)范項(xiàng)目代碼風(fēng)格
這篇文章主要介紹了配置eslint規(guī)范項(xiàng)目代碼風(fēng)格，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-03-03
JavaScript獲取用戶所在城市及地理位置
這篇文章主要介紹了JavaScript獲取用戶所在城市及地理位置的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2018-04-04
Ionic3實(shí)現(xiàn)圖片瀑布流布局
本篇文章主要介紹了Ionic3實(shí)現(xiàn)圖片瀑布流布局，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
JavaScript實(shí)現(xiàn)AOP詳解(面向切面編程,裝飾者模式)
下面小編就為大家分享一篇JavaScript實(shí)現(xiàn)AOP的方法(面向切面編程,裝飾者模式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
這篇文章主要為大家詳細(xì)介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
js中的this關(guān)鍵字詳解
this是Javascript語言的一個(gè)關(guān)鍵字它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用,下面分四種情況，詳細(xì)討論this的用法，感興趣的朋友可以了解下
2013-09-09
JS實(shí)現(xiàn)簡(jiǎn)易日歷效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)易日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
JS組件Bootstrap Select2使用方法詳解
這篇文章主要為大家介紹了JS組件Bootstrap Select2使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-01-01
JavaScript動(dòng)態(tài)插入script的基本思路及實(shí)現(xiàn)函數(shù)
偶爾需要?jiǎng)討B(tài)插入javascript代碼的需求，基本思路是動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽，設(shè)置其src屬性，type屬性等，需要的朋友可以參考下
2013-11-11