JavaScript實現(xiàn)隨機點名網(wǎng)頁
更新時間：2021年09月02日 13:12:54 作者：風筱默染
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)隨機點名網(wǎng)頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JavaScript寫一個隨機點名網(wǎng)頁，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
border: 1px solid black;/*設置盒子的邊框和顏色*/
width: 500px;
height: 500px;
margin: 100px auto;/*離頂部200px，并且居中*/
background-color: #000000;/*盒子的背景顏色*/
position: relative;/*定位*/
}
p{
width: 500px;
height: 200px;
text-align: center;/*將文本居中*/
line-height: 200px;/*設置行高*/
font-size: 80px;/*字體大小*/
color: #ffff00;
}
#anniu {
width: 200px;
height: 50px;
background-color:#00aaff;
position: absolute;
bottom: 100px;/*距離底部100px*/
left: 50%;
margin-left: -100px;
color: #ffffff;
font-size: 20px
}
</style>
</head>
<body>
<div id="box">
<p id="wenben">隨機點名冊</p>
<input type="button" value="開始點名" id="anniu">
</div>
</body>
<script>
var wenben = document.getElementById("wenben")
var anniu = document.getElementById("anniu")
var timer //定義計時器
var arr = ['劉一','陳二','張三','李四','王五','趙六','孫七','周八','吳九','鄭十']
var test = true
anniu.onclick = function() {
if (test) {
start()
anniu.innerHTML = "結(jié)束"
test = false
} else {
stop()
anniu.innerHTML = "開始"
test = true
}
}
function start() { /*開始*/
timer = setInterval(function random() {
var index = parseInt(Math.random() * arr.length)
wenben.innerHTML = arr[index]
}, 50);
}
function stop() { /*結(jié)束*/
clearInterval(timer)
}
</script>
</html>
實現(xiàn)效果如下圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS小功能(offsetLeft實現(xiàn)圖片滾動效果)實例代碼
這篇文章主要介紹了offsetLeft實現(xiàn)圖片滾動效果實例代碼，有需要的朋友可以參考一下2013-11-11
js高亮效果實現(xiàn)代碼，直接靜態(tài)頁面即可，不用每次都要生成2008-09-09
在firefox中，如果一個textarea獲取焦點，在輸入法激活的狀態(tài)如果這時js將該textarea的value修改，那么該textarea會直接被清空，下面是具體的解決方法，遇到類似問題的朋友可以參考下2013-07-07
javascript數(shù)組組合成字符串的腳本...2007-11-11
詳解微信小程序scroll-view橫向滾動的實踐踩坑及隱藏其滾動條的實現(xiàn)
這篇文章主要介紹了詳解微信小程序scroll-view橫向滾動的實踐踩坑及隱藏其滾動條的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
FLASH 廣告外部鏈接實現(xiàn)代碼2008-12-12
這篇文章主要介紹了JS實現(xiàn)為表格動態(tài)添加標題的方法,涉及javascript中createCaption方法添加標題的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
深拷貝和淺拷貝是在JavaScript中復制對象或數(shù)組時經(jīng)常遇到的概念,下面這篇文章主要給大家介紹了關(guān)于JS實現(xiàn)深拷貝的幾種簡單方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
JS實現(xiàn)鍵值對遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實現(xiàn)鍵值對遍歷json數(shù)組功能,結(jié)合實例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
javascript實現(xiàn)倒計時關(guān)閉廣告
這篇文章主要為大家詳細介紹了javascript實現(xiàn)倒計時關(guān)閉廣告，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02