这个效果的实现关键是对Date对象和setTimeout的使用。

一共有三个例子，HTML结构如下，就不添加CSS样式了。

<body>

    当前时间：<p id="p1"></p>

    高考倒计时：<p id="p2"></p>

    限时抢购：<p id="p3"></p>

</body>

主要体会javascript的实现

window.onload=function () {

    var p1=document.getElementById("p1"),

        p2=document.getElementById("p2");

        p3=document.getElementById("p3");

    showtime1();

    showtime2();

    showtime3();

}

1.简单的实现当前时间的显示

 function showtime1() {

     var nowdate=new Date();//创建Date对象nowdate,以获取当前时间

     var year=nowdate.getFullYear(),//获取年份

         month=nowdate.getMonth()+1,//获取月份，getMonth()得到的是0-11，需要加1

         date=nowdate.getDate(),//获取日份

         day=nowdate.getDay(),//获取一周中的某一天，getDay()得到的是0-6

         week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],

         h=nowdate.getHours(),

         m=nowdate.getMinutes(),

         s=nowdate.getSeconds(),

         h=checkTime(h),//函数checkTime用于格式化时，分，秒

         m=checkTime(m),

         s=checkTime(s);

     p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;

     setTimeout(showtime1, 1000);//反复执行函数本身

 }

其中的checkTime函数如下：

function checkTime(i) {

   if (i<10) {

      i="0"+i;

   }

   return i;

}

因为平时看到的时间格式一般是00:00:01,而getHours，getMinutes，getSeconds得到格式是0到9，不是00到09这样的格式。所以在从9变成10的过程中，有一位数，变成两位数，同样在充59秒变为0秒或者59分变为0分或者23时变为0时。

比如 23:59:59 再下一秒 应该变为00:00:00；若未使用checkTime函数进行处理，则会变为0:0:0，这样格式上就有点不统一，而且视觉上也有字数增加或减少的突变。(后面两个例子就不用checkTime函数对时分秒进行处理了！！！)

2.高考倒计时效果实现

function showTime2() {

　　var nowtime=new Date(),//获取当前时间

　　    endtime=new Date("2017/6/6");//定义结束时间

   var lefttime=endtime.getTime()-nowtime.getTime(),//距离结束时间的毫秒数

       leftd=Math.floor(lefttime/(1000*60*60*24)),//计算天数

       lefth=Math.floor(lefttime/(1000*60*60)%24),//计算小时数

       leftm=Math.floor(lefttime/(1000*60)%60),//计算分钟数

       lefts=Math.floor(lefttime/1000%60);//计算秒数

   p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;

   setTimeout(showTime2, 1000);

}

其中比较重要的几点：

① 定义结束的时间endtime=new Date("2017/6/6")是通过new一个带有参数的Date对象，直接 new Date()则是直接获取到当前的时间；

② getTime()方法得到的是距离1970 年 1 月 1 日的毫秒数。

③天数，小时数，分钟数和秒数的计算，%（取模运算）。得到距离结束时间的毫秒数（剩余毫秒数），除以1000得到剩余秒数，再除以60得到剩余分钟数，再除以60得到剩余小时数。除以24得到剩余天数。剩余秒数 lefttime/1000 模60得到秒数，剩余分钟数 lefttime/(1000*60) 模60得到分钟数，剩余小时数模 lefttime/(1000*60*60) 模24得到小时数。

3.限时抢购倒计时效果

function showtime3() {

　　var nowtime=new Date(),

　　　　endtime=new Date("2020/1/1,00:00:00"),//设置结束时间

　　　　lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),

　　　　d=Math.floor(lefttime/(60*60*24)),

　　　　h=Math.floor(lefttime/(60*60)%24),

　　　　m=Math.floor(lefttime/60%60),

　　　　s=Math.floor(lefttime%60);

　　p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";

　　setTimeout(showtime3, 1000);

}

其实和第二个例子大同小异，区别是结束时间的设置 new Date("2020/1/1,00:00:00")

下面是完整的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>倒计时效果</title>

    <script type="text/javascript">

        function checkTime(i) {

            if (i<10) {

                i="0"+i;

            }

            return i;

        }

        window.onload=function () {

            var p1=document.getElementById("p1"),

                p2=document.getElementById("p2");

            showtime1();

            showtime2();

            showtime3();
　　　　 }

        function showtime1() {

            var nowdate=new Date();

            var year=nowdate.getFullYear(),//年份

            month=nowdate.getMonth()+1,//月份

            date=nowdate.getDate(),//日

            week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],

            day=nowdate.getDay(),//getDay获取0-6

            h=nowdate.getHours(),

            h=checkTime(h),

            m=nowdate.getMinutes(),

            m=checkTime(m),

            s=nowdate.getSeconds(),

            s=checkTime(s);

         p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;

         setTimeout(showtime1, 1000);

         }

         function showtime2() {

            var nowtime=new Date(),

                endtime=new Date("2017/6/6");

            var lefttime=endtime.getTime()-nowtime.getTime(),

                leftd=Math.floor(lefttime/(1000*60*60*24)),

                lefth=Math.floor(lefttime/(1000*60*60)%24),

                leftm=Math.floor(lefttime/(1000*60)%60),

                lefts=Math.floor(lefttime/1000%60);

            p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;

            setTimeout(showtime2, 1000);

         }

         function showtime3() {

            var nowtime=new Date(),

                endtime=new Date("2020/1/1,00:00:00"),

                lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),

                d=Math.floor(lefttime/(60*60*24)),

                h=Math.floor(lefttime/(60*60)%24),

                m=Math.floor(lefttime/60%60),

                s=Math.floor(lefttime%60);

            p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";

            setTimeout(showtime3, 1000);

         }

    </script>

</head>

<body>

    当前时间：<p id="p1"></p>

    高考倒计时：<p id="p2"></p>

    限时抢购：<p id="p3"></p>

</body>

</html>

#行者杰客#

为者常成，行者常至。婴非有异与人也，常为而不置，常行而不休者

javascript特效实现(4)——当前时间和倒计时效果的更多相关文章

  1. javascript 特效实现(1)——展开选项和收起效果

    知识点:javascript事件:判断当前展开收起状态:延迟执行setTimeout方法. 1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id=" ...

  2. Javascript特效代码大全(420个)（转）

    转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习  ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...

  3. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  4. JavaScript特效（调试笔记）

    JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...

  5. JS 显示时间与倒计时练习

    显示时间与倒计时 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  7. 超实用的JavaScript代码段 Item1 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  8. 【JavaScript】在同一个网页中实现多个JavaScript特效

    在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...

  9. Javascript 实现倒计时效果

    代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

随机推荐

  1. thread_fork/join并发框架1

    一.线程并发控制  Thread.Executor.ForkJoin和Actor  1.裸线程      Runnable接口,调用.start()开始,没有现成的API来结束线程,你需要自己来实现, ...

  2. jquery实现表格内容筛选

    对于表格来说,当数据比较多的时候,我们无法一页一页的查找,这时可以通过一个搜索框来实现搜索. 对于这个搜素框,我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选,而不是填完以后点击 ...

  3. sencha treestore 取消自动加载数据

    gridstore在设置了autoLoad=false后不会自动加载数据,但是treestore不行,后来发现删掉root里的expanded:true后就可以了.但是界面上树没有展开,需在store ...

  4. [水]用vb写了个PCB

    这学期我们学操作系统,所以得写个PCB. 于是我借鉴了一下windows的PCB,写了这个 Imports System.Runtime.InteropServices ''' <summary ...

  5. sql 去重

    ;WITH CETAS (SELECT *, ROW_NUMBER() OVER (PARTITION BY SearchTask_PKID ORDER BY SearchTask_PKID) Row ...

  6. maven oracle jdbc jar

    1.problem describe: when your dependency jar about oracle use code like this: <!-- oracle-connect ...

  7. phpcms v9 升级视频云问题推荐位不能添加

    因为使用的是v9的早期版本,后来升级的时候没敢升级数据库,直接使用了老的数据库结构,造成[推荐位]添加不能使用,报告没有thumb列. 查看数据库果然没有,没办法要么添加相关的列,要么禁用上传缩略图. ...

  8. 开源VS扩展CodeMaid介绍

         CodeMaid是一个开源的Visual Studio的扩展插件,用于整理与优化代码等.功能类似于商业软件ReSharper,但它是免费的,并且开放源代码.它能帮助你更容易的理解你的代码,支 ...

  9. 【GPU编解码】GPU硬解码---DXVA

    前面介绍利用NVIDIA公司提供的CUVID库进行视频硬解码,下面将介绍利用DXVA进行硬解码. 一.DXVA介绍 DXVA是微软公司专门定制的视频加速规范,是一种接口规范.DXVA规范制定硬件加速解 ...

  10. .NET Core创建一个控制台（Console）程序

    .NET Core版本:1.0.0-rc2 Visual Studio版本:Microsoft Visual Studio Community 2015 Update 2 开发及运行平台:Window ...