<!doctype html> <title>点名器</title> <meta charset="utf-8"> <style> #box{ width:400px; height:200px; background:#ff6699; margin:100px auto auto auto; text-align:center; line-height:200px; font-size:40px; color:#fff; } #btn{ margin:10px auto; width:200px; height:50px; background:#66ff99; font-size:30px; text-align:center; line-height:50px; } </style> <div id="box">汤俊</div> <div id="btn">开始</div> <script> /* 1.点击按钮 box的文字发生变化 取数组中随机名字 setInterval 2.点击 停止 3.多次点击Bug问题 */ var box=document.getElementById('box'); var btn=document.getElementById('btn'); console.log(box); //声明姓名数组 var arr=['珍珍','苗苗','桂芝','畅晓','李新','晓新','张磊','碧娇','倩倩','苏苌','刘伟','潘闯','翡翠','元宝','宏天','皓宇','春芳']; console.log(arr); //声明布尔 var bool=true; //点击事件 btn.onclick=function(){ if(bool){ //重新赋值 false bool=false; timer=setInterval(function(){ //找 arr下标 随机数 var index=rand(0,arr.length-1); console.log(index); //box 赋值 box.innerHTML=arr[index]; },50); //开始文字重新赋值 this.innerHTML='暂停'; }else{ //重新赋值 bool=true; //清除定时器 clearInterval(timer); //开始文字重新赋值 this.innerHTML='开始'; } } // 0 17 function rand(m,n){ return Math.floor(Math.random()*(n-m+1)); } </script>
js教程
js随机点名效果
- js随机
-
javascript制作随机样式标签云方法
我的站长站分享一段超简单的javascript随机样式标签云方法,比网上那些长篇大论的简单好理解多了,一看就懂,效果如下。JS代码$(".tags a").each(function(){var x = 5;var y = 9;var rand = parseInt...
-
js随机点名效果
<!doctype html><title>点名器</title><meta charset="utf-8"><style> #box{ width:400px; height:200px; background:#ff6699; margin:100px auto auto auto; text-align:center; line-h...
-
js随机生成指定位数+数字+字母混合字符串
之前我的站长站分享过js随机生成的教程,但是那篇教程只能指定随机数的位数,但是不能自定义随机内容。[xxid]71,2770[/xxid]这篇教程可以指定随机的位数,还可以自定义随机的内容,比如:数字、字母、符号,或其他任何混合字符串,代码如下:function generateMixed...
-
js截取字符串教程
slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...
-
find findIndex indexOf索引选择器使用方法
find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...
-
js复制网页内容教程
Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...
-
js获取字符长度函数分享
js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...
-
网站LED跑马灯效果广告代码
网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...