JQuery点名表案例

<body>
<button>开始点名</button>
<table width="200px" border="1px" cellspacing="0"><tr><td> aaa</td><td> bbb</td><td> ccc</td></tr><tr><td> ddd</td><td> ggg</td><td> hhh</td></tr><tr><td> mmm</td><td> nnn</td><td> zzz</td></tr>
</table>
<script>let tds = document.getElementsByTagName("td"); // 找到所有的td方便操作let lastIndex  ; //记录上一次td背景的索引值let flag = false;// 记录按钮的切换状态let timeId; //专门用来定时的唯一标识//1.找到按钮给按钮绑定单击事件let btn = document.getElementsByTagName("button")[0].onclick = function () {flag =!flag;if(flag){//将按钮的内容改成"停止点名"document.getElementsByTagName("button")[0].innerHTML = "停止点名"//2.编写开始点名的逻辑, 开启定时器timeId = setInterval(function () {//3.Math , 找到所有td, 给指定的td的背景改了let index = Math.floor(Math.random() * (tds.length));if(lastIndex != undefined){//先将上一次背景改回去tds[lastIndex].style.background = "";}//将新的背景改成红色tds[index].style.background = "red";//新的索引将要变成老的索引lastIndex = index;}, 50);}else{//将按钮的内容改成"开始点名"document.getElementsByTagName("button")[0].innerHTML = "开始点名"clearInterval(timeId);}}</script>
</body>

JQuery点名表案例相关推荐

经典案例重点案例：点名表，JS正则验证全选、全不选、反选，点击可以实现三个功能，轮播图字符串截取以及替换，图片切换
重点案例: 点击开始点名,框内的名字转动点击结束点名,框内的转动停止,并出现一个随机的学生姓名 <!DOCTYPE html> <html> <head> ...
jQuery插件表单验证插件案例
目录 1.自定义插件: 2.第三方插件: 3.表单验证插件的案例: 一.自定义插件好,我们今天来看看在jQuery里面如何去自定义一个插件,以及后面Leaf用一个案例来带大家看看如何运用别人写好了的 ...
jQuery验证表单插件——jquery-validation
jQuery验证表单插件--jquery-validation The jQuery Validation Plugin provides drop-in validation for your ex ...
jQuery选择器经典案例
jQuery选择器经典案例具体讲解内容参照上一篇: 选择器详细讲解基本选择器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&qu ...
JavaScript -- jQuery网页开发案例笔记
视频地址:黑马程序员前端基础必备教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili 视频代码地址:JavaScript_jQuery测试案例: 本仓库是学习jQuery相关知识.视频网址: ...
实战课【1】jQuery实现表单校验及布局
实战课[1]jQuery实现表单校验及布局在学习完html,css,js,mysql,jdbc,Servlet,filter,ajax,maven等web基础知识后,开始进行项目实战.此文就会记录在 ...
整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
使用jQuery提交表单
我想使用jQuery提交表单. 有人可以提供代码,演示或示例链接吗? #1楼来自手册: jQuery Doc $("form:first").submit(); #2楼您将必须 ...
jQuery formValidator表单校验代码生成器ver1.0
发表感言很感谢一直在支持我的网友们,感谢你们对插件改进的建议.虽然最近坐的脖子和屁股痛,但是我还是用休息时间完成了这个代码生成器的开发,再次感谢支持我的网友们. 谈一下写代码生成器的目的 ...

JQuery点名表案例

JQuery点名表案例相关推荐

最新文章

热门文章