JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名
一、表格表單的隨機選擇
效果展示（表單內(nèi)容可以根據(jù)自己需要進(jìn)行修改）
1.H5的布局
第一步：
可以給整個表格內(nèi)容設(shè)置一個內(nèi)邊距，里面的文字可以自己添加，這里用了英文亂碼，沒有任何的其他意義，只是一個展示效果。
可以給整個表格內(nèi)容設(shè)置一個內(nèi)邊距，里面的文字可以自己添加，這里用了英文亂碼，沒有任何的其他意義，只是一個展示效果。
可以給整個表格內(nèi)容設(shè)置一個內(nèi)邊距，里面的文字可以自己添加，這里用了英文亂碼，沒有任何的其他意義，只是一個展示效果。
<div>
<table cellpadding="10px">
<tr>
<td>Lorem.</td>
<td>Ipsa.</td>
<td>Minus.</td>
<td>Veritatis.</td>
<td>Doloribus.</td>
</tr>
<tr>
<td>Sunt.</td>
<td>Corrupti?</td>
<td>In.</td>
<td>Voluptatibus?</td>
<td>A?</td>
</tr>
<tr>
<td>Dolorem?</td>
<td>Totam!</td>
<td>Voluptas.</td>
<td>Provident?</td>
<td>Atque.</td>
</tr>
<tr>
<td>Molestias!</td>
<td>Ad.</td>
<td>Optio!</td>
<td>Nisi.</td>
<td>Deleniti.</td>
</tr>
</table>
</div>第二步：
定義兩個按鈕，在js中設(shè)置點擊事件，來完成所有的操作
<button class="start">開始</button>
<button class="end">結(jié)束</button>2.CSS布局
需要給整個表格之間的外邊距去除， border-collapse: collapse;使用這個，hover是為了后續(xù)實現(xiàn)排他思想，所進(jìn)行的布局，可用用div大盒子來將表格居中，更有觀賞性。
<style>
table {
width: 500px;
box-sizing: border-box;
border: 1px solid #ccc;
text-align: center;
border-collapse: collapse;
}
td {
width: 100px;
box-sizing: border-box;
border: 1px solid #ccc;
}
.hover {
background-color: rgba(0, 0, 0, 0.5);
}
div {
width: 500px;
margin: 50px auto;
text-align: center;
}
</style>3.JS的布局
第一步：
先獲取所需要的所有元素
var tdlist = document.querySelectorAll("td");
var btns = document.querySelector(".start");
var btne = document.querySelector(".end");
var table = document.querySelector("table");
var setTime //提前定義點擊事件的名稱 第二步：
設(shè)置點擊事件，在設(shè)置開始的點擊事件中，我們需要提前設(shè)置一個，清楚定時器效果，以注釋，意義是，連續(xù)點擊，不會出現(xiàn)bug，內(nèi)次點擊都是先清除上一次的點擊事件，如果沒有，就會出現(xiàn)疊加效果，整個代碼就會癱瘓，無法使用，其中封裝了函數(shù)，為了更方便展示排他思想的代碼。
btns.addEventListener('click', function () {
clearInterval(setTime)//提前清除
setTime = setInterval(change,200);
}
)
btne.addEventListener('click', function () {
clearInterval(setTime)
})第三步：
排他思想控制背景，需要先使用取整的方式，來得到0到19，然后通過for循環(huán)，來將所有的內(nèi)容為空，然后再通過點擊來結(jié)束選擇，實現(xiàn)一個方框有背景色。
function change() {
var num = Math.floor(Math.random() * 20);
// 將所有td背景顏色初始化
for (var i = 0; i < tdlist.length; i++) {
tdlist[i].className = "";
}
tdlist[num].className = "hover";
}二、簡單的隨機點名
效果展示（可以自己修改內(nèi)容）
1.H5布局
簡單兩個div，設(shè)置一個按鈕
<div class="a">???</div> <div class="b"><button>開始</button></div>
2.CSS布局
設(shè)置一下大小，居中
<style>
.a{
width: 200px;
font-size: 50px;
margin: auto;
text-align: center;
}
.b{
text-align: center;
}
</style>3.JS布局
第一步：
獲取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
var username = ['張三','李四','旺旺','王五','王二'] //可以隨意添加內(nèi)容
var flag = true; //設(shè)置取反
var a; //下面的全局變量第二步：
給按鈕設(shè)置點擊事件，然后進(jìn)行取反，來進(jìn)行定時器的隨機事件，和清楚定時器。
btn.addEventListener('click',function(){
flag = !flag;
if(flag==false){
a = setInterval(function(){
var iusername = Math.floor(Math.random()*username.length)
div.innerHTML = username[iusername];
btn.innerHTML = '暫停'; //給按鈕從新賦值
},50)}
else{
clearInterval(a);
btn.innerHTML = '開始'; //給按鈕從新賦值
}
})三、可以自己暫停的隨機點名
布局和上面一樣，js部分有一點點變化
btn.addEventListener('click',function(){
a = setInterval(function(){
var iusername = Math.floor(Math.random()*username.length)
div.innerHTML = username[iusername];
},50)
setTimeout(function(){
clearInterval(a);
},2000)到此這篇關(guān)于JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名的文章就介紹到這了,更多相關(guān)JavaScript隨機點名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要幫助大家理解JS事件循環(huán)，深入淺出的講解了javascript事件循環(huán)，感興趣的小伙伴們可以參考一下2016-01-01
有關(guān)script注入想必大家也有所了解，在本文將為大家介紹下如何屏蔽script注入，下面有個不錯的示例大家可以感受下2013-11-11
JS判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點擊操作的方法
下面小編就為大家?guī)硪黄狫S判斷鍵盤是否按的回車鍵并觸發(fā)指定按鈕點擊操作的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
獲取radio選中值的方法有很多，在本文為大家介紹的是使用for循環(huán)來實現(xiàn)，具體的實現(xiàn)如下，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了這樣回答繼承可能面試官更滿意,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-12-12
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)導(dǎo)航欄樓層特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了es6函數(shù)之尾遞歸用法,結(jié)合實例形式分析了es6函數(shù)尾遞歸原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要給大家介紹了關(guān)于Echarts?3D散點圖的相關(guān)資料, Echarts散點圖是一種常用的數(shù)據(jù)可視化圖表類型,用于展示兩個或多個維度的數(shù)據(jù)分布情況,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)坦克移動小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
event.currentTarget與event.target的區(qū)別介紹
event.currentTarget與event.target的區(qū)別想大家在使用的時候不是很在意，本文以測試代碼來講解它門之間的不同2012-12-12