正经的老虎机案例（javascript）

最新推荐文章于 2024-04-22 21:06:14 发布

萌猩

最新推荐文章于 2024-04-22 21:06:14 发布

阅读量1.6k

点赞数 1

文章标签：定位 css html js javascript

本文链接：https://blog.csdn.net/qq_44894916/article/details/112798112

版权

正经的老虎机案例（javascript）

小时候的回忆————游戏机，老虎机应该是大家最熟悉不过的一个游戏吧！那么今天呢，我们就来学习一下如何通过js去制作一个简单版老虎机吧！

原理

用到了定位的知识，达到布局效果。
使用循环计时器 setInterval()
通过调用函数，使点击相应按钮做相应的事
在函数内，通过if判断当前模块对应的编号是单数还是双数，通过设置边框值来达到旋转效果。

详细代码：

<head>
    <meta charset="UTF-8">
    <title>老虎机</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        #in{
            position:absolute;
            left: 108px;
            background: #78ffbe;
            width: 300px;
            height: 300px;
            border: 1px #000000 solid;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="out">
    <div>
        <div id="d0" style="position: absolute;background: #ff6f13">0</div>
        <div id="d1" style="position: absolute;left: 108px; background: #4fff1d">1</div>
        <div id="d2" style="position: absolute;left: 208px; background: #ec63ff">2</div>
        <div id="d3" style="position: absolute;left: 308px; background: #81f0ff">3</div>
        <div id="d4" style="position: absolute;left: 408px; background: #ff720c">4</div>
    </div>
    <div>
        <div id="d15" style="position: absolute; background: #a88fff">15</div>
        <div style="position: absolute; left: 108px"></div>
        <div id = "in"></div>
        <div id="d5" style="position: absolute;left: 408px; background: #f3e3ff">5</div>

    </div>
    <div>
        <div id="d14" style="position: absolute;background: #ff3e91">14</div>
        <div id="d6" style="position: absolute;left: 408px; background: #bef9fd">6</div>
    </div>
    <div>
        <div id="d13" style="position: absolute;background: #ee3dff">13</div>
        <div id="d7" style="position: absolute;left: 408px; background: #ff8635">7</div>
    </div>
    <div>
        <div id="d12" style="position: absolute;background: #ff6f13">12</div>
        <div id="d11" style="position: absolute;left: 108px; background: #4fff1d">11</div>
        <div id="d10" style="position: absolute;left: 208px; background: #ec63ff">10</div>
        <div id="d9" style="position: absolute;left: 308px; background: #81f0ff">9</div>
        <div id="d8" style="position: absolute;left: 408px; background: #57ff17">8</div>
    </div>
    <br/><br/>
    <div style="position: fixed; left: 212px">
        <input id="button1" type="button" value="开始" onclick="start1()"/>
        <input id="button2" type="button" value="停止" onclick="close1()"/>
    </div>
</div>
</body>
<script>
    let n = 0;
    function f1() {
        //获取标签
        // d1：当前   d2：上一个
        let d1 = document.getElementById("d"+n);
        let d2 = document.getElementById("d"+(n-1));
        if (n%2 == 0){   //双
            d1.style.border="10px white solid";
            d1.style.boxSizing="border-box"
            if (n>0){
                d2.style.border="none";
            }
            if (n == 0){
                document.getElementById("d15").style.border="none";
            }
        }else {    //单
            d1.style.border="10px white solid";
            d1.style.boxSizing="border-box"
            d2.style.border="none";
        }
        n++;
        if (n == 16){
            n = 0;
        }
    }
    function start1() {
        //设置定时器
        win = setInterval(f1,100)
    }
    function close1() {
        clearInterval(win);
    }

</script>

效果图
在这里插入图片描述

萌猩

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
正经的老虎机案例（javascript）

正经的老虎机案例（javascript）小时候的回忆————游戏机，老虎机应该是大家最熟悉不过的一个游戏吧！那么今天呢，我们就来学习一下如何通过js去制作一个简单版老虎机吧！原理用到了定位的知识，达到布局效果。使用循环计时器 setInterval()通过调用函数，使点击相应按钮做相应的事在函数内，通过if判断当前模块对应的编号是单数还是双数，通过设置边框值来达到旋转效果。详细代码：<head> <meta charset="UTF-8">
复制链接

扫一扫