快捷導(dǎo)航

JavaScript實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名

更新時間：2022年08月09日 09:14:35 作者：小余努力搬磚

本文主要介紹了JavaScript實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、表格表單的隨機(jī)選擇

效果展示（表單內(nèi)容可以根據(jù)自己需要進(jìn)行修改）

1.H5的布局

第一步：

可以給整個表格內(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è)置點(diǎn)擊事件，來完成所有的操作

    <button class="start">開始</button>
    <button class="end">結(jié)束</button>

2.CSS布局

需要給整個表格之間的外邊距去除， border-collapse: collapse;使用這個，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>

3.JS的布局

第一步：

先獲取所需要的所有元素

    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è)置一個，清楚定時器效果，以注釋，意義是，連續(xù)點(diǎn)擊，不會出現(xiàn)bug，內(nèi)次點(diǎn)擊都是先清除上一次的點(diǎn)擊事件，如果沒有，就會出現(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)容為空，然后再通過點(diǎn)擊來結(jié)束選擇，實(shí)現(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";
            }

二、簡單的隨機(jī)點(diǎn)名

效果展示（可以自己修改內(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è)置點(diǎn)擊事件，然后進(jìn)行取反，來進(jìn)行定時器的隨機(jī)事件，和清楚定時器。

    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 = '開始'; //給按鈕從新賦值
        }
    })

三、可以自己暫停的隨機(jī)點(diǎn)名

布局和上面一樣，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)

到此這篇關(guān)于JavaScript實(shí)現(xiàn)表格表單的隨機(jī)選擇和簡單的隨機(jī)點(diǎn)名的文章就介紹到這了,更多相關(guān)JavaScript隨機(jī)點(diǎn)名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: