jq实现倒计时功能

news2024/11/16 1:55:45

效果如下：

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jq实现倒计时功能</title>
</head>
<body>
<span class="tit">倒计时：</span>
<div id="countdown">
    <span class="time-item">0</span>
    <span>天</span>
    <span class="time-item">0</span>
    <span>时</span>
    <span class="time-item">0</span>
    <span>分</span>
    <span class="time-item">0</span>
    <span>秒</span>
</div>

<script src="jquery.js"></script>	
<script>	

countDown('2022/12/30 23:59:59','#countdown')

function countDown(date,ele){
	// 天，时，分，秒
	var day = 0;
	var hour = 0;
	var minu= 0;
	var sec = 0;
	var timeStr = []

	var time_start = new Date().getTime()
	var time_end = new Date(date).getTime()

	var time_distance = time_end - time_start

	if(time_distance > 0){

		day = Math.floor(time_distance/86400000)
		time_distance -= day * 86400000

		hour = Math.floor(time_distance/3600000)
		time_distance -= hour * 3600000

		minu = Math.floor(time_distance/60000)
		time_distance -= minu * 60000

		sec = Math.floor(time_distance/1000)
		time_distance -= sec *1000


		timeStr.push(day,hour,minu,sec)

		for (let i = 0; i < timeStr.length; i++){
			if(timeStr[i] < 10){
				timeStr[i] = '0' + timeStr[i]
			} 
			$(ele).find(".time-item").eq(i).text(timeStr[i])
		}
		setTimeout(function(){
			countDown(date,ele)
		},1000)

	}
}

</script>

</body>
</html>

拓展：

Date的常用对象方法

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

html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>js的Date()对象</title>
</head>
<body>


<script src="jquery.js"></script>		

<script type="text/javascript">

	console.log('Date 对象:',new Date()) // Date 对象用于处理日期与时间。
	console.log('年：', new Date().getFullYear()) // 可返回一个表示年份的 4 位数字。
	console.log('月：', new Date().getMonth()+1) // getmonth()的返回值是 0(一月) 到 11(十二月) 之间的一个整数!获取的其实是索引值,他的值是从0开始的,所以要加1才会得到真正的月份。
	console.log('日：', new Date().getDate()) // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
	console.log('星期：', new Date().getDay()) // 从 Date 对象返回一周中的某一天 (0 ~ 6)。
	console.log('小时：', new Date().getHours()) // 返回 Date 对象的小时 (0 ~ 23)。
	console.log('分钟：', new Date().getMinutes()) // 返回 Date 对象的分钟 (0 ~ 59)。
	console.log('秒：', new Date().getSeconds()) // 返回 Date 对象的秒数 (0 ~ 59)。
	console.log('毫秒：', new Date().getMilliseconds()) // 返回 Date 对象的毫秒(0 ~ 999)。
	console.log('1970 年 1 月 1 日至今的毫秒数：', new Date().getTime()) // 返回 1970 年 1 月 1 日至今的毫秒数。
</script>
</body>
</html>