jquery實(shí)現(xiàn)擲骰子小游戲
本篇給大家分享一個(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>
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery插件jTimer(jquery定時(shí)器)使用方法
很多時(shí)候我們需要按時(shí)間間隔執(zhí)行一個(gè)任務(wù),當(dāng)滿足一定條件時(shí)停止執(zhí)行.此插件旨在解決這一經(jīng)常遇到的問題2013-12-12
jQuery獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法
獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法有很多,本教程為大家介紹下使用jquery獲取的具體實(shí)現(xiàn)2014-02-02
IE下支持文本框和密碼框placeholder效果的JQuery插件分享
這篇文章主要介紹了IE下支持文本框和密碼框placeholder效果的JQuery插件分享,本文給出插件源碼和使用示例,需要的朋友可以參考下2015-01-01
jQuery EasyUI datagrid在翻頁以后仍能記錄被選中行的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery EasyUI datagrid在翻頁以后仍能記錄被選中行的實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
jQuery使用toggleClass方法動(dòng)態(tài)添加刪除Class樣式的方法
這篇文章主要介紹了jQuery使用toggleClass方法動(dòng)態(tài)添加刪除Class樣式的方法,實(shí)例分析了jQuery中toggleClass方法操作class樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
Jquery 復(fù)選框取值兼容FF和IE8(測試有效)
Jquery 復(fù)選框取值的文章網(wǎng)上有很多的,不過可以同時(shí)兼容FF和IE8的確實(shí)沒有幾個(gè),下面有個(gè)不錯(cuò)的方法經(jīng)測試有效2013-10-10

