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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
js对象基础实例分析
Jan 13 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
几种响应式文字详解
May 19 Javascript
原生js二级联动效果
Jun 20 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 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
一个MYSQL操作类
2006/11/16 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
STP的判定过程
2012/10/01 面试题
简单而又朴实的个人求职信分享
2013/12/12 职场文书
实习教师自我鉴定
2013/12/12 职场文书
进口业务员岗位职责
2014/04/06 职场文书
调查研究项目计划书
2014/04/29 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
信用卡工资证明格式
2014/09/13 职场文书
个人党性分析总结
2015/03/05 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang