抽奖小游戏——纯前端实现(纯小白也能看懂&CV直接拿走直接玩)

Posted 孤寒者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了抽奖小游戏——纯前端实现(纯小白也能看懂&CV直接拿走直接玩)相关的知识,希望对你有一定的参考价值。

抽奖

废话不多说,直接上代码:

(源码如下,大家可以自己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>

以上是关于抽奖小游戏——纯前端实现(纯小白也能看懂&CV直接拿走直接玩)的主要内容,如果未能解决你的问题,请参考以下文章

网页钟表设计——纯前端实现(纯小白也能看懂&CV直接拿走直接用&&源码分享)

实现满天星效果——纯前端实现(纯小白也能看懂&CV直接拿走直接用&&源码分享)

实现满天星效果——纯前端实现(纯小白也能看懂&CV直接拿走直接用&&源码分享)

实现输入属性&&属性值更改标签属性——纯前端实现(纯小白也能看懂&CV直接拿走直接用&&源码分享)

netty解码器详解(小白也能看懂!)

小白也能看懂的 DFS 算法本质详解