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 动态生成私有变量访问器
Dec 06 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
vue+element实现表单校验功能
May 20 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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
德生PL550的电路分析
2021/03/02 无线电
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python自动发邮件脚本
2017/03/31 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
详解python pandas 分组统计的方法
2019/07/30 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
出售房屋协议书范本
2014/10/06 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
消防验收申请报告
2015/05/15 职场文书
单位综合评价意见
2015/06/05 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL