JavaScript實(shí)現(xiàn)簡單隨機(jī)點(diǎn)名器
更新時(shí)間：2019年11月21日 08:37:36 作者：菜_稽
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單隨機(jī)點(diǎn)名器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js隨機(jī)點(diǎn)名器的具體代碼，供大家參考，具體內(nèi)容如下
<html lang="zh">
<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>隨機(jī)抽簽</title>
</head>
<body>
<center>
<div id="d" style="background: #7A7A7A;width: 250px;"><!-- 設(shè)置背景框顏色和長度 -->
<h1 id = 'name'></h1> <!-- 用于顯示隨機(jī)的人名 -->
</div>
<div>
<button id = 'start' type="button">開始</button>
</div>
<div>
<button id = 'temp' type="button">暫停</button>
</div>
</center>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
var names = ['name','name','name','name','name']; //人名數(shù)組
var clors = ['#EE0000','#CAE1FF','#008B8B','#CDC9C9','#F0F8FF'];//顏色數(shù)組
var name = document.getElementById('name'); //獲取id為name的元素
var d = document.getElementById('d');
var temp = document.getElementById('temp');
var startR = -1; //記錄計(jì)時(shí)器的序號
var start = document.getElementById('start');
function Random(){ //產(chǎn)生隨機(jī)數(shù)，并更改h1中的內(nèi)容與顏色
var nNum = Math.floor(Math.random()*5); //這里的5為你當(dāng)前人名的數(shù)量
var cNum = Math.floor(Math.random()*5);
name.innerHTML = names[nNum];
d.style.color = clors[cNum];
}
start.onclick = function(){ //單擊開始方法
if(startR == -1) //不加限制，多次點(diǎn)擊開始會有多個(gè)計(jì)時(shí)器啟動
startR = setInterval(Random,25);//設(shè)置計(jì)時(shí)器，每0.025秒執(zhí)行一次
}
temp.onclick = function(){ //單擊暫停方法
clearInterval(startR);
startR = -1;
}
}
</script>
當(dāng)前代碼僅實(shí)現(xiàn)了隨機(jī)點(diǎn)名的功能，沒有做任何界面美化。
具體展示
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS運(yùn)算符優(yōu)先級與表達(dá)式示例詳解
這篇文章主要給大家介紹了關(guān)于JS運(yùn)算符優(yōu)先級與表達(dá)式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之本地?cái)?shù)據(jù)緩存功能,結(jié)合實(shí)例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage針對數(shù)據(jù)緩存的存取、刪除等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
本文給大家總結(jié)了一下常見的javascript檢驗(yàn)各種規(guī)則的代碼，通過正則表達(dá)式來實(shí)現(xiàn)，都是項(xiàng)目中經(jīng)常需要用到的，有需要的小伙伴可以參考下。2015-07-07
Javascript遍歷Html Table示例(包括內(nèi)容和屬性值)
這篇文章主要介紹了Javascript如何遍歷Html Table(包括內(nèi)容和屬性值),需要的朋友可以參考下2014-07-07
BootStrap中Datepicker控件帶中文的js文件
bootstrap-datepicker 是一個(gè)非常優(yōu)秀的時(shí)間選擇插件。這篇文章主要介紹了bootstrap-datepicker帶中文的js文件的相關(guān)資料,需要的朋友可以參考下2016-08-08
本篇文章主要是對js跳轉(zhuǎn)頁面方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z法將數(shù)組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時(shí)還比傳統(tǒng)的屬性訪問方法更為清晰，下面這篇文章主要給大家介紹了關(guān)于在es6解構(gòu)時(shí)應(yīng)該注意的點(diǎn)，需要的朋友可以參考下。2017-08-08
JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能示例
這篇文章主要介紹了JS+html5實(shí)現(xiàn)異步上傳圖片顯示上傳文件進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了JavaScript前端結(jié)合HTML5實(shí)現(xiàn)post文件上傳與進(jìn)度條顯示相關(guān)操作技巧,需要的朋友可以參考下2019-11-11
jquery根據(jù)錨點(diǎn)offset值實(shí)現(xiàn)動畫切換
點(diǎn)擊后僵硬的切換是不是很不爽，下面為大家介紹的是根據(jù)錨點(diǎn)offset值來實(shí)現(xiàn)動畫切換，喜歡的朋友不要錯(cuò)過2014-09-09
BootStrap柵格系統(tǒng)可以把我們的container容器劃分為若干等分，如果想要每個(gè)部分之間留出一定的空隙，那么應(yīng)該怎么解決，本文就來介紹一下2021-08-08