js实现未来某天的倒计时（拓展的知识点防止透明度继承父类）

最新推荐文章于 2022-07-21 18:20:02 发布

宝贝QY

最新推荐文章于 2022-07-21 18:20:02 发布

阅读量481

点赞数

分类专栏： js 文章标签： html css javascript 计时器程序

本文链接：https://blog.csdn.net/qq_36070288/article/details/78843565

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

有些朋友肯定想看看效果怎么样，复制下面代码浏览器运行即可

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		html,body,div{
			margin:0;
			padding:0;
		}
		html,body{
			height:100%;
			background:url(../img/bg.jpg) no-repeat 100% 100%;
		}
		.box{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			height: 200px;
			width: 200px;
			background:url(../img/baby.jpg) no-repeat;
			background-size: 100% 100%;
			border-radius: 100%;
			box-shadow:0 0 24px 0 rgba(0,0,0,0.5);
		}
		.con{
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			height: 200px;
			width: 200px;
			border-radius: 100%;
			background-color: rgba(255,255,255,0.8);
		}
		#timer{
			height:30px;
			line-height: 30px;
			text-align: center;
			font-size: 20px;
			color: green;
			opacity: 1;
			margin:85px 0;
			text-shadow: 0 0 5px #fefcc9, 5px -5px 15px #feec85, 10px -10px 25px #ffae34;
		}
	</style>

	<body>
		<div class="box">
			
		</div>
		<div class="con">
			<div id="timer"></div>
		</div>
		<script type="text/javascript">
			var timeFlag = 0
			function leftTimer(year, month, day, hour, minute, second) {
				var leftTime = (new Date(year, month - 1, day, hour, minute, second)) - (new Date()); //计算剩余的毫秒数 
				timeFlag = leftTime;
				var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数 
				var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时 
				var minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟 
				var seconds = parseInt(leftTime / 1000 % 60, 10); //计算剩余的秒数 
				days = checkTime(days);
				hours = checkTime(hours);
				minutes = checkTime(minutes);
				seconds = checkTime(seconds);
				if(leftTime>0){
					console.log(days + "天" + hours + "小时" + minutes + "分" + seconds + "秒")
					document.getElementById("timer").innerHTML = days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
				}
			}

			function checkTime(i) { //将0-9的数字前面加上0，例1变为01
				if(i < 10) {
					i = "0" + i;
				}
				return i;
			}
			leftTimer(2019,2,14,0,0,0);
			var timer = setInterval(function(){
				if(timeFlag>0){
					leftTimer(2019,2,14,0,0,0);
				}else{
					clearInterval(timer);
					document.getElementById("timer").innerHTML = '倒计时已结束！';
				}
			},1000)
		</script>
	</body>

</html>

效果图如下：

在这里插入图片描述

对于背景图不能改透明度的问题，解决方法代码中有体现：

1、给父层加背景图，然后在父层加同级元素，同级元素的宽高都和父层一样类似于盖在父层上，相当于遮罩，
2、改变遮罩的透明度，从而达到改变父层背景图的效果，又不影响字体透明度的设置，
3、字体这里实现了火焰字的效果，其实很简单，想了解的小伙伴可以查查text-shadow这个属性

js部分分析：

function leftTimer(year,month,day,hour,minute,second){ 
	 var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数 
	 var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数 
	 var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时 
	 var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟 
	 var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数 
	 days = checkTime(days); 
	 hours = checkTime(hours); 
	 minutes = checkTime(minutes); 
	 seconds = checkTime(seconds); 
	 setInterval(leftTimer(2019,2,14,0,0,0),1000); 
	 document.getElementById("timer").innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒"; 
} 
function checkTime(i){ //将0-9的数字前面加上0，例1变为01 
	 if(i<10){ 
		  i = "0" + i; 
	 } 
	 return i; 
} 
leftTimer(2019,2,14,0,0,0);