您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JavaScript怎么實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript怎么實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名”吧!
效果展示(表單內(nèi)容可以根據(jù)自己需要進(jìn)行修改)
第一步:
可以給整個(gè)表格內(nèi)容設(shè)置一個(gè)內(nèi)邊距,里面的文字可以自己添加,這里用了英文亂碼,沒有任何的其他意義,只是一個(gè)展示效果。
可以給整個(gè)表格內(nèi)容設(shè)置一個(gè)內(nèi)邊距,里面的文字可以自己添加,這里用了英文亂碼,沒有任何的其他意義,只是一個(gè)展示效果。
可以給整個(gè)表格內(nèi)容設(shè)置一個(gè)內(nèi)邊距,里面的文字可以自己添加,這里用了英文亂碼,沒有任何的其他意義,只是一個(gè)展示效果。
<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>
第二步:
定義兩個(gè)按鈕,在js中設(shè)置點(diǎn)擊事件,來完成所有的操作
<button class="start">開始</button> <button class="end">結(jié)束</button>
需要給整個(gè)表格之間的外邊距去除, border-collapse: collapse;使用這個(gè),hover是為了后續(xù)實(shí)現(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>
第一步:
先獲取所需要的所有元素
var tdlist = document.querySelectorAll("td"); var btns = document.querySelector(".start"); var btne = document.querySelector(".end"); var table = document.querySelector("table"); var setTime //提前定義點(diǎn)擊事件的名稱
第二步:
設(shè)置點(diǎn)擊事件,在設(shè)置開始的點(diǎn)擊事件中,我們需要提前設(shè)置一個(gè),清楚定時(shí)器效果,以注釋,意義是,連續(xù)點(diǎn)擊,不會(huì)出現(xiàn)bug,內(nèi)次點(diǎn)擊都是先清除上一次的點(diǎn)擊事件,如果沒有,就會(huì)出現(xiàn)疊加效果,整個(gè)代碼就會(huì)癱瘓,無法使用,其中封裝了函數(shù),為了更方便展示排他思想的代碼。
btns.addEventListener('click', function () { clearInterval(setTime)//提前清除 setTime = setInterval(change,200); } ) btne.addEventListener('click', function () { clearInterval(setTime) })
第三步:
排他思想控制背景,需要先使用取整的方式,來得到0到19,然后通過for循環(huán),來將所有的內(nèi)容為空,然后再通過點(diǎn)擊來結(jié)束選擇,實(shí)現(xiàn)一個(gè)方框有背景色。
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)容)
簡單兩個(gè)div,設(shè)置一個(gè)按鈕
<div class="a">???</div> <div class="b"><button>開始</button></div>
設(shè)置一下大小,居中
<style> .a{ width: 200px; font-size: 50px; margin: auto; text-align: center; } .b{ text-align: center; } </style>
第一步:
獲取元素
var btn = document.querySelector('button'); var div = document.querySelector('div'); var username = ['張三','李四','旺旺','王五','王二'] //可以隨意添加內(nèi)容 var flag = true; //設(shè)置取反 var a; //下面的全局變量
第二步:
給按鈕設(shè)置點(diǎn)擊事件,然后進(jìn)行取反,來進(jìn)行定時(shí)器的隨機(jī)事件,和清楚定時(shí)器。
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部分有一點(diǎn)點(diǎn)變化
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)
到此,相信大家對“JavaScript怎么實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。