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

目录
  • 一、表格表单的随机选择
    • 1.H5的布局
    • 2.CSS布局
    • 3.JS的布局
  • 二、简单的随机点名
    • 1.H5布局
    • 2.CSS布局
    • 3.JS布局
  • 三、可以自己暂停的随机点名

一、表格表单的随机选择

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

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随机点名内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-08-06

js实现随机点名程序

最近用到了一下随机点名程序,就自己整理一下.代码实现后的截图如下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ

JS实现课堂随机点名和顺序点名

1. 效果: 2. Html代码: <body> <form> <div align="center"> <input type="button" value="开始点名" onclick="students()" class="ks"/> <input type="button" value="停止点名" onc

js实现随机点名小功能

本文实例为大家分享了js实现随机点名功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="name1"></div> <button id="btn"

使用javascript做的一个随机点名程序

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

JS实现随机点名器

本文实例为大家分享了JS实现随机点名器的具体代码,供大家参考,具体内容如下 实现一个简单的随机点名器 需求分析: 两个按钮实现随机点名的开始和结束 创建ul元素,添加到父级div中,实现了每个名字需要放在一个单独的盒子中 根据随机数进行随机选择,(涉及到了两个函数 setInterval clearInterval)在选择之前,先清空盒子的所有类样式,如果被选中,则重新赋予类样式 当点击停止按钮时,根据上一步拥有重新选择出来的li标签获取标签内容,并且直接可以展示到对应的文本框. 下面开始实现

JS+CSS实现随机点名(实例代码)

HTML代码结构 <body> <div id="box">随机点名</div> <span id="span">开始</span> </body> CSS代码结构 <style> #box { width: 30%; height: 200px; background-color: rgb(233, 248, 214); border: 1px solid rgb(130, 216

javascript实现的一个随机点名功能

这个其实是对JS随机数的一个练习方式,先把所有人得名字预先写好在一个数组里,然后让数组里的值快速的显示在区域内,当你按停的时候滚动就会停止达到随机效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS写的随机点名 - 琼台博客</title> <script type="text/javascript">

python写一个随机点名软件的实例

最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix Wang from tkinter import * import tkinter.font as tkFont import random import gc import os, sys import chardet import copy from threading import Thre

原生js实现随机点名功能

本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下 原生js实现随机点名,js部分有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"

基于JS实现一个随机生成验证码功能

效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所用的字符放在一个字符串中 2)在这个字符串的字符个数以内,随机生成索引号 3)根据索引号查找对应字符,拼接成验证码的字符串 代码实现 HTML: <div id="code"></div> CSS: * { margin: 0; padding: 0; } div

javascript网页随机点名实现过程解析

主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>随机点名</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1

python用tkinter实现一个简易能进行随机点名的界面

今天学到Python 有一个名为 random 的内置模块,可用于生成随机数, 这个好玩~可以用来做为上课随机点名的程序了哈哈.. def main_cor(): import random i = random.randrange(0,29) with open('roll_call.txt', encoding='utf-8') as file_obj: contents = file_obj.read() stuff = contents.split(' ') s = stuff[i] s

JavaScript数组随机排列实现随机洗牌功能

本文实例讲述了JavaScript数组随机排列实现随机洗牌功能的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以对数组内的元素进行随机排列,这个非常有用,比如我们在玩扑克牌的时候可以让扑克牌进行排列,也就是电脑洗牌. var list = [1,2,3,4,5,6,7,8,9]; list = list.sort(function() Math.random() - 0.5); Print(list); // prints something like: 4,3,1,2,9,5,6,

JavaScript实现随机点名程序

本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下 效果: 录制的gif效果图没那么理想,其实速度是比这个快的 思路: 1.定义一个数组,存放名单 2.启动定时器,设定间隔时间不断调用函数 3.Math.random()获取随机下标,根据下标的随机变换取出数组中对应的元素 4.逻辑代码完成后,通过DOM对象把变化的结果呈现在页面上 JS代码: <script> var arr = ["唐僧", "孙悟空", "猪八戒&