JavaScript实现表格表单的随机选择和简单的随机点名

更新时间：2022年08月09日 09:14:35 作者：小余努力搬砖

本文主要介绍了JavaScript实现表格表单的随机选择和简单的随机点名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、表格表单的随机选择

效果展示（表单内容可以根据自己需要进行修改）

1.H5的布局

第一步：

可以给整个表格内容设置一个内边距，里面的文字可以自己添加，这里用了英文乱码，没有任何的其他意义，只是一个展示效果。

 
    <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中设置点击事件，来完成所有的操作

    <button class="start">开始</button>
    <button class="end">结束</button>

2.CSS布局

需要给整个表格之间的外边距去除， border-collapse: collapse;使用这个，hover是为了后续实现排他思想，所进行的布局，可用用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 //提前定义点击事件的名称

第二步：

设置点击事件，在设置开始的点击事件中，我们需要提前设置一个，清楚定时器效果，以注释，意义是，连续点击，不会出现bug，内次点击都是先清除上一次的点击事件，如果没有，就会出现叠加效果，整个代码就会瘫痪，无法使用，其中封装了函数，为了更方便展示排他思想的代码。

     btns.addEventListener('click', function () {
            clearInterval(setTime)//提前清除
            setTime = setInterval(change,200);
        }
 
    )
    btne.addEventListener('click', function () {
        clearInterval(setTime)
    })

第三步：

排他思想控制背景，需要先使用取整的方式，来得到0到19，然后通过for循环，来将所有的内容为空，然后再通过点击来结束选择，实现一个方框有背景色。

   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";
            }

二、简单的随机点名

效果展示（可以自己修改内容）

1.H5布局

简单两个div，设置一个按钮

   <div class="a">???</div>
   <div class="b"><button>开始</button></div>

2.CSS布局

设置一下大小，居中

  <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 = ['张三','李四','旺旺','王五','王二'] //可以随意添加内容
    var flag = true; //设置取反
    var a; //下面的全局变量

第二步：

给按钮设置点击事件，然后进行取反，来进行定时器的随机事件，和清楚定时器。

    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)

到此这篇关于JavaScript实现表格表单的随机选择和简单的随机点名的文章就介绍到这了,更多相关JavaScript随机点名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript网页关闭时提醒效果脚本
当页面载入和关闭时会出现一些提示信息的代码。方便提醒用户，但不建议多用，让人感到反感。
2008-10-10
JavaScript将相对地址转换为绝对地址示例代码
本文为大家详细介绍下JavaScript怎么将相对地址转换为绝对地址，具体的示例如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
JavaScript计算出两个数的差值
这篇文章主要为大家详细介绍了JavaScript计算出两个数的差值，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
ES6(ECMAScript 6)新特性之模板字符串用法分析
这篇文章主要介绍了ES6(ECMAScript 6)新特性之模板字符串用法,简单介绍了ES6模板字符串的概念、功能并结合实例形式分析了ES6模板字符串的用法,需要的朋友可以参考下
2017-04-04
JavaScript隐式类型转换代码实例
这篇文章主要介绍了JavaScript隐式类型转换代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
Bootstrap源码解读模态弹出框（11）
这篇文章主要源码解读了Bootstrap模态弹出框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
js给对象动态添加、设置、删除属性名与属性值实例代码
由于项目需要常常会遇到为某一个对象动态添加属性的情况,下面这篇文章主要给大家介绍了关于js给对象动态添加、设置、删除属性名与属性值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
使用js实现复制功能
这篇文章主要为大家详细介绍了使用js实现复制功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
javascript+html5+css3自定义弹出窗口效果
这篇文章主要为大家详细介绍了javascript+html5+css3自定义弹出窗口效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
利用Console来Debug的10个高级技巧汇总
通常，我们在编写一个新的JavaScript代码过程中经常会发生错误，可能是语法错误，可能是逻辑错误，如果没有一个调试工具帮助我们的话，相信你怕是头都要炸了。下面这篇文章主要给大家总结介绍了关于利用Console来Debug的10个高级技巧，需要的朋友可以参考下。
2018-03-03