JS实现动态倒计时功能(天数、时、分、秒)


Posted in Javascript onDecember 12, 2019

写在前面:

实现倒计时功能首先是得到目标时间,然后用当前时间减去目标时间,最后将时间差传化为天数、时、分、秒。由于得到的时间不能直接运算,可以采用object.getTime()方法转化成相同类型进行运算。

相关说明:

如果想要显示界面好看些,可以添加一下样式。

JS实现动态倒计时功能(天数、时、分、秒)

<script>
 function show(){
  //获取目的日期
  var myyear=document.getElementById("year").value;
  var mymonth=document.getElementById("month").value-1;
  var myday=document.getElementById("day").value;
  var myhour=document.getElementById("hour").value;
  var myminute=document.getElementById("minute").value;
  var mysecond=document.getElementById("second").value;
  var time=Number(new Date(myyear,mymonth,myday,myhour,myminute,mysecond));
  // var time=new Date(myyear,mymonth,myday,myhour,myminute,mysecond).getTime();
  //获取当前时间
  var nowTime=Date.now();
  // var nowTime=new Date().getTime();
  //获取时间差
  var timediff=Math.round((time-nowTime)/1000);
  //获取还剩多少天
  var day=parseInt(timediff/3600/24);
  //获取还剩多少小时
  var hour=parseInt(timediff/3600%24);
  //获取还剩多少分钟
  var minute=parseInt(timediff/60%60);
  //获取还剩多少秒
  var second=timediff%60;
  //输出还剩多少时间
  document.getElementById("1").innerHTML=day;
  document.getElementById("2").innerHTML=hour;
  document.getElementById("3").innerHTML=minute;
  document.getElementById("4").innerHTML=second;
  setTimeout(show,1000);
  if(timediff==0){return;}
  }
 </script>

JS实现动态倒计时功能(天数、时、分、秒)

<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 input{width:50px;height: 20px;border:1px solid black;}
 .time1 span{display:inline-block;width:40px;height: 20px;}
 </style>
</head>
<body>
 <form>目的日期:
 <input type="text" id="year"><span>年</span>
 <input type="text" id="month"><span>月</span>
 <input type="text" id="day"><span>日</span>
 <input type="text" id="hour"><span>时</span>
 <input type="text" id="minute"><span>分</span>
 <input type="text" id="second"><span>秒</span>
 <input type="button" value="确定" οnclick="show()">
 </form>
 <div class="time1">还剩时间:
 <span id="1"></span>天 
 <span id="2"></span>时
 <span id="3"></span>分
 <span id="4"></span>秒
 </div>

写在最后:倒计时的难点主要是时间格式和数字格式的转换,转换时除了object.getTime()方法还有Number(object)方法,大家可以尝试使用一下。

总结

以上所述是小编给大家介绍的JS实现动态倒计时功能(天数、时、分、秒),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 #Javascript
JS动态显示倒计时效果
Dec 12 #Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 #Javascript
js实现倒计时秒杀效果
Mar 25 #Javascript
vue el-table实现自定义表头
Dec 11 #Javascript
Vue如何获取数据列表展示
Dec 11 #Javascript
vue el-table实现行内编辑功能
Dec 11 #Javascript
You might like
PHP递归创建多级目录
2015/11/05 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
JavaScript代码复用模式详解
2014/11/07 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
JSON取值前判断
2014/12/23 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
python中数组和列表的简单实例
2022/03/25 Python