js實現(xiàn)簡單的隨機點名器
更新時間：2020年09月17日 11:01:32 作者：「已注銷」
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單的隨機點名器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xià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">此乃點名器</div>
<input type="button" value="點名" id="btn">
<!-- <button id="btn">點名</button> -->
<script>
var btn = document.getElementById("btn");
var box = document.getElementsByClassName("box")[0];
// 3、寫一個隨機抽名的案例？（點擊按鈕開啟定時器，
// 定時器中去隨機抽取人名，把全班的人放在一個數(shù)組中，只要想辦法獲取隨機的索引號就可以）
btn.onclick = function() {
if(this.value==="點名") {
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 = "停止";
//定時器不加var聲明，涉及到作用域問題
timer=setInterval(fn,2);
}else {
clearInterval(timer);
this.value = "點名";
}
}
</script>
</body>
</html>
效果圖如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
現(xiàn)在手機網(wǎng)站已經(jīng)很普及了，有時候前端網(wǎng)頁需要判斷，用戶使用的是手機瀏覽器還是電腦瀏覽器。這篇文章整理了JavaScript判斷是否手機瀏覽器的五種方法，通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值2022-11-11
這篇文章主要介紹了js字符串操作函數(shù)toString、split、length、indexOf、lastIndexOf、replace、replaceAll、charAt、charCodeAt、contact、slice、substring、substr、match、exec、search、trim、includes2023-08-08
JavaScript?中如何攔截全局?Fetch?API?的請求和響應(yīng)問題
在本文中，我們介紹了什么是 JavaScript 攔截器，學(xué)習(xí)了如何通過給 Fetch API 使用猴子補丁和使用 fetch-intercept 庫來創(chuàng)建攔截器，對js攔截全局Fetch?API的請求和響應(yīng)知識感興趣的朋友跟隨小編一起看看吧2023-01-01
JS實現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實例
這篇文章主要介紹了JS實現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JS使用cookie保存用戶登錄信息操作,結(jié)合具體實例形式分析了javascript使用cookie實現(xiàn)針對用戶信息的存儲與讀取相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了如何簡單實現(xiàn)bootstrap導(dǎo)航效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法
這篇文章主要介紹了JS監(jiān)聽微信、支付寶等移動app及瀏覽器的返回、后退、上一頁按鈕的事件方法,需要的朋友可以參考下2016-08-08
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)京東秒殺倒計時功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要為大家介紹了JS?中Proxy代理和?Reflect反射方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了微信小程序中視頻的顯示與隱藏,思路大概是定義一個標(biāo)記變量，控制視頻的播放與暫停，本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10