carry~MF通过本文主要向大家介绍了js实现倒计时效果,js实现跑马灯效果,js实现放大镜效果,js实现tab切换效果,js实现动画效果等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>caipiao</title>
</head>
<body>
<div id="wrap"></div>
<button id="goBtn">go</button>
<button id="stopBtn">stop</button>
<script type="text/javascript">
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);
}
</script>
</body>
</html>
</div>
随机抽选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>caipiao</title>
<style type="text/css">
* {
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;
}
</style>
</head>
<body>
<div id="wrap">
<div id="inner">
<span>01</span>
<span>02</span>
<span>03</span>
<span>04</span>
<span>05</span>
<span>06</span>
<span>07</span>
<span>08</span>
<span>09</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span>16</span>
<span>17</span>
<span>18</span>
<span>19</span>
<span>20</span>
<span>21</span>
<span>22</span>
<span>23</span>
<span>24</span>
<span>25</span>
<span>26</span>
<span>27</span>
<span>28</span>
<span>29</span>
<span>30</span>
<span>31</span>
<span>32</span>
<span>33</span>
</div>
<p>
<button id="selectBtn">机选红球</button>
<button id="clearBtn">清空</button>
</p>
</div>
<script type="text/javascript">
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 = "";
}
}
</script>
</body>
</html>
</div>
要实现点击得到自动随机数还得在clearBtn.onclick前面添加个定时器
var timer = 0;
selectBtn.onclick = function() {
clearTimeout(timer);
timer = setInterval(selectBall,100);
setTimeout(function() {
clearTimeout(timer);
},3000)
// clearTimeout(timer);
}
</div>
这样就实现了动态图的功能了(*^__^*) 嘻嘻！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
</div>