js定时器实现倒计时效果实例分析

本文主要为大家详细介绍了js定时器实现倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

日期函数

js定时器实现倒计时效果实例分析

倒计时 =  用 将来的时间  –   现在的时间 

问题:将来时间 距离 1970 毫秒数   –     现在距离 1970年1           

用将来的毫秒数 –  现在的毫秒数   不断转换就可以了

nbsp;html>     body{   font-size:30px;   text-align: center;   color:red;  }    window.onload = function(){   var demo = document.getElementById("demo");   var endTime = new Date("2017/11/12 17:30:00"); // 最终时间   setInterval(clock,1000); // 开启定时器   function clock(){    var nowTime = new Date(); // 一定是要获取最新的时间    // console.log(nowTime.getTime()); 获得自己的毫秒    var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);    // 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的 还剩下的秒 可能处不断 取整    // console.log(second);     // 一小时 3600 秒    // second / 3600 一共的小时数 /24 天数    var d = parseInt(second / 3600 / 24); //天数    //console.log(d);    var h = parseInt(second / 3600 % 24) // 小时    // console.log(h);    var m = parseInt(second / 60 );    //console.log(m);    var s = parseInt(second ); // 当前的秒    console.log(s);    /* if(d<10)    {     d = "0" + d;    }*/    d<10 ? d="0"+d : d;    h<10 ? h="0"+h : h;    m<10 ? m="0"+m : m;    s<10 ? s="0"+s : s;    demo.innerHTML = "距离抢购时间还剩: "+d+"天 "+h+"小时 "+m+"分钟 "+s+"秒";   }  } 

登录后复制

更多内容请参考:js实现倒计时功能汇总

相关推荐:

h5的定时器怎样实现进度条功能

javascript基于定时器实现进度条功能实例

jQuery扇形定时器插件pietimer使用方法分享

以上就是js定时器实现倒计时效果实例分析的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2790446.html

(0)
上一篇 2025年3月8日 18:56:46
下一篇 2025年3月6日 15:26:52

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript实现音乐自动切换和轮播实例教程

    本文主要为大家详细介绍了javascript实现音乐自动切换和轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 前言:前两天有个同学问我音乐自动切换,并在所有歌曲都播放完成以后实现循环播放的效果。自己折腾了一下…

    编程技术 2025年3月8日
    200
  • JavaScript实现三级级联特效实例分享

    本文主要介绍了javascript实现三级级联特效,选择省会出现相应的县下拉框,同时市的下拉框改变,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。 nbsp;html>                      …

    编程技术 2025年3月8日
    200
  • vue.js快速搭建图书管理平台实例

    vue.js是当下很火的一个javascript mvvm(model-view-viewmodel)库,它是以数据驱动和组件化的思想构建的。相比于angular.js,vue.js提供了更加简洁、更易于理解的api,使得我们能够快速地上手…

    2025年3月8日
    200
  • 浏览器调试动态js脚本的方法图解教程

    本文主要介绍了浏览器调试动态js脚本的方法,文中给大家带来两种调试方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家。 前两天拉取公司前端代码修改,发现在开发者工具的sources选项里边,居然没有列出来我要调试的js…

    2025年3月8日 编程技术
    200
  • JS实现碰撞检测实例详解

    本文主要介绍了js实现碰撞检测的方法,结合实例形式分析了javascript碰撞检测的原理与相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考,具体如下: 一个简单的碰撞检测例…

    2025年3月8日
    200
  • node.js文件上传重命名以及移动位置详解

    本篇文章主要介绍了node.js文件上传重命名以及移动位置的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 一个关于node上传文件的例子,下面是前端代码,  doUpload() {  var for…

    编程技术 2025年3月8日
    200
  • Vue.js的组件和模板详解

    指令是vue.js中一个重要的特性, 主要提供了一种机制将数据的变化映射为dom行为。下面通过本文给大家分享vue.js的组件和模板,需要的朋友参考下吧,希望能帮助到大家。 摘要: 指令是Vue.js中一个重要的特性, 主要提供了一种机制将…

    2025年3月8日 编程技术
    200
  • JS获取数组中出现次数最多元素的方法详解

    本文主要介绍了js获取数组中出现次数最多及第二多元素的方法,涉及javascript针对数组的遍历、排序、判断、查询等相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 整型数组中出现次数最多和第二多的元素 用哈希数组 function…

    2025年3月8日
    200
  • JavaScript优先队列与循环队列实例详解

    本文主要介绍了javascript数据结构之优先队列与循环队列,结合实例形式较为详细的分析了javascrip数据结构中优先队列与循环队列的原理、定义与使用方法,需要的朋友可以参考下,希望能帮助到大家。 优先队列 实现一个优先队列:设置优先…

    2025年3月8日
    200
  • JavaScript实现报警器提示音效果详解

    本文主要给大家分享分享一段代码基于javascript实现报警器提示音效果,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。 原型图: 项目需求: 服务器接受到报警后将消息推送到前台,(通过前端实时消息提示的效果-webs…

    2025年3月8日
    200

发表回复

登录后才能评论