IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 倒计时案例 JavaScript -> 正文阅读

[JavaScript知识库]倒计时案例 JavaScript

一、Date内置对象(时间戳)

在做倒计时之前我们要了解 Date内置对象
该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数。
创建一个新Date对象的唯一方法是通过new 操作符
例如:

let now = new Date();

若将它作为常规函数调用(即不加 new 操作符),将返回一个字符串,而非 Date 对象。

有三种方法获得总的毫秒数
如下:

// 1. 通过 valueOf()  getTime()
        var date = new Date();
        console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());
        // 2. 简单的写法 (最常用的写法)
        var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
        console.log(date1);
        // 3. H5 新增的 获得总的毫秒数
        console.log(Date.now());

运行截图为:在这里插入图片描述
注意:时间一直在不断的变化 这四个值有时可能不同是因为程序执行也要时间

二、倒计时案例

算法思想 用结束时间减现在时间等于倒计时时间
用毫秒数相减 就不会出现 11.02-10.50 负数的情况
最后再把毫秒数转化为 天时分秒
毫秒要先除以1000转化为秒
秒/60=分/60=时/24=天
因为可能除出来是小数
所以用到了%给它取余 取整
具体代码实现:

 function countdown(time) {
      var nowtime = +new Date(); // +new Date()  返回的就是现在时间总的毫秒数
      var deadline = +new Date(time); //返回的是用户输入的时间总的毫秒数
      var count = (deadline - nowtime) / 1000; //count 就是剩余时间总的秒数
      //parseInt(string, radix)   解析一个字符串并返回指定基数的十进制整数 要被解析的值。
//如果参数不是一个字符串,则将其转换为字符串
      var day = parseInt(count / 60 / 60 / 24); //把秒数转化成天数
      var hours = parseInt(count / 60 / 60 % 24); //转化成小时
      //能被24整除的就是0点整 不能整除的取余数就是几点整
      hours = hours > 9 ? hours : '0' + hours; //三目运算符  如果hours>9就执行 hours  否则执行 '0'+hours
      //加上三目运算符的目的是 把时间输出成 08 01 这种情况
      var minutes = parseInt(count / 60 % 60); //分
      minutes = minutes > 9 ? minutes : '0' + minutes;
      var seconds = parseInt(count % 60); //秒
      seconds = seconds > 9 ? seconds : '0' + seconds;
      var a = '倒计时:' + day + '天' + hours + '小时' + minutes + '分' + seconds + '秒';
      console.log(a);
    }
    countdown('2022-5-8 21:00:00'); //这里是结束时间 需要用户自己输入

当前时间:
在这里插入图片描述

结束时间
2022-5-8 21:00:00

代码运行结果:
倒计时:
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-08 07:59:01  更:2022-05-08 08:00:08 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:45:36-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码