JS实现联欢会抽奖滚动数字效果

联欢会活动需要进行随机抽奖
其中重要的一步是需要数字随机变化然后从中抽取不相同的几个数字。
直接上代码,其中生成随机数字的方式参考: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浏览器。

你可能感兴趣的:(javascript,前端)