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代码
Dec 26 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
Sep 24 Javascript
Vue.js实现可编辑的表格
Dec 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php中使用sftp教程
2015/03/30 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
2016/11/17 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
理解Python中的With语句
2016/03/18 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python切片工具pillow用法示例
2018/03/30 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
工程业务员岗位职责
2013/12/31 职场文书
财务主管自我鉴定
2014/01/17 职场文书
高中学生期末评语
2014/04/25 职场文书
优秀校长事迹材料
2014/12/24 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
Python 如何实现文件自动去重
2021/06/02 Python