单纯前端实现抽奖小游戏

2021-06-09 18:51:24 阅读：128 来源： 互联网

界面如下，大家可以自己copy一份试试哦！
具体操作：在本地新建一个.txt文档即可，然后copy下面代码。最后将文档后缀名改为.html，双击即可！！！

在这里插入图片描述 **可以通过更改45~53行div标签的文本内容来更改奖项！
**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style>
        .box{
            width: 606px;
            height: 606px;
            border: 1px solid #dfff4a;
            margin: 100px auto;
        }
        .option{
            width: 200px;
            height: 200px;
            border: 1px solid #dfff4a;
            background-color: green;
            font-size: 15px;
            color: white;
            text-align: center;
            line-height: 200px;
            float: left;
        }
        /*设置动画，以实现旋转
        第一个参数是变化的属性，all是整个盒子都进行动画；
        第二个参数0.5s是动画执行的时间;
        第三个参数是动画的方式：linear(匀速),ease-in由慢到快,ease-out由快到慢，ease-in-out慢到快到慢
        第四个参数是动画延时多久再执行
        */
        .box .five{
            transition: all 0.5s ease-in-out 0s;
        }
        .box .five:hover{
            cursor: pointer;
            font-size: 35px;
            color: #494aff;
            background-color: white;
            /*放大倍数，转换的角度*/
            transform: scale(1.2) rotate(360deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="option">python编程从入门到跑路</div>
    <div class="option">c编程从入门到跑路</div>
    <div class="option">java编程从入门到跑路</div>
    <div class="option">cpython编程从入门到跑路</div>
    <div class="option five">点击抽奖</div>
    <div class="option">go编程从入门到跑路</div>
    <div class="option">汇编从入门到跑路</div>
    <div class="option">php编程从入门到跑路</div>
    <div class="option">BASIC编程从入门到跑路</div>
</div>
<script>
    // 获取元素
    var options = document.getElementsByClassName("option");
    var button = document.getElementsByClassName("five")[0];
    // 所有奖项下标的值
    var arr = [0,1,2,5,8,7,6,3];
    // 数组的下标的初始值
    var num = 0;
    // 转动的次数
    var count = 0;
    button.addEventListener("click",function () {
        // 获取的随机数   转动的次数
        var time = Math.ceil(Math.random()*16+16);
        // 定时器来抽奖
        var timer = setInterval(function () {
            // 遍历arr数组      目的：如果不设置这个循环，那么一次走过的奖项都会变色，变不回原来的颜色
            for(var i=0;i<arr.length;i++){
                options[arr[i]].style.backgroundColor = "green";
            }
            // 走到的奖项
            options[arr[num]].style.backgroundColor = "red";
            num++;
            // 如果上面数组的下标值为8时，要重新赋值为0
            if(num == 8){
                num = 0;
            }
            // 走的div的个数
            count++;
            // 如果转动的次数与获取的随机数一致的情况下，清除定时器
            if(count==time){
                clearInterval(timer);
                // 转动的次数清零
                count = 0;
            }
        },100)
    })
</script>
</body>
</html>

标签：动画,抽奖,入门,color,前端,编程,小游戏,var,ease
来源： https://blog.51cto.com/u_15264787/2886755

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

单纯前端实现抽奖小游戏