Js实现滚动抽奖(作弊版)

最新推荐文章于 2024-05-11 17:08:08 发布

大雄Obear

最新推荐文章于 2024-05-11 17:08:08 发布

阅读量5.2k

点赞数 5

本文链接：https://blog.csdn.net/bigbear00007/article/details/102762044

版权

今天有一个朋友让帮忙做一个抽奖的小应用，需求比较特别，还要求可以作弊，无奈简单写了一个。
以下分享以下，不喜勿喷，如果有更好的建议，请勿吝赐教，感谢。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>滚动抽奖（作弊版）</title>
  <style>
    *{ box-sizing: border-box;}
    html,body{ width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 2%;}
    .counter{ width: 660px; padding: 60px 0; border: 2px solid #000; text-align: center; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
    .ranking{ font-size: 30px; height: 40px; line-height: 40px;}
    .text{ font-size: 90px; margin-top: 40px; margin-bottom: 40px;}
	.btns{ height: 40px;}
    .btn{ font-size: 16px; background-color: rgb(87, 85, 85); border-radius: 5px; width: 100px; height: 40px; line-height: 40px; color: #fff; cursor: pointer; margin: 0 auto; display: none; -webkit-user-select: none; user-select: none;}
    .startbtn{ display: block;}
    .btn.startbtn:hover{ background-color: rgb(10, 161, 10);}
    .btn.stopbtn:hover{ background-color: rgba(168, 9, 9,1);}
  </style>
</head>

<body>
  <div class="counter">
    <div class="ranking" id="ranking"></div>
	<div class="text" id="text">抽奖开始...</div>
	<div class="btns">
		<div class="btn startbtn" id="startbtn">开 始</div>
		<div class="btn stopbtn" id="stopbtn">暂 停</div>
	</div>
  </div>
  
  <script>
    var speed = 20; // 切换时间(单位：毫秒)
    var stopList = ["支付宝","腾讯","马云"]; // 需要停止的位置
    var list = ["赵毅","钱万","孙淼","李四","周瑜","吴天","腾讯","郑爽","王麻子","冯宇","陈皮","杵伟","卫岗","蒋健","沈佳","韩寒","杨宇天","朱玉","秦宇","许诸","贺天","支付宝","吕布","张飞","孔明","马云","方天","苗人凤","刘烨"]; // 列表

    var startTimer,stopTimer;
    var index = 0;
    var stopIndex = 0;
    var ranking = document.getElementById("ranking");
    var text = document.getElementById("text");
    var startBtn = document.getElementById("startbtn");
    var stopBtn = document.getElementById("stopbtn");

    EventListen = {
        addEvent: function (ele,fn,str) {
            if(ele.addEventListener){
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                ele["on"+str] = fn;
            }
        }
    }

    function couter(){
      	if(index < list.length - 1){
			text.innerText = list[index];
			index ++;
     	 } else{
        	index = 0;
      	}
    }

    function stopCount(){
		if(index < list.length - 1){
			index ++;
		} else{
			index = 0;
		}
		text.innerText = list[index];

		if(list[index] == stopList[stopIndex]){
			if(stopIndex < 3){
				stopIndex ++;
			}

			clearInterval(stopTimer);
		}
    }

    function start(){
		if(stopIndex == 0){
			ranking.innerText = '一等奖';
		} else if(stopIndex == 1){
			ranking.innerText = '二等奖';
		} else if(stopIndex == 2){
			ranking.innerText = '三等奖';
		} else{
			alert('抽奖完毕，请等待下次抽奖');
			return false;
		}

		startBtn.style.display = "none";
		stopBtn.style.display = "block";
		
		clearInterval(stopTimer);
		startTimer = setInterval('couter()', speed);
    }

    function pause(){
		startBtn.style.display = "block";
		stopBtn.style.display = "none";

		clearInterval(startTimer);
		stopTimer = setInterval('stopCount()', speed);
    }

    EventListen.addEvent(startBtn,start,'click');
    EventListen.addEvent(stopBtn,pause,'click');
  </script>
</body>
</html>