快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)單的隨機(jī)點(diǎn)名器

更新時(shí)間：2020年09月17日 11:01:32 作者：「已注銷」

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

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

<!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">
  <title>Document</title>
  <style>
  .box {
    width: 200px;
    height: 200px;
    line-height: 200px;
    background-color: #ccc;
    font-size: 30px;
    text-align: center;
  }
  </style>
</head>
<body>
  <div class="box">此乃點(diǎn)名器</div>
  <input type="button" value="點(diǎn)名" id="btn">
  <!-- <button id="btn">點(diǎn)名</button> -->
  <script>
    var btn = document.getElementById("btn");
    var box = document.getElementsByClassName("box")[0];
// 3、寫(xiě)一個(gè)隨機(jī)抽名的案例？（點(diǎn)擊按鈕開(kāi)啟定時(shí)器，
// 定時(shí)器中去隨機(jī)抽取人名，把全班的人放在一個(gè)數(shù)組中，只要想辦法獲取隨機(jī)的索引號(hào)就可以）
    btn.onclick = function() {
      if(this.value==="點(diǎn)名") {
      function fn() {
      var arr = ["張三","李四","王五","趙六","黑七","白八","紫九","紅薯"];
      var index = parseInt(Math.random()*arr.length);
     var n1 = parseInt(Math.random()*255+1);
     var n2 = parseInt(Math.random()*255+1);
     var n3 = parseInt(Math.random()*255+1);
      box.style.background ="rgb("+n1+","+n2+","+n3+")" ;
      box.innerHTML = arr[index]; 
      } 
      this.value = "停止";
      //定時(shí)器不加var聲明，涉及到作用域問(wèn)題  
      timer=setInterval(fn,2);
      }else {
        clearInterval(timer);
        this.value = "點(diǎn)名";
      }
      
    }
 
 
 
 
    </script>
</body>
</html>

效果圖如下：

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

您可能感興趣的文章:

相關(guān)文章

JavaScript判斷是否手機(jī)瀏覽器的五種方法
現(xiàn)在手機(jī)網(wǎng)站已經(jīng)很普及了，有時(shí)候前端網(wǎng)頁(yè)需要判斷，用戶使用的是手機(jī)瀏覽器還是電腦瀏覽器。這篇文章整理了JavaScript判斷是否手機(jī)瀏覽器的五種方法，通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值
2022-11-11
js字符串操作函數(shù)總結(jié)及使用方法示例
這篇文章主要介紹了js字符串操作函數(shù)toString、split、length、indexOf、lastIndexOf、replace、replaceAll、charAt、charCodeAt、contact、slice、substring、substr、match、exec、search、trim、includes
2023-08-08
JavaScript?中如何攔截全局?Fetch?API?的請(qǐng)求和響應(yīng)問(wèn)題
在本文中，我們介紹了什么是 JavaScript 攔截器，學(xué)習(xí)了如何通過(guò)給 Fetch API 使用猴子補(bǔ)丁和使用 fetch-intercept 庫(kù)來(lái)創(chuàng)建攔截器，對(duì)js攔截全局Fetch?API的請(qǐng)求和響應(yīng)知識(shí)感興趣的朋友跟隨小編一起看看吧
2023-01-01
JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
JS使用cookie保存用戶登錄信息操作示例
這篇文章主要介紹了JS使用cookie保存用戶登錄信息操作,結(jié)合具體實(shí)例形式分析了javascript使用cookie實(shí)現(xiàn)針對(duì)用戶信息的存儲(chǔ)與讀取相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
簡(jiǎn)單實(shí)現(xiàn)bootstrap導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)bootstrap導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
JS監(jiān)聽(tīng)微信、支付寶等移動(dòng)app及瀏覽器的返回、后退、上一頁(yè)按鈕的事件方法
這篇文章主要介紹了JS監(jiān)聽(tīng)微信、支付寶等移動(dòng)app及瀏覽器的返回、后退、上一頁(yè)按鈕的事件方法,需要的朋友可以參考下
2016-08-08
js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-01-01
JS?中Proxy代理和?Reflect反射方法示例詳解
這篇文章主要為大家介紹了JS?中Proxy代理和?Reflect反射方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
微信小程序中視頻的顯示與隱藏功能
這篇文章主要介紹了微信小程序中視頻的顯示與隱藏,思路大概是定義一個(gè)標(biāo)記變量，控制視頻的播放與暫停，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-10-10