js實(shí)現(xiàn)隨機(jī)點(diǎn)名功能
本文實(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">請點(diǎn)擊下面的按鈕,開始抽獎!</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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- javascript實(shí)現(xiàn)的一個隨機(jī)點(diǎn)名功能
- 使用javascript做的一個隨機(jī)點(diǎn)名程序
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)
- JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名小功能
- JS+CSS實(shí)現(xiàn)隨機(jī)點(diǎn)名(實(shí)例代碼)
- JavaScript實(shí)現(xiàn)班級隨機(jī)點(diǎn)名小應(yīng)用需求的具體分析
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器實(shí)例詳解
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序
相關(guān)文章
layer彈出層的關(guān)閉問題詳解之在執(zhí)行完畢后關(guān)閉當(dāng)前彈出層
在前端頁面中用layer打開窗口供用戶輸入或選擇是非常常見的用法,但是有時為了完成一次操作,需要彈出多個窗口進(jìn)行選擇、輸入或者提示,因此在關(guān)閉窗口的時候需要實(shí)現(xiàn)指定關(guān)閉任意窗口,需要的朋友可以參考下2023-10-10
原生js 封裝get ,post, delete 請求的實(shí)例
下面小編就為大家?guī)硪黄鷍s 封裝get ,post, delete 請求的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平(扁平化)方法
數(shù)組扁平化是指將一個多維數(shù)組變?yōu)橐痪S數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平(扁平化)方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
JS判斷字符串變量是否含有某個字串的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S判斷字符串變量是否含有某個字串的實(shí)現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
配置eslint規(guī)范項(xiàng)目代碼風(fēng)格
這篇文章主要介紹了配置eslint規(guī)范項(xiàng)目代碼風(fēng)格,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
js和jquery批量綁定事件傳參數(shù)一(新豬豬原創(chuàng))
js綁定事件傳參,javascript綁定事件傳參數(shù),jquery綁定事件傳參數(shù)2010-06-06
Jquery顏色選擇器ColorPicker實(shí)現(xiàn)代碼
這里我要分享一個自己修改的顏色選擇器,有需要的朋友參考下2012-11-11

