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 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
JavaScript常用工具函数大全
May 06 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 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
合作指挥官:孟斯克
2020/03/16 星际争霸
在php和MySql中计算时间差的方法
2011/04/22 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
react build 后打包发布总结
2018/08/24 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
python实现小球弹跳效果
2019/05/10 Python
Python PO设计模式的具体使用
2019/08/16 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
python的dict判断key是否存在的方法
2020/12/09 Python
python re模块常见用法例举
2021/03/01 Python
C# Debug和Testing相关面试题
2015/10/25 面试题
协议书范本
2014/04/23 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
小人国观后感
2015/06/11 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
python基础之文件操作
2021/10/24 Python
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers