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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
Mar 03 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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
YII中assets的使用示例
2014/07/31 PHP
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python同时给两个收件人发送邮件的方法
2015/04/30 Python
利用Python如何生成随机密码
2016/04/20 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
pandas数据拼接的实现示例
2020/04/16 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
Linux中如何用命令创建目录
2015/01/12 面试题
为什么要使用servlet
2016/01/17 面试题
门面房租房协议书
2014/12/01 职场文书
新教师个人总结
2015/02/06 职场文书
收银员岗位职责范本
2015/04/07 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
污染环境建议书
2015/09/14 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书