这个效果的实现关键是对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. 点餐系统mealsystem.sql

    /* Navicat MySQL Data Transfer Source Server : localhost Source Server Version : 50162 Source Host : ...

  2. SpringMVC从Controller跳转到另一个Controller（转）

    http://blog.csdn.net/jackpk/article/details/44117603 [PK亲测] 能正常跳转的写法如下: return "forward:aaaa/bb ...

  3. Qt Style Sheet实践（二）：组合框QComboBox的定制

    导读 组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分.在许多既需要用户选择.又需要用户手动输入的应用场景下,组合框能够很好的满足我们的需求.如我们经常使用的聊天软件Q ...

  4. HTML5定稿一周年，你必须要重新认识HTML5了

    原文网址链接:http://www.csdn.net/article/2015-11-24/2826317 去年此时,W3C定稿了HTML5.我曾发表一篇文章<HTML 5终于定稿,为什么原生A ...

  5. 转帖一篇sixxpack破解的文章！

    星期天闲着没事玩游戏,玩游戏不能无外挂.于是百度了半天,找到了一个,看介绍貌似不错,就下载了下来.一看,竟然是用.net写的,下意识地Reflector了一下.发现竟是一个叫actmp的程序集.如图: ...

  6. html5 canvas雨点打到窗玻璃动画

    html5 canvas雨点打到窗玻璃动画 HTML5下雨效果 效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: <!doctype htm ...

  7. 【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用

    这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...

  8. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  9. java多线程(三)——锁机制synchronized(同步语句块)

    用关键字synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法之行一个长时间的任务,那么B线程必须等待比较长的时间,在这样的情况下可以使用synchronized同步语句快来解 ...

  10. 各个平台的mysql重启命令

    linux平台及windows平台mysql重启方法 Linux下重启MySQL的正确方法: 1.通过rpm包安装的MySQL service mysqld restart 2.从源码包安装的MySQ ...