JS如何显示间隔日期的代码

2017年元旦马上要到了，今天用JS练习了一个元旦倒计时，希望对JS初学者有所帮助，当然大神可以忽略。，

操作方法

  • 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)

相关推荐

  • xp系统让系统任务栏的时间栏显示准确日期(精确到星期几)

    xp系统让系统任务栏的时间栏显示准确日期 在xp系统中,当鼠标移动到右下角的时间上时,通常只会显示年月日,并不会显示星期几,这对很多用户来说就非常不方便了.对这些用户来说,一般是通过星期几而不是几月几 ...

  • excel如何显示当天日期

    excel显示当天日期的方法: 显示当天日期步骤1:打开Excel2007文件界面. 显示当天日期步骤2:选中单元格,在单元格内输入公式=TODAY() 显示当天日期步骤3:然后点击其余任意的单元格或 ...

  • Win10怎么设置只显示指定日期的文件?

    Win10怎么设置只显示指定日期的文件?

    有些时候,我们电脑某个文件夹下可能积累了不少文件,而我们却只想查看特定日期的文件:但是,由于文件数量众多,要是一个一个地去核对查找,不把眼睛累坏才怪.那么,在 Win10 中,究竟怎样才能让文件夹只显 ...

  • win10系统日历怎么设置显示农历日期?

    window10日历这个是一个很好的功能.这个可以设置很多的功能.只是大家不知道怎么设置.下面小编就为大家介绍win10系统日历怎么设置显示农历日期方法,一起来看看吧! 步骤 用一个功能首先要知道这个 ...

  • 怎么设置在小米手机的负一屏中显示农历日期

    怎么设置在小米手机的负一屏中显示农历日期

    小米手机是一款为广大消费者所喜爱的手机品牌,它颜值高,性能高,是值得选购的手机.很多用户不知道怎么设置在小米手机的负一屏中显示农历日期,小编今天就来为您解答这个问题.具体如下:1. 首先,请大家打开手 ...

  • 如何设置在iPhone苹果手机锁屏时显示农历日期

    如何设置在iPhone苹果手机锁屏时显示农历日期

    日常生活中,我们大部分朋友都习惯看手机的公历日期,但是有的朋友想在手机中顺便将农历日期也显示出来该怎么办?请大家看下面的方法!具体如下:1.首先,我们登录手机的设置APP首页.2. 接着,我们下滑设置 ...

  • EXCEL表格在打印时如何给页脚设置显示打印日期

    EXCEL表格在打印时如何给页脚设置显示打印日期

    excel表格制作好之后,我们很多都需要打印出来,如果想要在打印的时候,一并将打印日期也显示在页脚处,该如何设置呢?今天就跟大家介绍一下EXCEL表格在打印时如何给页脚设置显示打印日期的具体操作步骤. ...

  • 怎么设置华为手机息屏时显示时间日期的时间段

    怎么设置华为手机息屏时显示时间日期的时间段

    今天小编分享的是怎么设置华为手机息屏时显示时间日期的时间段.具体如下:1. 点击打开桌面上的[设置],如图界面中点击红色框的[安全和隐私]2.再点击红色框的[锁屏和密码]3. 点击打开红色框的[灭屏显 ...

  • steam软件中的创意工坊显示乱码或101代码怎么办

    steam软件中的创意工坊显示乱码或101代码怎么办

    我们想要进入steam中的创意工坊,点击进入发现是乱码或者101代码,该怎么进入呢?今天就跟大家介绍一下steam软件中的创意工坊显示乱码或101代码的具体解决方法.1. 如图,我们打开steam软件 ...