JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名網(wǎng)頁(yè)
JavaScript寫(xiě)一個(gè)隨機(jī)點(diǎn)名網(wǎng)頁(yè),供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } #box { border: 1px solid black;/*設(shè)置盒子的邊框和顏色*/ width: 500px; height: 500px; margin: 100px auto;/*離頂部200px,并且居中*/ background-color: #000000;/*盒子的背景顏色*/ position: relative;/*定位*/ } p{ width: 500px; height: 200px; text-align: center;/*將文本居中*/ line-height: 200px;/*設(shè)置行高*/ 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">隨機(jī)點(diǎn)名冊(cè)</p> <input type="button" value="開(kāi)始點(diǎn)名" id="anniu"> </div> </body> <script> var wenben = document.getElementById("wenben") var anniu = document.getElementById("anniu") var timer //定義計(jì)時(shí)器 var arr = ['劉一','陳二','張三','李四','王五','趙六','孫七','周八','吳九','鄭十'] var test = true anniu.onclick = function() { if (test) { start() anniu.innerHTML = "結(jié)束" test = false } else { stop() anniu.innerHTML = "開(kāi)始" test = true } } function start() { /*開(kāi)始*/ timer = setInterval(function random() { var index = parseInt(Math.random() * arr.length) wenben.innerHTML = arr[index] }, 50); } function stop() { /*結(jié)束*/ clearInterval(timer) } </script> </html>
實(shí)現(xiàn)效果如下圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- javascript實(shí)現(xiàn)的一個(gè)隨機(jī)點(diǎn)名功能
- 使用javascript做的一個(gè)隨機(jī)點(diǎn)名程序
- JS實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名和順序點(diǎn)名
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名系統(tǒng)(實(shí)例講解)
- JS+CSS實(shí)現(xiàn)隨機(jī)點(diǎn)名(實(shí)例代碼)
- js實(shí)現(xiàn)隨機(jī)點(diǎn)名小功能
- JS實(shí)現(xiàn)隨機(jī)點(diǎn)名器
- JavaScript實(shí)現(xiàn)班級(jí)隨機(jī)點(diǎn)名小應(yīng)用需求的具體分析
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器
- JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名器實(shí)例詳解
相關(guān)文章
JS小功能(offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果)實(shí)例代碼
這篇文章主要介紹了offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果實(shí)例代碼,有需要的朋友可以參考一下2013-11-11javascript高亮效果的二種實(shí)現(xiàn)方法
js高亮效果實(shí)現(xiàn)代碼,直接靜態(tài)頁(yè)面即可,不用每次都要生成2008-09-09詳解微信小程序scroll-view橫向滾動(dòng)的實(shí)踐踩坑及隱藏其滾動(dòng)條的實(shí)現(xiàn)
這篇文章主要介紹了詳解微信小程序scroll-view橫向滾動(dòng)的實(shí)踐踩坑及隱藏其滾動(dòng)條的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03JS實(shí)現(xiàn)為表格動(dòng)態(tài)添加標(biāo)題的方法
這篇文章主要介紹了JS實(shí)現(xiàn)為表格動(dòng)態(tài)添加標(biāo)題的方法,涉及javascript中createCaption方法添加標(biāo)題的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03JS實(shí)現(xiàn)深拷貝的幾種簡(jiǎn)單方法示例
深拷貝和淺拷貝是在JavaScript中復(fù)制對(duì)象或數(shù)組時(shí)經(jīng)常遇到的概念,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)深拷貝的幾種簡(jiǎn)單方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能,結(jié)合實(shí)例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2018-05-05javascript實(shí)現(xiàn)倒計(jì)時(shí)關(guān)閉廣告
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)關(guān)閉廣告,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02