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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
jquery获取table指定行和列的数据方法(当前选中行、列)
下面小编就为大家带来一篇jquery获取table指定行和列的数据方法(当前选中行、列)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
图片信息的浮动显示的效果，在网页应用中还是比较流行的，下面为大家详细介绍下使用jquery是如何实现的，喜欢的朋友可以参考下2013-08-08
jquery alert 弹出式 复选框，需要的朋友可以参考下，代码有点乱。2009-06-06
这篇文章主要介绍了jQuery实现Div拖动+键盘控制综合效果的方法,实例分析了jQuery操作div块拖动的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
jQuery的链式操作是如何实现的？为什么要用链式操作？接下来会帮助大家解决这两个问题，感兴趣的朋友可以了解下2013-01-01
这篇文章主要介绍了JQuery包裹DOM节点的方法,实例分析了wrap与wrapAll方法实现包裹DOM节点的技巧与相关注意事项,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了如何解决jQuery动态获取手机屏幕高和宽的问题,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了小巧强大的jquery layer弹窗弹层插件的使用方法以及使用范围，非常详细，有需要的小伙伴可以参考下。2015-12-12
这篇文章主要介绍了jQuery使用hide方法隐藏元素自身用法,实例分析了jQuery中hide方法的原理与使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的2D帕累托图效果,结合实例形式分析了jQuery使用FusionCharts插件载入xml数据及绘制2D帕累托图的具体实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
最新评论