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浏览器。

JS实现联欢会抽奖滚动数字效果相关推荐

php公告滚动源码,10行js代码实现上下滚动公告效果方法
本文主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧.希望能帮助到大家 ...
Android RecyclerView实现类似于老虎机抽奖，数字滚动等动画效果
1.RecyclerViewLoopScrollAnimation项目介绍 RecyclerViewLoopScrollAnimation 适用于Android RecyclerView的循环滚动动画 ...
js实现抽奖滚动效果
目录一.效果展示二.代码说话三.总结经验一.效果展示本文介绍js实现抽奖滚动效果的实现过程.具体效果如下图: 二.代码说话话不多说,上代码最实在. 1.scroll.js var Scro ...
html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果（通俗易懂附完整代码）...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...
js滚动数字动画效果
代码复制,直接调用就好了. 需注意!由于js不能精确到小数点后的0,(9.90)在JS中为9.9,所以不能用在有小数点的场景下,只能用在整数的情况下 /*** 滚动数字* @param {*DOM} ...
微信html抽奖转盘代码,使用CSS3+jquery.js 实现微信抽奖转盘效果
最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 "CSS3"! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖jquery的动画效果插件, ...
纵向抽奖滚动效果代码
网上参考了一篇文章是横向滚动,现在实现了一篇纵向滚动的抽奖 // HomePage.js function HomePage() {let s = null;useEffect(() => {s ...
html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
qt同时两个动画执行_Qt实现数字滚动动画效果
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html Qt实现数字滚动动画效果 3. ...
8：Math.atan2、PathMeasure、点赞飘心效果、点赞数字滚动+1效果、集成支付
1.Math.atan()与Math.atan2()的区别 angle = Math.atan(slope) 复制代码 slope斜率值为y/x,返回值angle为一个角度的弧度制,因为角度的周期性, ...

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

JS实现联欢会抽奖滚动数字效果相关推荐

最新文章

热门文章