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综合案例——打地鼠(教学版本·附源码)相关推荐

用Html5实现天气预报的原理,HTML5 Canvas和jQuery实时天气预报代码解析「附源码」...
HTML5 Canvas和jQuery实时天气预报代码解析「附源码」这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效.该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下 ...
【RuoYi框架】RuoYi框架学习超简单案例 - 新闻管理系统（附源码）
文章目录前言一.需求二.数据库设计 1.新闻菜单表(树表) 1.新闻内容表三.运行RuoYi项目 1.创建数据库,运行sql文件 2.启动运行RuoYi项目四.生成代码 1.添加字典(菜单显 ...
springboot大学生综合素质测评系统-计算机毕设附源码51615
springboot大学生综合素质测评系统摘要为全面提高教育管理水平,建立一个大学生综合素质测评管理系统已经成为目前各高校的共识.本文从实践经验出发,阐述目前高校学生工作管理的信息化现状﹔然后 ...
一款SpringBoot轻量级物联网综合业务支撑平台，附源码
SpringBoot轻量级物联网综合业务支撑平台源码开发语言 : JAVA 数据库 : MySQL 开发工具 : IDEA 源码类型:全开源免费分享,需要学习可私信. 一.系统概述: 物联网综合业务 ...
使用高德地图微信小程序SDK开发案例-输入提示（附源码）
闲来无事写一篇使用高德地图的微信小程序SDK开发应用的实例. 接下来先看需求: 我们要做的是,根据用户输入的关键词,给出相应的提示信息,列表中显示地方的名称,地方的详细地址以及对应的经纬度坐标. 当然 ...
【Unity 3D】3D游戏跑酷小子实战教学（附源码和步骤超详细）
需要源码和资源文件请点赞关注收藏后评论区留言私信~~~ 下面我们将实现一个3D游戏跑酷小子类似于之前大火的神庙逃亡效果展示和代码在文章末尾下面为实现步骤一.前期准备在项目开始前需要新建项 ...
Python+审计实务与案例分析库毕业设计-附源码211526
Python审计实务与案例分析库摘要 21世纪的今天,随着社会的不断发展与进步,人们对于信息科学化的认识,已由低层次向高层次发展,由原来的感性认识向理性认识提高,管理工作的重要性已逐渐被人们所认识 ...
Springboot+mysql+基于VUE框架的商城综合项目设计与实现毕业设计-附源码111612
基于VUE框架的商城综合项目设计与实现摘要随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...

jQuery综合案例——打地鼠(教学版本·附源码)

jQuery综合案例——打地鼠

使用指南：

jQuery综合案例——打地鼠(教学版本·附源码)相关推荐

最新文章

热门文章