jquery实现掷筛子小游戏

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

效果图:


源码:

<!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>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值