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实现瀑布流页面
Apr 11 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
学生会干部自荐信
2014/02/04 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
房屋授权委托书范本
2014/10/07 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
计划生育目标责任书
2015/05/09 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
python turtle绘图
2022/05/04 Python
HttpClient实现文件上传功能
2022/08/14 Java/Android