编程 Javascript

javascript特效实现——当前时间和倒计时效果的简单实例

Posted in Javascript onJuly 20, 2016

这个效果的实现关键是对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特效实现——当前时间和倒计时效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

javascript特效实现——当前时间和倒计时效果的简单实例

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法

Jul 28 Javascript

jQuery版仿Path菜单效果

Dec 15 Javascript

JS+DIV实现鼠标划过切换层效果的实例代码

Nov 26 Javascript

js判断日期时间有效性的方法

Oct 24 Javascript

JS比较两个数值的大小实例

Nov 25 Javascript

从零开始最小实现react服务器渲染详解

Jan 26 Javascript

js传递数组参数到后台controller的方法

Mar 29 Javascript

JS求Number类型数组中最大元素方法

Apr 08 Javascript

详解javascript中的变量提升和函数提升

May 24 Javascript

node中的session的具体使用

Sep 14 Javascript

vue+element-ui+axios实现图片上传

Aug 20 Javascript

解决layui 表单元素radio不显示渲染的问题

Sep 04 Javascript

javascript中数组和字符串的方法对比

Jul 20 #Javascript

js简单实现图片延迟加载的方法

Jul 19 #Javascript

JS实现输入框提示文字点击时消失效果

Jul 19 #Javascript

JavaScript新增样式规则(推荐)

Jul 19 #Javascript

JavaScript动态添加css样式和script标签

Jul 19 #Javascript

javascript中使用未定义变量或值的情况分析

Jul 19 #Javascript

js基于cookie记录来宾姓名的方法

Jul 19 #Javascript