jquery实现掷骰子小游戏
更新时间：2019年10月24日 10:06:35 作者：xy8199
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
很多时候我们需要按时间间隔执行一个任务,当满足一定条件时停止执行.此插件旨在解决这一经常遇到的问题2013-12-12
这篇文章给大家介绍了jquery 图片轮播代码，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
本文会给你们展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助2011-09-09
获取当前对象标签名称的方法有很多，本教程为大家介绍下使用jquery获取的具体实现2014-02-02
IE下支持文本框和密码框placeholder效果的JQuery插件分享
这篇文章主要介绍了IE下支持文本框和密码框placeholder效果的JQuery插件分享,本文给出插件源码和使用示例,需要的朋友可以参考下2015-01-01
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
这篇文章主要介绍了jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
项目需要实现一个无刷新批量文件上传功能,仔细研究了下,发现JQuery 提供的Uploadify插件十分不错,有兴趣的可以了解一下。2017-01-01
jQuery使用toggleClass方法动态添加删除Class样式的方法
这篇文章主要介绍了jQuery使用toggleClass方法动态添加删除Class样式的方法,实例分析了jQuery中toggleClass方法操作class样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jquery.cookie.js用法,结合实例形式较为详细的分析了jquery.cookie.js针对cookie的获取、创建、设置、删除等常用技巧,需要的朋友可以参考下2015-12-12
Jquery 复选框取值的文章网上有很多的，不过可以同时兼容FF和IE8的确实没有几个，下面有个不错的方法经测试有效2013-10-10
最新评论