用JS制作的简易老虎机

飓风不v

已于 2023-03-07 21:22:03 修改

阅读量638

点赞数 2

文章标签： javascript Powered by 金山文档

于 2023-03-07 20:56:00 首次发布

本文链接：https://blog.csdn.net/qq_53972872/article/details/129391465

版权

用button和function 进行互动所实现的简易老虎机

老虎机图片属性需要自行设置通过更改img图片属性进行更改。（建议：将所需图片按序号进行重命名，方便随机数的取数）

【实现原理】通过一个Math.random( )进行数据取数，利用数字的变动做到对图片的名称进行更改，从而实现图片的变换。

Math.random( )*n 是一个随机取数的一个方法取的是范围为0 --- (n-1)中的所有数。

parseInt( ),将类型转为整数类型。 parseInt( Math.random( )*n )即为 0 --- (n-1) 这个范围里的所有整数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 图片属性 */
            img {
                width: 200px;
                height: 200px;
            }

            /* 按钮属性 */
            button {
                width: 200px;
                height: 50px;
                display: block;
                margin: 0 auto;
            }

            /* 小块div盒子 */
            .div1 {
                width: 200px;
                height: 200px;
                border: 1px solid orange;
                float: left;
            }

            /* 大块div盒子 */
            .aaa {
                width: 606px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <!-- 老虎机样式代码  -->
        <div class="aaa">
            <div class="div1"><img src="img/新建文件夹/d1.jpg" id="a2"></div>
            <div class="div1"><img src="img/新建文件夹/d1.jpg" id="a3"></div>
            <div class="div1"><img src="img/新建文件夹/d1.jpg" id="a4"></div>
            <button onclick="run()">开始</button>
        </div>
        <script>
            /* 老虎机动态指令 */
            var c = 0;
            function run() {
                var i2 = parseInt(Math.random() * 10 + 1);
                var i3 = parseInt(Math.random() * 10 + 1);
                var i4 = parseInt(Math.random() * 10 + 1);
                a2.src = "img/新建文件夹/d" + i2 + ".jpg";
                a3.src = "img/新建文件夹/d" + i3 + ".jpg";
                a4.src = "img/新建文件夹/d" + i4 + ".jpg";
                if (i2 == i3 && i3 == i4) {
                    alert("恭喜你获得头奖，微信支付大奖包邮到家！！！");
                }
            }
        </script>
    </body>
</html>