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 相关文章推荐
jQuery Ajax 全解析
Feb 08 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
小程序开发之模态框组件封装
Apr 23 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
Snoopy类使用小例子
2008/04/15 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue+eslint+vscode配置教程
2019/08/09 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
Python中Class类用法实例分析
2015/11/12 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
Django之PopUp的具体实现方法
2019/08/31 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python如何从键盘获取输入实例
2020/06/18 Python
使用npy转image图像并保存的实例
2020/07/01 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
应届毕业生求职信范文
2013/12/18 职场文书
工程招投标邀请书
2014/01/30 职场文书
质量月活动总结
2014/08/26 职场文书
销售业务员岗位职责
2015/02/13 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript