go
stop
var wrap = document.getElementById("wrap");
var goBtn = document.getElementById("goBtn");
var stopBtn = document.getElementById("stopBtn");
function rnd(min, max) {
return parseInt(Math.random()*(max - min + 1) + min);
}
function rndArray(min, max, length) {
//先定义一个空数组
var arr = [];
//生成一个长度为7的数组
while(arr.length < length) {
//生成一个随机数
var rand = rnd(min, max);
//判断生成的随机数rand是否在数组arr里,果然不在,就将这个随机数插入到数组里,如果在,执行下一次循环
if(arr.indexOf(rand) == -1) {
arr.push(rand);
}
}
arr.sort(function(a, b){return a - b;})
return arr;
}
//rndArray(最小范围值,最大范围值,个数)
wrap.innerHTML = rndArray(1,33,7);
var timer = 0;
goBtn.onclick = function() {
clearInterval(timer);
timer = setInterval(function() {
wrap.innerHTML = rndArray(1,33,7);
},100)
console.log(timer);
}
stopBtn.onclick = function() {
clearInterval(timer);
}
随机抽选
* {
margin:0;
padding: 0;
}
#wrap {
width:621px;
margin:0 auto;
padding:50px 0;
background-color:rgb(255, 242, 242);
}
#inner {
width:490px;
margin:0 auto;
overflow: hidden;
}
#inner span {
float: left;
width:30px;
height: 30px;
border-radius: 15px;
border:1px solid #d9d9d9;
line-height: 30px;
text-align: center;
color:#333;
background-color: #f8f8f8;
margin:18px 6px;
}
#inner span.active {
background-color: red;
color:#fff;
}
#wrap p {
text-align: center;
}
button {
border:none;
outline: none;
width:120px;
height: 40px;
line-height: 40px;
font-size: 20px;
border-radius: 4px;
}
#selectBtn {
background-color: red;
color:#fff;
}
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
机选红球
清空
var wrap = document.getElementById("wrap");
var selectBtn = document.getElementById("selectBtn");
var clearBtn = document.getElementById("clearBtn");
var ballList = document.getElementById("wrap").getElementsByTagName("span");
function rnd(min, max) {
return parseInt(Math.random()*(max - min + 1) + min);
}
function rndArray(min, max, length) {
//先定义一个空数组
var arr = [];
//生成一个长度为7的数组
while(arr.length < length) {
//生成一个随机数
var rand = rnd(min, max);
//判断生成的随机数rand是否在数组arr里,果然不在,就将这个随机数插入到数组里,如果在,执行下一次循环
if(arr.indexOf(rand) == -1) {
arr.push(rand);
}
}
arr.sort(function(a, b){return a - b;})
return arr;
}
selectBtn.onclick = function() {
for(var j = 0; j < ballList.length; j++) {
ballList[j].className = "";
}
var arr = rndArray(1,33,7);
console.log(arr);
for(var i = 0; i < arr.length; i++) {
ballList[arr[i]-1].className = "active";
}
}
clearBtn.onclick = function() {
for(var j = 0; j < ballList.length; j++) {
ballList[j].className = "";
}
}
要实现点击得到自动随机数还得在clearBtn.onclick前面添加个定时器
var timer = 0;
selectBtn.onclick = function() {
clearTimeout(timer);
timer = setInterval(selectBall,100);
setTimeout(function() {
clearTimeout(timer);
},3000)
// clearTimeout(timer);
}
这样就实现了动态图的功能了(*^__^*) 嘻嘻!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!