jquery实现掷骰子小游戏


Posted in jQuery onOctober 24, 2019

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

效果图:

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
jQuery实现轮播图源码
Oct 23 #jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 #jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 #jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
You might like
php实现图片等比例缩放代码
2015/07/23 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
员工保密承诺书
2014/05/28 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
个人总结与自我评价
2014/09/18 职场文书
2014年保管员工作总结
2014/11/18 职场文书
信用卡催款律师函
2015/05/27 职场文书
党员转正介绍人意见
2015/06/03 职场文书
科技馆观后感
2015/06/08 职场文书
团委副书记工作总结
2015/08/14 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers