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
Feb 25 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
javascript常见操作汇总
Sep 03 Javascript
javascript如何写热点图
Dec 08 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python3.7添加dlib模块的方法
2020/07/01 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
物业客服专员岗位职责
2013/11/30 职场文书
服务行业个人求职的自我评价
2013/12/12 职场文书
区域销售经理职责
2013/12/22 职场文书
物流业务员岗位职责
2014/02/08 职场文书
知识竞赛主持词
2014/03/26 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
学生党员检讨书范文
2014/12/27 职场文书
公司搬迁通知
2015/04/20 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis
JS 基本概念详细介绍
2021/10/16 Javascript
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS