如何让JS显示倒计时

2024-03-27 20:04:43

马上要元旦了，2016年即将过去，今天特意做了一个倒计时来提醒自己。

操作方法

01

打开网页编辑器，先写DIV+CSS代码，这个用于前端显示的，代码如下所示： <style> div { margin-top:10%; margin-left:10%; } </style> <div id="countDown"> <b>——</b> </div>
02

接下来写JS代码，首先先写一个函数，这个函数是一个计算函数，用来计算约定日期与当前日期相差的天数，代码如下所示： <script> function countdown(title,intime,divId){ var online= new Date(intime); var now =new Date(); var leave =online.getTime()-now.getTime(); var day =Math.floor(leave/(1000*60*60*24))+1; if(day>1) { divId.innerHTML="<b>——距"+title+"还有"+day+"天!</b>"; } else if(day==1) { divId.innerHTML="<b>——明天就是"+title+"啦！</b>"; } else if(day==1) { divId.innerHTML="<b>——今天就是"+title+"啦！</b>"; } else { divId.innerHTML="<b>——哎呀"+title+"已经过去了！</b>"; } } </script>
03

然后在HTML里面引用这个函数，代码如下 <script language="javascript"> countdown("2017年元旦","1/1/2017",countDown); </script>
04

顺便说一下在计算日期的时候我包含了今天，所以在代码中多+1了，如果不想算今天，那么不用+1就可以了。
05

写好之后，我们用浏览器打开当前代码，就会显示【距2017年元旦还有9天！】的字样。

赞 (0)

js显示隐藏div

如何使用JavaScript设置一个div点击从显示变为隐藏,再次点击从隐藏变为显示呢?实现的代码很简单,点击时先判断div是否是显示,如果div是显示就把div设置为隐藏,否则就变为显示. js代码 ...
怎么用js显示隐藏div

怎么用js来显示或隐藏一个div?很简单,下面一起来看一下. 操作方法 01 首先我们创建一个div,和一个按钮.用按钮的点击来控制div的显示或隐藏. 02 添加一个样式名叫hide的样式,主要是设 ...
Focusky怎么制作倒计时

Focusky怎么制作倒计时
Focusky怎么设置倒计时功能

Focusky怎么设置倒计时功能: 1.打开工程文件,单击"发布"按钮->选择任意一种输出格式(以网页格式为例)->单击"下一步". 注:视频和 ...
ppt2007中怎样插入倒计时

在ppt2007中插入倒计时的方法: ①下载一个"PPT倒计时加载宏插件", ②启动PowerPoint,单击菜单"工具"找到"宏",点击& ...
ppt怎么添加宏倒计时

PPT怎么使用宏添加倒计时?在各类演讲.比赛中,经常要求比赛选手要在规定时间内完成演讲,于是,组办方就需要在PowerPoint演示中安装"倒计时",用以提醒演讲者.下面小编就教你 ...
Authorware一个闪烁的倒计时的动画效果?

Authorware中的判断图标执行的是循环结构时候,每执行一次循环,演示窗口闪烁一次,这样就达到霓虹效果了,可以实现倒计时的下过,下面我们就来看看详细的教程. 1.在流程线上添加一个判断图标,并将名 ...
如何使用iPhone手机倒计时拍摄功能

现在很多人在使用iPhone手机,有时候出于某些需求,拍照时需要使用倒计时拍摄功能,接下来小编就给大家介绍一下如何使用该功能.具体如下:1. 首先第一步打开手机中的[相机]App.2. 第二步进入相机 ...
如何用PPT制作倒计时

PPT是现在十分常用的办公软件之一,有些用户不知道如何用PPT制作倒计时,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开电脑中需要编辑的PPT文档,根据下图箭头所指,先按下[ ...