js實現(xiàn)隨機(jī)點名功能
更新時間：2020年12月23日 10:55:49 作者：等待的L先生
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)隨機(jī)點名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)隨機(jī)點名的具體代碼，供大家參考，具體內(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ī)點名</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">請點擊下面的按鈕，開始抽獎！</h2>
<input type="button" value="點擊開始" 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="點擊結(jié)束";
flag=false;
}else{
clearInterval(timer);
btn.value="點擊開始";
flag=true;
}
}
function getRandom(max,min){
return Math.round(Math.random()*(max-min)+min);
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了配置eslint規(guī)范項目代碼風(fēng)格，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了JavaScript獲取用戶所在城市及地理位置的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-04-04
本篇文章主要介紹了Ionic3實現(xiàn)圖片瀑布流布局，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript實現(xiàn)AOP詳解(面向切面編程,裝飾者模式)
下面小編就為大家分享一篇JavaScript實現(xiàn)AOP的方法(面向切面編程,裝飾者模式)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
這篇文章主要為大家詳細(xì)介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
this是Javascript語言的一個關(guān)鍵字它代表函數(shù)運行時，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi)部使用,下面分四種情況，詳細(xì)討論this的用法，感興趣的朋友可以了解下2013-09-09
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡易日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家介紹了JS組件Bootstrap Select2使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
JavaScript動態(tài)插入script的基本思路及實現(xiàn)函數(shù)
偶爾需要動態(tài)插入javascript代碼的需求，基本思路是動態(tài)創(chuàng)建一個script標(biāo)簽，設(shè)置其src屬性，type屬性等，需要的朋友可以參考下2013-11-11