zoukankan      html  css  js  c++  java
  • JS实现抽奖

    九宫格随机抽奖功能实现:在选择的时候方格的轮转速度先慢后快再慢的效果

    代码如下:

     <div class="container">
            <div class="block1 block">小米笔记本</div>
            <div class="block2 block">iPhoneX</div>
            <div class="block3 block">PS4游戏机</div>
            <div class="block4 block">谢谢参与</div>
            <div class="block5 block">开始抽奖</div>
            <div class="block6 block">索尼电视机</div>
            <div class="block7 block">西门子冰箱</div>
            <div class="block8 block">老板抽油烟机</div>
            <div class="block9 block">空气净化机</div>
        </div>
    <style>
            .container {
                width: 600px;
                height: 600px;
                border: 1px solid;
                display: flex;
                flex-wrap: wrap;
                margin: 100px auto;
            }
    
            .block {
                width: 33.33%;
                height: 33.33%;
                outline: 1px solid black;
                text-align: center;
                line-height: 200px;
                font-size: 26px;
            }
    
            .block5 {
                background-color: skyblue;
                cursor: pointer;
            }
        </style>
    <script>
            let blocks = document.getElementsByClassName("block");
            // 数组存放的是盒子的下标,按照顺时针的顺序
            let arr = [0, 1, 2, 5, 8, 7, 6, 3], i = 0, count = 0, stopTimer;
            let rand = Math.floor(Math.random() * 8 + 50); // 给出一个停止计时器的随机数 count的值等于这个随机数时停止计时器
            let around = function () {
                // 将其他盒子都变为白色
                for (let j = 0; j < arr.length; j++) {
                    blocks[arr[j]].style.background = "white";
                }
                // 这里blocks的取值为 blocks[0] blocks[1] blocks[2] blocks[5] blocks[8] blocks[7] blocks[6] blocks[3]
                // 将当前arr[i]值所对应的盒子修改为粉色
                blocks[arr[i]].style.background = "pink";
                i++; 
                // 重制i的值
                if (i === arr.length) {
                    i = 0;
                }
                count++; // count是一个计数器 根据count的值来调整速度
                // 下面的4个if根据count的值来关闭计时器和重启计时器 改变计时器的时间间隔
                if (count === 5 || count === 45) {
                    clearInterval(stopTimer);
                    stopTimer = setInterval(around, 200);
                }
                if (count === 10 || count === 35) {
                    clearInterval(stopTimer);
                    stopTimer = setInterval(around, 100);
                }
                if (count === 15) {
                    clearInterval(stopTimer);
                    stopTimer = setInterval(around, 50);
                }
                // 当等于上面的随机数时,停止计时器
                if (count === rand) {
                    clearInterval(stopTimer);
                }
            }
            // 给开始按钮绑定点击事件 点击后执行 around 
            let start = function () {
                blocks[4].removeEventListener("click", start); // 当用户点击了开始按钮后 必须要移除该事件 防止用户重复点击
                stopTimer = setInterval(around, 300);
            }
            blocks[4].addEventListener("click", start);
        </script>

    实现图:

  • 相关阅读:
    利用avicap32.dll实现的实时视频传输
    异常错误:在可以调用 OLE 之前,必须将当前线程设置为单线程单元(STA)模式
    很不错的python 机器学习资源
    基于C#的机器学习--目录
    C#WinForm无边框窗体移动----模仿鼠标单击标题栏移动窗体位置
    C# WinForm窗体控件GroupBox修改边框颜色控件
    wireshark抓包新手使用教程
    Winform开发框架之权限管理系统功能介绍
    自定义控件开发的调试及DesignMode的状态处理
    Winform开发框架之权限管理系统改进的经验总结(4)--用户分级管理
  • 原文地址:https://www.cnblogs.com/CccK-html/p/11432740.html
Copyright © 2011-2022 走看看