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 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
JavaScript中的类继承
Nov 25 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 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
长波有什么东西
2021/03/01 无线电
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
php数组查找函数总结
2014/11/18 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
python实现井字棋小游戏
2020/03/04 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
如何进行Linux分区优化
2013/02/12 面试题
高中生学习的自我评价
2013/12/14 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
销售总监岗位职责
2014/01/04 职场文书
个人综合鉴定材料
2014/05/23 职场文书
经销商年会策划方案
2014/05/29 职场文书
校友回访母校寄语
2015/02/26 职场文书
导游词之凤凰古城
2019/10/22 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
python和anaconda的区别
2022/05/06 Python