JSは交歓会を実現して抽選で数字の効果を転がします.
22507 ワード
交歓会活動にはランダム抽選が必要です.その中で重要なステップは数字をランダムに変化させて、その中から異なる数字を抽出することです.直接コードします.乱数を生成する方法を参照してください.https://www.cnblogs.com/pangys/p/5612437.html 直接コード
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div id="alert"></div>
<div id="show1">0</div>
<div id="show2">0</div>
<div id="show3">0</div>
<div id="show4">0</div>
<div id="show5">0</div>
<div>
<button id="start" >start</button>
<button id="stop" >stop</button>
</div>
<script type="text/javascript">
window.onload = function(){
var divVal1 = document.getElementById("show1");
var divVal2 = document.getElementById("show2");
var divVal3 = document.getElementById("show3");
var divVal4 = document.getElementById("show4");
var divVal5 = document.getElementById("show5");
var testArray = [];
for (var i=0; i< 100;i++){
testArray.push(i);
}
var j=0, h = testArray.length;
var interV;
var result;
sessionStorage.setItem("status", 0);
$("#start").click(function(){
var status = sessionStorage.getItem("status");
if(status == 0){
sessionStorage.setItem("status", 1);
interV = setInterval(function(){
//if(j >= h){
// j=0;
//}else{
var numchg = getArrayItems(testArray,5);
divVal1.innerHTML = numchg[0];
divVal2.innerHTML = numchg[1];//getArrayItems(testArray,1);
divVal3.innerHTML = numchg[2];//getArrayItems(testArray,1);
divVal4.innerHTML = numchg[3];//getArrayItems(testArray,1);
divVal5.innerHTML = numchg[4];//getArrayItems(testArray,1);
//j+=1;
//}
}, 50);
$("#alert").html(" ");
}else{
$("#alert").html(" , stop")
//alert(" , stop");
//return false;
}
});
$("#stop").click(function(){
var status = sessionStorage.getItem("status");
if (status == 1) {
sessionStorage.setItem("status", 0);
result = getArrayItems(testArray,5);
console.log(result);
window.clearInterval(interV);
divVal1.innerHTML = result[0];
divVal2.innerHTML = result[1];
divVal3.innerHTML = result[2];
divVal4.innerHTML = result[3];
divVal5.innerHTML = result[4];
$("#alert").html(" ");
}else{
$("#alert").html(" , start");
//alert(" , start");
//return false;
}
});
}
//
function getArrayItems(arr, num) {
var temp_array = new Array();
for (var index in arr) {
temp_array.push(arr[index]);
}
var return_array = new Array();
for (var i = 0; i<num; i++) {
if (temp_array.length>0) {
var arrIndex = Math.floor(Math.random()*temp_array.length);
return_array[i] = temp_array[arrIndex];
temp_array.splice(arrIndex, 1);
} else {
break;
}
}
return return_array;
}
</script>
</body>
</html>
本人は初稿の時に原生とjqueryを使って、更に最適化します.そして、現在の方法はIE及びEDGEブラウザには使用できない.