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