jquery模拟爆炸倒计时

最新推荐文章于 2023-08-15 14:32:00 发布

loyal98

最新推荐文章于 2023-08-15 14:32:00 发布

阅读量523

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/qq_39048609/article/details/77435859

版权

jq 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客介绍如何利用JavaScript库jQuery创建一个模拟爆炸的倒计时效果。通过JS代码片段，详细讲解了实现这一动态效果的关键步骤和技术要点。

摘要由CSDN通过智能技术生成

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>炸弹倒计时</title>
	<style type="text/css">
		.content {
			width: 200px;
			margin:0 auto;
		}
		.content .img1 {
			/*添加炸弹动画  第一值是动画名称 第二个值是动画的时间  第三个值时循环的次数，infinite为循环次数表示无限循环，用数值时则是循环次数*/
			animation: bounce 1s infinite;
		}
		.content .img2 {
			animation: magnify 1s 1;
		}
		.btn {
			font-size: 30px;
			margin-left: 650px;
		}
		/*让炸弹跳动*/
		@keyframes bounce{
			from{
				transform: scale(0.9); /*scale缩放*/
			}to{
				transform: scale(1.1);
			}
		}

		/*让火花图片从小到大放大*/
		@keyframes magnify{
			from{
				transform: scale(0);/*为0时不显示*/
			}to{
				transform: scale(1);
			}
		}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<input type="button" class="btn" value="倒计时开始了，准备好了吗" />
	<div class="content">
		<!-- 用于显示倒计时秒数 -->
		<p class="min"></p>
		<!-- 存放爆炸前图片 -->
		<img src="img/2007614223430291.png" class="img1" />
		<!-- 显示倒计时结束后的爆炸火花 -->
		<img src="img/9d74c66b4d77c5aa5f61649a1383a31c9d9362b7a13f-wKrhDv_fw658.jpg" class="img2" />
	</div>
</body>
</html>

js代码片段

$(function(){
	//让图片内容先隐藏
	$(".content").hide();

	//添加input点击事件
	$(".btn").click(function(){

		//设置一个值用来表示从多少秒开始倒计时
		var time=3;

		//setInterval(function(){},1000)方法可按照指定的周期（以毫秒计）来调用函数或计算表达式,也就是会根据你给的时间执行事件  1000是毫秒=1秒
	 	var set=setInterval(function(){
	 		//判断上面的time倒计时时间是否为0
	 		if(time>0){
	 			//不为0时每过一秒就减一秒
	 			$(".min").text(time-- +"(s)");
	 			//同时当倒计时不为0时，让content显示出来但火花图片隐藏
	 			$(".content").show();
	 			$(".content .img2").hide();
	 		}else{//否则当倒计时=0时，倒计时结束，将数字与炸弹隐藏，显示火花图片  .img1,p中 “,”是选择两个同级标签元素
	 			$(".content .img1,p").hide();
	 			$(".content .img2").show();
	 		}
	    }, 1000);

	})
})