jquery實(shí)現(xiàn)擲骰子小游戲
更新時(shí)間：2019年10月24日 10:06:35 作者：xy8199
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)擲骰子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本篇給大家分享一個(gè)很好玩的擲骰子游戲，當(dāng)點(diǎn)擊“擲篩子”按鈕時(shí)張三和李四兩人同時(shí)擲出篩子，在各自的文本框中會(huì)顯示出各自擲出篩子的大小，并且會(huì)在第三個(gè)文本框中比較出兩人點(diǎn)數(shù)的大小，并顯示出獲勝方，若兩人點(diǎn)數(shù)一樣，會(huì)顯示平局。當(dāng)點(diǎn)擊“不玩了”按鈕時(shí)，會(huì)清空所有文本框中的數(shù)據(jù)，回歸初始。
效果圖：
源碼：
<!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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jquery獲取table指定行和列的數(shù)據(jù)方法(當(dāng)前選中行、列)
下面小編就為大家?guī)硪黄猨query獲取table指定行和列的數(shù)據(jù)方法(當(dāng)前選中行、列)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
圖片信息的浮動(dòng)顯示的效果，在網(wǎng)頁應(yīng)用中還是比較流行的，下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，喜歡的朋友可以參考下2013-08-08
jquery.alert 彈出式復(fù)選框?qū)崿F(xiàn)代碼
jquery alert 彈出式 復(fù)選框，需要的朋友可以參考下，代碼有點(diǎn)亂。2009-06-06
jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Div拖動(dòng)+鍵盤控制綜合效果的方法,實(shí)例分析了jQuery操作div塊拖動(dòng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JQuery包裹DOM節(jié)點(diǎn)的方法,實(shí)例分析了wrap與wrapAll方法實(shí)現(xiàn)包裹DOM節(jié)點(diǎn)的技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2015-06-06 
解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問題
這篇文章主要介紹了如何解決jQuery動(dòng)態(tài)獲取手機(jī)屏幕高和寬的問題,需要的朋友可以參考下
2014-05-05 
小巧強(qiáng)大的jquery layer彈窗彈層插件
這篇文章主要介紹了小巧強(qiáng)大的jquery layer彈窗彈層插件的使用方法以及使用范圍，非常詳細(xì)，有需要的小伙伴可以參考下。
2015-12-12 
這篇文章主要介紹了jQuery使用hide方法隱藏元素自身用法,實(shí)例分析了jQuery中hide方法的原理與使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03 
jQuery插件FusionCharts繪制的2D帕累托圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的2D帕累托圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件載入xml數(shù)據(jù)及繪制2D帕累托圖的具體實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03