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ブラウザには使用できない.