简单的倒计时

已于 2022-03-25 16:26:37 修改
阅读量634 收藏
点赞数
分类专栏： 工具 文章标签： js
于 2022-03-25 16:25:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44607113/article/details/123738913
版权

目录

一、基础知识

首先，我们需要掌握一些关于 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
    评论
专栏目录
c++简易倒计时
10-26
基于c++的倒计时插件，时间为17：15，小插件，自己做着玩的
简单的倒计时(不用时间戳)，两种方法
weixin_68658847的博客
10-09 299
简单的倒计时(不用时间戳)，两种方法
简单的倒计时方法
依然的博客
07-18 915
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具和关键技术：Visual Studio 2015，JavaScript 作者：金建勇 撰写时间：2019年7月16日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 最近在做项目的过程中，遇到一个功能需要倒计时的任务，于是通过...
简易倒计时定时器的制作
最新发布
weixin_62744103的博客
06-26 918
4.如果在计时过程中，不做任何操作，当剩余时间显示为0，进度条行进到满格时，程序停止运行，同时弹出“定时时间到了！”的提示信息框，此时按钮文本由“暂停计时”切换为“计时结束”，如图4­-1所示。1.设定好定时时间1分0秒，单击“开始计时”按钮，计时开始后“开始计时”按钮文本切换为绿色的“暂停计时”文本(如图1-1)，如果此刻立即单击“暂停计时”按钮，程序暂停，按钮文本切换为“继续计时”（如图1-2）。3.如果在计时过程中，单击“停止”按钮，此时程序停止，弹出“计时中止”的提示信息框，如图3-1所示。
JS实现简单的倒计时功能的两种方法
天予不洗头的博客
02-17 960
本文实例讲述了原生JS实现简单的倒计时功能。分享给大家供大家参考，具体如下： 第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> &lt...
使用 HTML、CSS 和 JS 的简单倒数计时器
努力是为了站在万人之中，成为别人的光
09-10 2万+
JavaScript 倒数计时器用于各种电子商务和建设中的网站，以使用户保持最新状态。我们在不同类型的电子商务网站上看到，在任何产品或优惠到达之前的某个时间开始倒计时。 在本文中，我使用简单的 JavaScript 代码创建了一个倒数计时器和你分享。 您可以观看它的现场演示以了解它是如何工作的。如果您知道如何创建数字时钟，那么创建这样的项目就会容易得多。您可以在此处提前安排特定日期或时间。然后，在 JavaScript 代码的帮助下，从那个时间减去当前时间，减法每秒减少一次。 正如您在上图中所看到的，我在这
简易倒计时
02-01
提供1/5/10分钟的选择，点击开始，则进行倒计时，也可以选择自定义，选择0-99之间的一个值，单位分钟，进行倒计时
js简单倒计时实现代码
01-19
本文实例讲述了js简单倒计时实现代码。分享给大家供大家参考，具体如下： 距离活动结束还有<span id=day></span>天 <span id=hours></span>小时 <span id=min></span>分 <span id=sec></span>秒 [removed] ...
简易倒计时插件
12-04
产品活动倒计时怎么做？看这里，简单易懂可参考学习，可直接放到项目里使用。
Android--简易倒计时
weixin_65089091的博客
06-06 1936
Android--简易倒计时
制作简单倒计时程序
qwerlw的博客
11-08 2675
使用while循环实现了了一个简单倒计时功能并加以改进 1.初版代码 int main() { int i = 0; printf("欢迎使用倒计时功能，请输入倒计时时间（单位秒）"); scanf("%d", &i); while (i >= 0) { printf("%d\r", i); i = i - 1; Sleep(1000); } printf("计时结束！"); return 0; } 输入9调试，成功。 输入30，计时结束后显示0...
最简单的实现倒计时
anban5298的博客
04-10 168
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=...
最简单的倒计时
小哈力----一个小前端工程师
04-17 365
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script crossorigin="anonymous" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka...
JS实现简单的倒计时
热门推荐
第二世界
06-13 5万+
1、第一种 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div&gt...
简单的倒计时效果
zw_div的博客
01-06 1360
前言：倒计时效果在电商平台中用到的非常广泛，今天感谢程童鞋分享了一个倒计时的效果给我，趁着上午不忙，赶紧的研究一下，现将这个功能分享给大家。一、语法归纳注解参考1. JavaScript Date（日期）对象 Date() 返回当日的日期和时间。 getTime() 返回时间间隔内的毫秒数。2. JavaScript floor() 方法 floor() 方法执行
简单倒计时
学历记录每一天的博客
07-31 120
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS倒计时</title> </head> <body> <div id="div"></div> <script type="text/javascript"> window.onload
js简单倒计时
weixin_34130269的博客
12-11 144
不想每次用倒计时，都现写代码，比较烦，这里记一下，也顺便分享一些倒计时简单的逻辑。 如果你有更简单方便的代码，可以分享给大家。 var method = { countdownObj: { timer: null, changeTime: 0, }, countdown: funct...
超简单的倒计时代码编写
weixin_42746271的博客
05-10 1万+
时间倒计时效果首先创建一个脚本脚本编写讲解建议 效果 首先创建一个脚本 脚本编写 using UnityEngine; using System.Collections; using UnityEngine; using System.Collections; using UnityEngine.UI; public class Timer : MonoBehaviour ...
html简易倒计时
06-01
好的，以下是一个简单的 HTML 倒计时的示例代码： ```html <!DOCTYPE html> <html> <head> <title>简易倒计时</title> <script> function countdown() { var now = new Date(); var eventDate = new Date("2022-01-01 00:00:00"); // 设置倒计时的目标时间 var currentTime = now.getTime(); var eventTime = eventDate.getTime(); var remTime = eventTime - currentTime; var seconds = Math.floor(remTime / 1000); var minutes = Math.floor(seconds / 60); var hours = Math.floor(minutes / 60); var days = Math.floor(hours / 24); hours %= 24; minutes %= 60; seconds %= 60; document.getElementById("days").innerHTML = days; document.getElementById("hours").innerHTML = hours; document.getElementById("minutes").innerHTML = minutes; document.getElementById("seconds").innerHTML = seconds; setTimeout(countdown, 1000); } </script> </head> <body onload="countdown()"> <h1>距离2022年元旦还有:</h1> <div> <span id="days"></span> 天 <span id="hours"></span> 时 <span id="minutes"></span> 分 <span id="seconds"></span> 秒 </div> </body> </html> ``` 这个示例代码会在页面上显示一个倒计时，以距离 2022 年元旦 00:00:00 的时间为例。你可以根据需要修改目标时间和页面上显示的文字内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值