原生JS實現(xiàn)隨機點名項目的實例代碼
更新時間：2019年04月30日 16:33:51 作者：小方哥·
這篇文章主要介紹了原生JS實現(xiàn)隨機點名項目的實例代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
核心思想
•隨機產(chǎn)生規(guī)定范圍內(nèi)的整數(shù)，然后再產(chǎn)生相同范圍內(nèi)的整數(shù)，兩者相同時，則暫停。
所用知識
•Math.random() * num: 產(chǎn)生從0到num的隨機數(shù)
•Math.floor(): 向下取整
•簡單的DOM操作等
技術(shù)擴展
•擴展人數(shù)
•添加停止鍵等
效果
代碼如下
•html:
<div class="container">
<section class="demo">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="students"><ul></ul></section>
<section class="buttonList">
<ul>
<li><button type="button">隨機選一個</button></li>
<li><button type="button">隨機選兩個</button></li>
<li><button type="button">隨機選三個</button></li>
</ul>
</section>
</div>
•css:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
width: 100%;
height: 100%;
background: url("images/bg.jpg") no-repeat;
background-size: cover;
}
button {
border: none;
background-color: transparent;
color: #fff;
font-size: 20px;
}
.container {
width: 1200px;
height: 700px;
margin: 10px auto;
}
.container .demo, .container .buttonList {
width: inherit;
height: 25%;
}
.container .students {
width: inherit;
height: 50%;
}
.container .students li {
margin-right: 50px;
margin-bottom: 30px;
text-align: center;
border-radius: 10px;
font-size: 20px;
font-weight: bold;
}
.container .students li:nth-child(5n) {
margin-right: 0;
}
.container .buttonList li button {
float: left;
width: 200px;
height: 60px;
background-color: #4caf5085;
margin-right: 150px;
text-align: center;
line-height: 60px;
border-radius: 10px;
margin-top: 50px;
font-weight: bold;
}
.container .buttonList li button:hover {
background-color: #4caf50;
}
.container .buttonList li:nth-child(1) {
margin-left: 150px;
}
.container .demo li {
width: 200px;
height: 150px;
background-color: #4caf5085;
float: left;
margin-right: 150px;
border-radius: 50%;
margin-top: 10px;
line-height: 150px;
font-weight: bold;
color: #fff;
font-size: 60px;
text-align: center;
}
.container .demo li:first-child {
margin-left: 150px;
}
</style>
•javascript:
<script type="text/javascript">
var stuArray = ["小方", "小田", "小明", "小紅", "小呂", "小于", "小美", "小綠", "李華", "小李", "小胡",
"小夏", "小徐", "小小", "小吳", "小陳", "小狗", "小許", "小熊", "小新"];
var stuList = document.querySelector(".students").querySelector("ul");
var buttonList = document.querySelectorAll("button");
var demoList = document.querySelector(".demo").querySelectorAll("li");
for (var i = 0; i < stuArray.length; i++) {
var li = document.createElement("li");
stuList.appendChild(li);
li.innerHTML = stuArray[i];
li.style.cssFloat = "left";
li.style.width = 200 + "px";
li.style.height = 60 + "px";
li.style.backgroundColor = "#4caf5085";
li.style.color = "#fff";
li.style.lineHeight = 60 + "px";
}
var stuArrayList = stuList.querySelectorAll("li");
function chooseOne () {
for (var i = 0; i < stuArrayList.length; i++) {
stuArrayList[i].style.background = "#4caf5085";
}
for (var i = 0; i < demoList.length; i++) {
demoList[i].innerHTML = "";
}
var interId = setInterval(function () {
var x = Math.floor(Math.random() * stuArray.length);
stuArrayList[x].style.backgroundColor = "green";
demoList[1].innerHTML = stuArrayList[x].innerHTML;
var timeId = setTimeout(function () {
stuArrayList[x].style.backgroundColor = "#4caf5085";
}, 100);
var y = Math.floor(Math.random() * stuArray.length);
if (y == x) {
clearTimeout(timeId);
clearInterval(interId);
stuArrayList[y].style.backgroundColor = "green";
}
}, 100);
}
function chooseTwo () {
for (var i = 0; i < stuArrayList.length; i++) {
stuArrayList[i].style.background = "#4caf5085";
}
for (var i = 0; i < demoList.length; i++) {
demoList[i].innerHTML = "";
}
var interId = setInterval(function () {
do {
var x1 = Math.floor(Math.random() * stuArray.length);
var x2 = Math.floor(Math.random() * stuArray.length);
} while (x1 == x2);
stuArrayList[x1].style.backgroundColor = "green";
stuArrayList[x2].style.backgroundColor = "green";
demoList[0].innerHTML = stuArrayList[x1].innerHTML;
demoList[2].innerHTML = stuArrayList[x2].innerHTML;
var timeId = setTimeout(function () {
stuArrayList[x1].style.backgroundColor = "#4caf5085";
stuArrayList[x2].style.backgroundColor = "#4caf5085";
}, 100);
var y1 = Math.floor(Math.random() * stuArray.length);
var y2 = Math.floor(Math.random() * stuArray.length);
if ((y1 == x1 && y2 == x2) || (y1 == x2 && y2 == x1)) {
clearTimeout(timeId);
clearInterval(interId);
stuArrayList[x1].style.backgroundColor = "green";
stuArrayList[x2].style.backgroundColor = "green";
}
}, 100);
}
function chooseThree () {
for (var i = 0; i < stuArrayList.length; i++) {
stuArrayList[i].style.background = "#4caf5085";
}
for (var i = 0; i < demoList.length; i++) {
demoList[i].innerHTML = "";
}
var interId = setInterval(function () {
do {
var x1 = Math.floor(Math.random() * stuArray.length);
var x2 = Math.floor(Math.random() * stuArray.length);
var x3 = Math.floor(Math.random() * stuArray.length);
} while (x1 == x2 || x2 == x3 || x1 == x3);
stuArrayList[x1].style.backgroundColor = "green";
stuArrayList[x2].style.backgroundColor = "green";
stuArrayList[x3].style.backgroundColor = "green";
demoList[0].innerHTML = stuArrayList[x1].innerHTML;
demoList[1].innerHTML = stuArrayList[x2].innerHTML;
demoList[2].innerHTML = stuArrayList[x3].innerHTML;
var timeId = setTimeout(function () {
stuArrayList[x1].style.backgroundColor = "#4caf5085";
stuArrayList[x2].style.backgroundColor = "#4caf5085";
stuArrayList[x3].style.backgroundColor = "#4caf5085";
}, 100);
var y1 = Math.floor(Math.random() * stuArray.length);
var y2 = Math.floor(Math.random() * stuArray.length);
var y3 = Math.floor(Math.random() * stuArray.length);
if ((x1 == y1 && x2 == y2) || (x1 == y2 && x2 == y1)) {
clearTimeout(timeId);
clearInterval(interId);
stuArrayList[x1].style.backgroundColor = "green";
stuArrayList[x2].style.backgroundColor = "green";
stuArrayList[x3].style.backgroundColor = "green";
}
}, 100);
}
buttonList[0].addEventListener("click", function () {chooseOne()}, false);
buttonList[1].addEventListener("click", function () {chooseTwo()}, false);
buttonList[2].addEventListener("click", function () {chooseThree()}, false);
總結(jié)
以上所述是小編給大家介紹的原生JS實現(xiàn)隨機點名項目的實例代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
JSQL 基于客戶端的成績統(tǒng)計實現(xiàn)方法
JSQL應(yīng)用案例 基于客戶端的成績統(tǒng)計，下面我把整個example的代碼貼出來，歡迎拍磚2010-05-05
關(guān)于JS數(shù)組追加數(shù)組采用push.apply的問題
JS數(shù)組追加數(shù)組沒有現(xiàn)成的函數(shù)，這么多年我已經(jīng)習(xí)慣了a.push.apply(a, b);這種自以為很酷的，不需要寫for循環(huán)的寫法，一直也沒遇到什么問題，直到今天我要append的b是個很大的數(shù)組時才遇到了坑。2014-06-06
使用JavaScript實現(xiàn)隨機曲線之間進行平滑切換
今天,我運用拉格朗日插值法繪制了一條曲線,然而,我并未止步于靜態(tài)展示,而是引入了一個定時器,每隔一段時間便對曲線上的點進行動態(tài)更新,從而賦予曲線生命般的動態(tài)變化,本文介紹了使用JavaScript實現(xiàn)隨機曲線之間進行平滑切換,感興趣的朋友可以參考下2024-11-11
淺析BootStrap模態(tài)框的使用(經(jīng)典)
Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。本文給大家介紹BootStrap模態(tài)框的使用，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
微信小程序開發(fā)搜索功能實現(xiàn)(前端+后端+數(shù)據(jù)庫)
這篇文章主要介紹了微信小程序開發(fā)搜索功能實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
使用JavaScript實現(xiàn)點擊循環(huán)切換圖片效果
本文通過實例代碼給大家介紹了通過js實現(xiàn)點擊循環(huán)切換圖片效果，需要的朋友參考下2017-09-09
本文詳細(xì)介紹了在前端項目中插入圖片的不同方法,包括HTML標(biāo)簽、CSS樣式、JavaScript動態(tài)加載以及圖片的性能優(yōu)化,其中涉及到的技術(shù)包括響應(yīng)式圖片設(shè)計、圖片懶加載技術(shù)和圖片格式選擇等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
如何在uni-app使用微軟的文字轉(zhuǎn)語音服務(wù)
有了語音識別,交流就會變得很簡單,下面這篇文章主要給大家介紹了關(guān)于如何在uni-app使用微軟的文字轉(zhuǎn)語音服務(wù)的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了在Iframe中獲取父窗口中表單的值(示例代碼)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介為大家詳細(xì)紹了Bootstrap CSS組件之大屏幕展播的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12