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代码格式化和语法着色V2
Oct 14 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
js注册时输入合法性验证方法
Oct 21 Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 Javascript
javascript随机变色实例代码
Oct 15 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
重定向实现代码
2006/11/20 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
JavaScript 异步调用
2017/10/25 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
简述vue中的config配置
2018/01/23 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
pandas的排序和排名的具体使用
2019/07/31 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
高考考python编程是真的吗
2020/07/20 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
暑期社会实践方案
2014/02/05 职场文书
个人授权委托书样本
2014/09/13 职场文书
亲属关系公证书样本
2015/01/23 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
纪检监察立案决定书
2015/06/24 职场文书
教务处教学工作总结
2015/08/10 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript