这个效果的实现关键是对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. ServletFileUpload（Servlet文件上传）

    //**文件上传** form表单提交必须指定Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型"multipart/form-data" //1.创建磁盘文件项目工 ...

  2. Entity FrameWork 延迟加载本质（二）

    1.对于外键实体而言,EF会在用到这个外键属性的时候,才会去查对应的表.这就是按需加载了... 2.按需加载的缺点:每次调用外键实体的时候,都会去查询数据库(EF有小优化:相同的外键实体只查一次) I ...

  3. DIV+CSS颜色边框背景等样式

    1.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<常用css缩写语法总结>,css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两 ...

  4. GridView 用 checkbox 全选并取值

    方法一,用 js 实现 <script type="text/javascript"> //<![CDATA[ function CheckAll(oCheckb ...

  5. AC自动机（1）

    Description Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀).    ...

  6. [moka同学笔记]yii表单dropdownlist样式

    <?= $form->field($modelUser,'name') ?> <div class="form-group field-community-mobil ...

  7. window10 mysql5.7 解压版 安装

    1. 解压mysql-5.7.11-winx64.zip 到某文件夹, 如C:\DevelopCommon\mysql-5.7.11-winx64. 2. 配置环境变量 变量名 : MYSQL_HOM ...

  8. PHP学习笔记：对命名空间（namespace）学习资料的翻译

    Name collisions means: you create a function named db_connect, and somebody elses code that you use ...

  9. 自定义HttpMessageHandler实现HTTP方法的重写

    自定义HttpMessageHandler实现HTTP方法的重写

  10. Play Framework介绍:控制器层

    业务逻辑代码通常位于模型(model)层.客户端(比如浏览器)无法直接调用其中的代码,所以模型对象提供的功能,必须作为资源以URI方式暴露给外部. 客户端使用HTTP协议来操作这些资源,从而调用了内部 ...