jquery实现掷筛子小游戏

来源：互联网发布：苹果远程桌面windows 编辑：程序博客网时间：2024/06/11 20:46

本篇给大家分享一个很好玩的掷筛子游戏，当点击“掷筛子”按钮时张三和李四两人同时掷出筛子，在各自的文本框中会显示出各自掷出筛子的大小，并且会在第三个文本框中比较出两人点数的大小，并显示出获胜方，若两人点数一样，会显示平局。当点击“不玩了”按钮时，会清空所有文本框中的数据，回归初始。

效果图：

源码：

<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <title>掷骰子游戏</title>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <script type="text/javascript">        $(document).ready(function(){            $("button:eq(0)").click(function(){                var num1 = parseInt((Math.random() * 6))+1;                var num2 = parseInt((Math.random() * 6))+1;                $("input:eq(0)").val(num1);                $("input:eq(1)").val(num2);                    if(num1>num2){                        $("input:eq(2)").val("张三");                    }else if(num1<num2){                        $("input:eq(2)").val("李四");                    }else{                        $("input:eq(2)").val("平局");                    }            });            $("button:eq(1)").click(function(){                $("input:eq(0)").val("");                $("input:eq(1)").val("");                $("input:eq(2)").val("");            });        });    </script></head><body>    <div style="width: 500px;height:500px;margin: auto">        <div>张三的骰子<input type="text"></div><br>        <div>李四的骰子<input type="text"></div><br>        <div style="margin-left: 32px;">获胜者<input type="text" style="width: 100px"></div><br>        <button>掷筛子</button>        <button style="margin-left: 150px">不玩了</button>    </div></body></html>

阅读全文

0 0