主页 / 网络编程 /

jquery实现掷骰子小游戏

网络编程 2021-07-04 15:01www.168986.cn编程入门
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：使用jQuery实现掷骰子游戏 下一篇：JS控制GIF图片的停止与显示

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by