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 相关文章推荐
javascript 拖动表格行实现代码
May 05 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
深入理解js中this的用法
May 28 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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
You might like
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
Javascript 对象的解释
2008/11/24 Javascript
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
python的链表基础知识点
2020/09/13 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
《月光启蒙》教学反思
2014/03/01 职场文书
企业出纳岗位职责
2014/03/12 职场文书
高中学生期末评语
2014/04/25 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
债务授权委托书范本
2014/10/17 职场文书
文明倡议书
2015/01/19 职场文书
工作服管理制度范本
2015/08/06 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL