jQuery综合案例——打地鼠(教学版本·附源码)
生活随笔
收集整理的這篇文章主要介紹了
jQuery综合案例——打地鼠(教学版本·附源码)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery綜合案例——打地鼠
非常經典的案例，完整的訓練【jQuery】并且針對【setInterval】與【setTimeout】有一個實質性的訓練，學習價值超高，建議教師與學生下載，并用于教學與學習過程當中。
下載地址：【jQuery案例_打地鼠_可用于教學(源碼,帶音樂與圖片).rar-HTML5文檔類資源-CSDN下載】
目錄
jQuery綜合案例——打地鼠
使用指南：
使用指南：
如果沒有圖片，保存圖片改名即可。
圖片：【00.jpg】
<td><img src="res/00.jpg" onclick="killIt(this)" /></td>圖片：【01.jpg】
function show_mouse() {//生成0-24var i = Math.floor(Math.random() * 25);$("#tab img")[i].src = "./res/01.jpg";//這里使用setTimeoutsetTimeout("hide_mouse_fun(" + i + ")", stopTime); }圖片：【02.jpg】
function killIt(o) {var name = o.src.substr(o.src.length - 6, 2);if (name == "01") {o.src = "./res/02.jpg";sum += 100;$("#sum").text(sum);} }圖片：【bg.jpg】
body {overflow: hidden;background-image: url("./res/bg.png");width: 100%;height: 100vh;background-size: 80%;background-repeat: no-repeat;background-position: 50%; }背景音樂自己改成本地就行：【bgsound.MP3】
<script>var mp3 = new Audio("./res/bgsound.MP3");mp3.addEventListener("ended", function() {mp3.play();});mp3.play(); </script>整體效果圖：
代碼正文：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>打地鼠</title><script src="https://code.jquery.com/jquery-3.4.0.min.js"></script><script>var mp3 = new Audio("./res/bgsound.MP31");mp3.addEventListener("ended", function() {mp3.play();});mp3.play();</script><style>body {overflow: hidden;background-image: url("./res/bg.png");width: 100%;height: 100vh;background-size: 80%;background-repeat: no-repeat;background-position: 50%;}td img {width: 60px;height: 60px;}#tab {position: relative;top: 40%;left: 30%;}#tabInfo {position: relative;top: 5%;left: 60%;}.info {text-align: center;width: 60px;}</style> </head><body><table id="tabInfo"><tr><td>倒計時:</td><td><input type="text" id="times" value="60" class="info" />s</td></tr><tr><td>出現時間</td><td><input type="text" id="changeTime" value="1" class="info">s</td></tr><tr><td>停留時間</td><td><input type="text" id="stopTime" value="1" class="info">s</td></tr><tr><td>得分</td><td><span id="sum">0分</span></td></tr><tr><td><button onclick="startGame()">開始游戲</button></td><td><button onclick="stopGame()">停止游戲</button></td></tr></table><table cellpadding="0" cellspacing="5" id="tab"><tr><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td></tr><tr><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td></tr><tr><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td></tr><tr><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td></tr><tr><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td><td><img src="res/00.jpg" onclick="killIt(this)" /></td></tr></table><script>//全局變量var times = 60;//間隔時間var changeTime = 0;//停留時間var stopTime = 0;//累計分數var sum = 0;//停止游戲var voerGame;//顯示地鼠var clear_show_mouse;function init() {changeTime = $("#changeTime").val() * 1000;stopTime = $("#stopTime").val() * 1000;times = $("#times").val();sum = 0;$("#sum").text(sum);}function startGame() {init();$("#changeTime").attr("disabled", "false");$("#stopTime").attr("disabled", "false");$("#times").attr("disabled", "false");voerGame = setInterval("calcTime()", 1000);clear_show_mouse = setInterval("show_mouse()", changeTime);}function calcTime() {times -= 1;$("#times").val(times);if (times <= 0) {stopGame();}}function stopGame() {clearInterval(voerGame);clearInterval(clear_show_mouse);times = 60;$("#times").val(times);$("#changeTime").removeAttr("disabled");$("#stopTime").removeAttr("disabled");$("#times").removeAttr("disabled");for (i = 0; i < 25; i++) {$("#tab img")[i].src = "./res/00.jpg"}}function show_mouse() {//生成0-24var i = Math.floor(Math.random() * 25);$("#tab img")[i].src = "./res/01.jpg";//這里使用setTimeoutsetTimeout("hide_mouse_fun(" + i + ")", stopTime);}function hide_mouse_fun(i) {$("#tab img")[i].src = "./res/00.jpg";}function killIt(o) {var name = o.src.substr(o.src.length - 6, 2);if (name == "01") {sum += 100;$("#sum").text(sum);}}</script> </body></html>總結
以上是生活随笔為你收集整理的jQuery综合案例——打地鼠(教学版本·附源码)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java多线程精讲(非高并发-授课专用)
- 下一篇： 我的Go+语言初体验——10秒真男人游戏