美文网首页
通用倒计时写法

通用倒计时写法

作者: 蜗牛和曼巴 | 来源:发表于2018-10-27 14:07 被阅读0次

html部分

<div>
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0</span>
<span>:</span>
<span>0</span>
<span>0</span>
</div>

js部分

window.onload=function () {

  timeGo();

  // 倒计时

function timeGo() {

  // 要到计的总时间 - 单位 s 秒

  var time = 10000;

  // 获取时间标签

  var spans = document.querySelectorAll(".time>span");

  setTimeHtml();

  // 开启定时器 time--

  var timeId = setInterval(function () {

    time--;

    setTimeHtml();

  }, 1000);

  function setTimeHtml() {

    // 获取小时

    var hour = parseInt(time / 60 / 60);

    // 获取分钟

    var mins = parseInt(time / 60 - hour * 60);

    // 秒

    var seconds = time - hour * 60 * 60 - mins * 60;

    // 4:5:10  04:05:10

    // if 数组做判断 。。。。。

    // 4/10=0.4  14/10=1.4

    var hour0 = parseInt(hour / 10);

    var hour1 = hour % 10;

    // 分钟

    var mins0 = parseInt(mins / 10);

    var mins1 = mins % 10;

    // 秒

    var seconds0 = parseInt(seconds / 10);

    var seconds1 = seconds % 10;

    // console.log(hour0, hour1, mins0, mins1, seconds0, seconds1);

    spans[0].innerHTML = hour0;

    spans[1].innerHTML = hour1;

    spans[3].innerHTML = mins0;

    spans[4].innerHTML = mins1;

    spans[6].innerHTML = seconds0;

    spans[7].innerHTML = seconds1;

    // 是否到时间了

    if (time == 0) {

      clearInterval(timeId);

      console.log("时间到了");

    }

  }}

}

相关文章

  • 通用倒计时写法

    html部分 js部分

  • Binary search

    通用写法

  • makefile

    项目文件目录为: makefile通用写法:

  • 定时器

    1定时器 写法: 倒计时:

  • js插件通用写法

    主要思想:1.创建js对象 -- 混合使用构造函数和原型模式2.闭包防止全局污染代码 例子如下:没有具体实现什么,...

  • 这9个单例被破坏的事故现场,你遇到过几个?

    本文节选自《设计模式就该这样学》 1 通用单例写法带来的弊端 我们看到的单例模式通用写法,一般就是饿汉式单例的标准...

  • Django 框架之 通用视图

    知识点 通用视图概念和基本用法 基于类的视图的分类、写法和使用 简介 通用试图概念 通用视图是Django为解决建...

  • 倒计时

    ios怎么在cell上添加倒计时 iOS中 简单易懂的秒杀倒计时/倒计时 iOS开发-三种倒计时的写法 iOS实现...

  • 自定义Popwin

    我的写法 使用 点击事件直接在activity的onClick方法中使用 同事写法 三个底部按钮通用 popwin...

  • mybatis通用列sql写法

    问题描述: 写法:

网友评论

      本文标题:通用倒计时写法

      本文链接:https://www.haomeiwen.com/subject/imldtqtx.html