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 相关文章推荐
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
JS中数组重排序方法
Nov 11 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 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/06/16 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python实现聚类算法原理
2018/02/12 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
python 穷举指定长度的密码例子
2020/04/02 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
党员教师群众路线思想汇报范文
2014/10/28 职场文书
行政处罚告知书
2015/07/01 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
六年级数学教学反思
2016/02/16 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers
MySQL数据库简介与基本操作
2022/05/30 MySQL