jquery實現(xiàn)擲骰子小游戲
更新時間：2019年10月24日 10:06:35 作者：xy8199
這篇文章主要為大家詳細介紹了jquery實現(xiàn)擲骰子小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本篇給大家分享一個很好玩的擲骰子游戲，當點擊“擲篩子”按鈕時張三和李四兩人同時擲出篩子，在各自的文本框中會顯示出各自擲出篩子的大小，并且會在第三個文本框中比較出兩人點數(shù)的大小，并顯示出獲勝方，若兩人點數(shù)一樣，會顯示平局。當點擊“不玩了”按鈕時，會清空所有文本框中的數(shù)據，回歸初始。
效果圖：
源碼：
<!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指定行和列的數(shù)據方法(當前選中行、列)
下面小編就為大家?guī)硪黄猨query獲取table指定行和列的數(shù)據方法(當前選中行、列)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
圖片信息的浮動顯示的效果，在網頁應用中還是比較流行的，下面為大家詳細介紹下使用jquery是如何實現(xiàn)的，喜歡的朋友可以參考下2013-08-08
jquery alert 彈出式 復選框，需要的朋友可以參考下，代碼有點亂。2009-06-06
jQuery實現(xiàn)Div拖動+鍵盤控制綜合效果的方法
這篇文章主要介紹了jQuery實現(xiàn)Div拖動+鍵盤控制綜合效果的方法,實例分析了jQuery操作div塊拖動的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery鏈式操作如何實現(xiàn)以及為什么要用鏈式操作
jQuery的鏈式操作是如何實現(xiàn)的？為什么要用鏈式操作？接下來會幫助大家解決這兩個問題，感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了JQuery包裹DOM節(jié)點的方法,實例分析了wrap與wrapAll方法實現(xiàn)包裹DOM節(jié)點的技巧與相關注意事項,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了如何解決jQuery動態(tài)獲取手機屏幕高和寬的問題,需要的朋友可以參考下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數(shù)據及繪制2D帕累托圖的具體實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03