目录

一、表格表单的随机选择

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

1.H5的布局

第一步:

第二步:

2.CSS布局

3.JS的布局

第一步:

第二步:

第三步:

二、简单的随机点名

效果展示(可以自己修改内容)

1.H5布局

2.CSS布局

3.JS布局

第一步:

第二步:

三、可以自己暂停的随机点名


一、表格表单的随机选择

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

1.H5的布局

第一步:

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

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

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

Lorem.Ipsa.Minus.Veritatis.Doloribus.
Sunt.Corrupti" />第二步:

定义两个按钮,在js中设置点击事件,来完成所有的操作

2.CSS布局

需要给整个表格之间的外边距去除, border-collapse: collapse;使用这个,hover是为了后续实现排他思想,所进行的布局,可用用div大盒子来将表格居中,更有观赏性。

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

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,设置一个按钮

 
" />

2.CSS布局

设置一下大小,居中

.a{width: 200px;font-size: 50px;margin: auto;text-align: center;}.b{text-align: center;}

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)

Copyright © maxssl.com 版权所有 浙ICP备2022011180号