简单的倒计时

一、基础知识

首先,我们需要掌握一些关于 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;
}

三、效果

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值