溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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>
隨機抽選
<!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>
要實現點擊得到自動隨機數還得在clearBtn.onclick前面添加個定時器
var timer = 0;
selectBtn.onclick = function() {
clearTimeout(timer);
timer = setInterval(selectBall,100);
setTimeout(function() {
clearTimeout(timer);
},3000)
// clearTimeout(timer);
}
這樣就實現了動態圖的功能了(*^__^*) 嘻嘻！
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
