简单的倒计时

Aiolei

已于 2022-03-25 16:26:37 修改

阅读量634

点赞数

分类专栏：工具文章标签： js

于 2022-03-25 16:25:18 首次发布

本文链接：https://blog.csdn.net/weixin_44607113/article/details/123738913

版权

工具专栏收录该内容

7 篇文章 2 订阅

订阅专栏

一、基础知识

首先，我们需要掌握一些关于 js 的基本知识

1. JavaScript Date 对象

Date 对象用于处理日期与时间，创建 Date 对象：new Date( )。

方法	描述
getDate( )	返回一个月中的某一天 (1 ~ 31)
getDay( )	返回一周中的某一天 (0 ~ 6)
getFullYear( )	以四位数字返回年份
getMonth( )	返回月份 (0 ~ 11)
getHours( )	返回小时 (0 ~ 23)
getMinutes( )	返回分钟 (0 ~ 59)
getSeconds( )	返回秒数 (0 ~ 59)
getTime( )	返回 1970 年 1 月 1 日至今的毫秒数

2. setTimeout() 函数

该方法用于在指定的毫秒数后调用函数或计算表达式。
语法： (提示：1000ms = 1s)
setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript函数, 等待的毫秒数)

3. setInterval() 函数

可按照指定的周期（以毫秒计）来调用函数或计算表达式。
js 中的 setInterval() 每隔指定的时间就执行对应的函数
setInterval() 函数的语法如下：

setInterval(code, milliseconds[, args...])
//例如
setInterval('alert("Hello");', 3000); //即3秒执行一次alert

setInterval() 与 setTimeout() 的区别在于，只不过后者执行一次，而前者可以执行多次。

二、代码展示

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/countdown.css" />
		<title>倒计时</title>
	</head>
	<body onload="nowTime()">
        <div id="now">
			<script>
				function nowTime(){
					var today=new Date(); //创建 Date 对象
					var h=today.getHours(); //返回 Date 对象的小时 (0 ~ 23)
					var m=today.getMinutes(); //返回 Date 对象的分钟 (0 ~ 59)
					var s=today.getSeconds(); //返回 Date 对象的秒数 (0 ~ 59)
					m=Addzero(m); //调用Addzero函数
					s=Addzero(s);
					document.getElementById('now').innerHTML="当前时间:"+h+":"+m+":"+s;
					t=setTimeout(function(){nowTime()},1000);
					//1秒后调用一次nowTime()函数
				}
				function Addzero(i){
					//在小于10的数字前加一个‘0’
					if (i<10) {i="0" + i;}
					return i;
				}
			</script>
		</div>
		
		<div id="time">  
		    <script>
			    function count(y,m,d){ //参数ymd为截止时间的年月日
					var now = Date.now();  //返回自1970年1月1日到当前时间的毫秒数
					//返回从1970年1月1日至截止日期的毫秒数
					var end = new Date(y,m-1,d).getTime();
					var ms = end - now;
					var s = Math.floor(ms/1000);   //floor()向下取整
					var sec = Math.floor(s % 60 )  //秒数
					var min = Math.floor(s / 60 % 60 );  //分钟
					var hour = Math.floor(s / 60 / 60 % 24);  //小时
					var day = Math.floor(s / 60 / 60 / 24);  //天数

					var text1 = "距离CET-6还有"+day+"天"+hour+"时"+min+"分"+sec+"秒";
					time.innerHTML = text1;  //获取内容
				}
				count(2019,12,14);  //设置截止日期
				//循环：每隔1秒执行一次function
				setInterval(function(){count(2019,12,14);},1000);
		    </script>
		</div>  
		<p>Keep on going , never give up!</p>
	</body>
</html>

CSS:

body{
	text-align: center;
	width: 100%;
	background-image: url(../img/3.jpg);
	background-repeat: no-repeat;   /*不重复背景图像*/
	background-size:100% auto;     /*规定背景图片的尺寸*/
	
}
#now{
	font-size: 50px;
	margin: 90px 0 100px 0;
}
#time
{
	font-size: 60px;
	margin: 10px 0 10px 0;
}
p{
	font-size: 35px;
	margin: 140px 0 10px 0;
}

三、效果

在这里插入图片描述

Aiolei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的倒计时

目录一、基础知识1. JavaScript Date 对象2. setTimeout() 函数3. setInterval() 函数二、代码展示三、效果一、基础知识首先，我们需要掌握一些关于js的基本知识1. JavaScript Date 对象Date 对象用于处理日期与时间，创建 Date 对象：new Date( )。方法描述getDate( )返回一个月中的某一天 (1 ~ 31)getDay( )返回一周中的某一天 (0 ~ 6)getFullYear
复制链接

扫一扫