≡
  • 网络编程
  • 数据库
  • CMS技巧
  • 软件编程
  • PHP笔记
  • JavaScript
  • MySQL
位置:首页 > 网络编程 > JavaScript

js倒计时原理的简单示例

人气:623 时间:2018-09-26

这篇文章主要为大家详细介绍了js倒计时原理的简单示例,具有一定的参考价值,可以用来参考一下。

感兴趣的小伙伴,下面一起跟随四海网的小编罗X来看看吧。
倒计时经常会在项目中或者电商类网站比如团购或者拼单等等中会有出现,今天就了解一下它的原理,然后写一个简单的倒计时例子。
其实关于倒计时原理很简单:就是用未来的时间减去去现在的时间然后换算即可。(未来的时间点(不变)减现在的时间点(在变))。
来看简单的例子:计算一下距离今年五一还有多长时间?
直接来看代码:
布局:
<span>距离2018年5月1日还有多长时间?</span>
<p id="time"></p>
 那么js代码: JS代码如下:

/**
 * 倒计时
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
<script>
   window.onload=function(){
       var oP=document.getElementById("time");
       var iNow=new Date();
       var iNew=new Date('May 1,2018 0:0:0');// 这个为字符串写法,数字形式是:new Date( 2018,4,1,0,0,0 ),注意就是月份数字是从0开始的
       var time=Math.floor((iNew - iNow)/1000);//毫秒转为秒
       oP.innerHTML=Math.floor(time/86400)+'天'+Math.floor(time%86400/3600)+'时'+Math.floor(time%86400%3600/60)+'分'+time%60+'秒';
   };
</script>

 这样结果就出来了。还有需要记住的固定公式有:
//下面即为具体算法公式关于时分秒以及天,下面的t即为未来时间减现在时间的一个差
 天:Math.floor(t/86400)
 时:Math.floor(t%86400/3600)
 分:Math.floor(t%86400%3600/60)
 秒:t%60
 就是这些,好了,你也可以设定一个未来时间来计算一下了。这就是简单的倒计时原理!

本文来自:http://www.q1010.com/174/1742-0.html

注:关于js倒计时原理的简单示例的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。

关键词:倒计时

您可能感兴趣的文章

  • JS 实时倒计时,精确到秒级的简单示例
  • html 实现5秒倒计时跳转首页
  • HTML 404页面倒计时跳转的实现代码
上一篇:原生js for循环遍历二维数组、嵌套元素的简单示例
下一篇:js的数据类型的简单示例
热门文章
  • js随机生成两位数
  • js 文字超出部分隐藏、点击显示更多示例
  • 原生JS+css 点击查看全文的简单示例(类似今日头条效果)
  • javascript实现文字隐藏、展开收起的简单示例
  • JS 展开/收起按钮显示隐藏文字示例
  • JavaScript 正则判断文本是否含有超链接的简单示例
  • 原生JS实现鼠标悬停图片显示文字的简单示例
  • JS 点击按钮显示更多内容的简单示例
  • 原生js for循环遍历二维数组、嵌套元素的简单示例
  • javascript 浮点数转换成整数三种方法
  • 最新文章
    • js获取时间,处理时间等的实现方法
    • JavaScript 判断小数是否相等的简单示例
    • JavaScript 获取数组极值的简单示例
    • JavaScript防抖 & 节流的简单示例
    • JavaScript深拷贝的简单示例
    • JavaScript数组降维的简单示例
    • JavaScript手机端判断浏览器类型的简单示例
    • JavaScript获取 URL 中的参数的简单示例
    • JavaScript以“天”为单位获取响应的时间戳的简单示例
    • JavaScript时间格式化的简单示例

四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。