jQuery名字排列随机点名代码.zip资源-CSDN文库

共2个文件

js：1个

html：1个

网页特效

CSS特效

jQuery特效

153 浏览量 2023-11-02 23:00:46 上传评论收藏 34KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery名字排列随机点名代码.zip （2个子文件）

jiaoben6646

jquery.min.js 91KB

index.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery名字排列随机点名代码 - 【更多源码：www.96flw.com】</title> <script src="js/jquery.min.js"></script> <style type="text/css"> *{ margin:0; padding:0; } body{ background:black; } .box{ width:710px; height:600px; border: 1px solid white; margin:0 auto; position:relative; } .box div{ width:100px; height:40px; background:orangered; font-size:30px; line-height:40px; text-align:center; color:white; float:left; margin:20px; cursor:pointer; } p{ width:200px; height:80px; font-size:50px; line-height:80px; text-align:center; position:absolute; bottom:20px; left:50%; margin-left:-100px; color:white; background:blueviolet; cursor:pointer; } .choose{ background:white; color:blueviolet; } </style> </head> <body> <div class='box'> <div>谢国军</div> <div>赵聪明</div> <div>刘洋</div> <div>沙如超</div> <div>唐文鑫</div> <div>王青云</div> <div>李靖鹏</div> <div>杨佳宇</div> <div>钱昱康</div> <div>徐敬太</div> <div>夏启明</div> <div>田凯旋</div> <div>徐玮</div> <div>邓汉</div> <div>董也川</div> <div>夏正堃</div> <div>陈旭</div> <div>王昕睿</div> <div>王越</div> <div>陈胜勇</div> <div>沈天乐</div> <div>顾银贵</div> <div>潘镀</div> <div>许崇林</div> <p class="but">开始点名</p> </div> <script type="text/javascript"> $(function() { var j = 0; $(document).on('selectstart', function() { return false }) var timer, n = 0 $('.box p').on('click', function() { if (j == 0) { j = 1; $(".but").html("点名中"); timer = setInterval(function() { n++ $('.box div').each(function(k, v) { $('.box div').eq(k).css({ 'background': color(), 'color': color() }) }) console.log(n) if (n >= 20) { clearInterval(timer) j = 0; $(".but").html("开始点名"); n = 0 $('.box div').css({ 'background': 'orangered', 'color': 'white' }) $('.box div').eq(name()).css({ 'background': 'white', 'color': 'blueviolet' }) } }, 100) } }) /*随机索引号，需要改的就直接改数字，多少人就改成多少个*/ function name() { return Math.floor(Math.random() * 24) } /*随机的颜色封装函数*/ function color() { var r = Math.floor(Math.random() * 256) var g = Math.floor(Math.random() * 256) var b = Math.floor(Math.random() * 256) return 'rgb(' + r + ',' + g + ',' + b + ')' } }) </script> </body> </html>

评论收藏

内容反馈