JS实现针对给定时间的倒计时功能示例


Posted in Javascript onApril 11, 2017

本文实例讲述了JS实现针对给定时间的倒计时功能。分享给大家供大家参考,具体如下:

有时候,网站需要一个倒计时的特效来庆祝某些特别的日子。自己也实现了一个,占用内存也很小噢。其原理就是每隔一秒执行一次处理函数,将终点时间和现在的时间比较然后换算之后显示对应的值。

效果如下:

JS实现针对给定时间的倒计时功能示例

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>倒计时</title>
  </head>
  <body>
    <input type="text" name="time" id="time" value="2017-09-22" />
    <input type="button" name="okbtn" id="okbtn" value="确认" />
    <br />
    <p id="textp">这里显示倒计时</p>
  </body>
<script type="text/javascript">
  var okbtn=document.getElementById("okbtn");
  textp=document.getElementById("textp");
  okbtn.onclick=function(){
    var time=document.getElementById("time");
    var timevalue=time.value;
    //通过正则表达式确认输入格式是否正确
    var patt=/^(\d{1,4})(-)(\d{1,2})\2(\d{1,2})$/;
    if(patt.test(timevalue)==false){
      //如果不正确
      textp.innerHTML="输入格式不满足YYYY-MM-DD";
      return false;
    }else{
      textp.innerHTML="这里显示倒计时";
    }
    //获取输入的年月日
    var timearray=timevalue.split("-");
    //ShowLeftTime(timearray[0],timearray[1],timearray[2]);
    setInterval(function(){ShowLeftTime(timearray[0],timearray[1],timearray[2]);},1000);
  }
  function ShowLeftTime(year,month,date){
        //得出剩余时间
    var now=new Date();
    var endDate=new Date(year,month-1,date);
    var leftTime=endDate.getTime()-now.getTime();
    var leftsecond=parseInt(leftTime/1000);
    var day=Math.floor(leftsecond/(60*60*24));
    var hour=Math.floor((leftsecond-day*24*60*60)/3600);
    var minute=Math.floor((leftsecond-day*24*60*60-hour*3600)/60);
    var second=Math.floor(leftsecond-day*60*60*24-hour*60*60-minute*60);
    //显示剩余时间
    textp.innerHTML="距离"+year+"年"+month+"月"+date+"日"
    +"还有"+day+"天"+hour+"小时"+minute+"分"+second+"秒";
  }
</script>
</html>
Javascript 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
JSON 教程 json入门学习笔记
Sep 22 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
初步了解javascript面向对象
Nov 09 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
详解vue-router基本使用
Apr 18 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
Nov 12 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
vuejs绑定class和style样式
Apr 11 #Javascript
vue监听滚动事件实现滚动监听
Apr 11 #Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 #jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 #jQuery
JS中IP地址与整数相互转换的实现代码
Apr 10 #Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 #Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 #jQuery
You might like
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
python基于http下载视频或音频
2018/06/20 Python
flask入门之表单的实现
2018/07/18 Python
Python多进程fork()函数详解
2019/02/22 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
Css3圆角边框制作代码
2015/11/18 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
时尚休闲吧创业计划书
2014/01/25 职场文书
物流业务员岗位职责
2014/02/08 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
学校节能减排方案
2014/06/13 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
2014年司法所工作总结
2014/11/22 职场文书
大学生逃课检讨书
2015/05/04 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
班委竞选稿范文
2015/11/21 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL