javascript特效实现(4)——当前时间和倒计时效果

这个效果的实现关键是对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)——当前时间和倒计时效果的更多相关文章

javascript 特效实现(1)——展开选项和收起效果
知识点:javascript事件:判断当前展开收起状态:延迟执行setTimeout方法. 1.简单的展开和收起效果: 1.1 静态结构HTML代码分析 body包含最外层的div id=" ...
Javascript特效代码大全(420个)（转）
转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习 ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...
二、JavaScript语言--JS实践--倒计时效果
主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...
JavaScript特效（调试笔记）
JavaScript特效一.在网页上显示当前的时间日期,例如:“2016年3月26日星期六”. js源代码: function getTime() { var today = new Date() ...
JS 显示时间与倒计时练习
显示时间与倒计时 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
超实用的JavaScript代码段 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
超实用的JavaScript代码段 Item1 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
【JavaScript】在同一个网页中实现多个JavaScript特效
在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...
Javascript 实现倒计时效果
代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

随机推荐

ASP.NET MVC使用动态产生meta
在ASP.NET中,我们是很容易动态为header节点添加meta信息.<动态修改网页Header属性,Title,Meta标签等>http://www.cnblogs.com/insus ...
WPF 中获取DataGrid 模板列中控件的对像
WPF 中获取DataGrid 模板列中控件的对像 #region 当前选定行的TextBox获得焦点 /// <summary> /// 当前选定行的TextBox获得焦点 /// &l ...
平衡二叉树---Shaolin
Description Shaolin temple is very famous for its Kongfu monks.A lot of young men go to Shaolin temp ...
UVA 10090 - Marbles 拓展欧几里得
I have some (say, n) marbles (small glass balls) and I am going to buy some boxes to store them. The ...
LGLCalender (价格日历)
一直未能找到自己想要的日历价格,就算右也不是我想要的,今天自己封装了一个,欢迎各位来查阅,不足的地方请指教最新代码下载地址https://github.com/liguoliangiOS/LGLCa ...
Eclipse 出现Some sites could not be found. See the error log for more detail.错误解决方法
Eclipse 出现Some sites could not be found. See the error log for more detail.错误解决方法 Some sites could ...
Java中Scanner类和BufferReader类之间的区别
java.util.Scanner类是一个简单的文本扫描类,它可以解析基本数据类型和字符串.它本质上是使用正则表达式去读取不同的数据类型. Java.io.BufferedReader类为了能够高效的 ...
[Architecture Pattern] Singleton Locator
[Architecture Pattern] Singleton Locator 目的组件自己提供Service Locator模式,用来降低组件的耦合度. 情景在开发系统时,底层的Infrast ...
javascript --- 词法分析
JavaScript代码自上而下执行,但是在js代码执行前,会首先进行词法分析,所以事实上,js运行要分为词法分析和执行两个阶段. 词法分析主要分为三步: 第一步: 分析形参: 第二步: 分析变量声明 ...
ABAP常用函数集锦
函数名描述 SD_VBAP_READ_WITH_VBELN 根据销售订单读取表vbap中的信息EDIT_LINES 把READ_TEXT返回的LINES中的行按照TDFORMAT=“*”重新组织VI ...

javascript特效实现(4)——当前时间和倒计时效果

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

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

随机推荐

热门专题