js实现倒数 —— ‘剩下多少天多少秒’

一、开始

  这个星期二去面试时遇到一道这样的题目"请用js实现距离XX还剩……天……小时……秒",当时只是觉得创建一个数据保存下每个月有多少天,再去获取天数相减就可以了。

  当时只是为了解决这个问题,并没有细想,现在觉得这种方法过于繁琐,而且还有闰年的问题。

  现在我重新写一下这个方法,用时间戳来解决这个问题。

二、时间戳

  什么是时间戳呢?时间戳其实就是现在的时间距离格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒豪数。

  注意北京时间有八个小时的误差,所以我们直接new Date(2018-01-01)其实是2018年1月1日的八点,所以我们要指定时间。

三、实现

  比如我们写一个方法计算我们距2018年还有多少天:

function dateCount(){
        // 获取现在的时间
        var date = new Date();
        // 2018的第一天
        var until = new Date(‘2018-01-01 00:00:00‘);
        // 计算时会发生隐式转换,调用valueOf()方法,转化成时间戳的形式
        var days = (until - date)/1000/3600/24;
        // 下面都是简单的数学计算
        var day = Math.floor(days);
        var hours = (days - day)*24;
        var hour = Math.floor(hours);
        var minutes = (hours - hour)*60;
        var minute = Math.floor(minutes);
        var seconds = (minutes - minute)*60;
        var second = Math.floor(seconds);
        var back = ‘距离2018年还剩下‘+day+‘天‘+hour+‘小时‘+minute+‘分钟‘+second+‘秒‘;
        return back;
    }

  然后再用setInterval()方法实现实时倒数

setInterval(function(){
        var text = dateCount();
        // show是一个节点
        show.innerText = text;
},1000)

  这样就实现了倒数:

时间: 2024-10-16 09:58:03

js实现倒数 —— ‘剩下多少天多少秒’的相关文章

用js在网页上完成倒计时3秒后自动跳转到另一个页面

<body> <div id="time"></div> <a href="#" onclick="stop()">停止</a> <script type="text/javascript"> var i=3; function changeTime(){ document.getElementById("time").innerHTM

js 同for一样效果 (延迟)每秒循环一次 追加

<script type="text/javascript"> var j = 1;        var timeID = null;        function display() {            timeID = window.setInterval("delay()", 1000);        }        function delay() {            if (j < 1000) {           

js获取指定时间的前几秒

//指定时间减2秒 function reduceTwoS(dateStr){//dateStr格式为yyyy-mm-dd hh:mm:ss var dt=new Date(dateStr.replace(/-/,"/"));//将传入的日期格式的字符串转换为date对象 兼容ie // var dt=new Date(dateStr);//将传入的日期格式的字符串转换为date对象 非ie var ndt=new Date(dt.getTime()-2000);//将转换之后的时间减

Js 日期 多少分钟前,多少秒前

;(function(window){ /** * [dateDiff 算时间差] * @param {[type=Number]} hisTime [历史时间戳,必传] * @param {[type=Number]} nowTime [当前时间戳,不传将获取当前时间戳] * @return {[string]} [string] */ var dateDiff = function(hisTime,nowTime){ if(!arguments.length) return ''; var

js学习笔记之日期倒计时(天,时,分,秒)

<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS实现倒计时(时.分,秒)</title> <script> function ShowCountDown(year,month,day,divname) { var now = new Date(); var endDate = new Date(year, month, day)

JS 倒计时实现代码(时、分,秒)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>JS实现倒计时(时.分,秒)</title> <script language="javascript" type="text/javascript"> var interval = 1000; fun

js案例

1.开关灯效果: var oBody = document.getElementById("bodyEle"); oBody.onclick= function () { var bg=this.style.backgroundColor; switch(bg){ case "white": this.style.backgroundColor="blue"; break; case "blue": this.style.ba

node.js内存缓存的性能情况

1. WEB 服务性能测试和优化 1.1   测试环境搭建 网络环境:内网 压力测试服务器: 服务器系统:Linux 2.6.18 服务器配置:Intel® Xeon™ CPU 3.40GHz 4 CPUS 内存:6GB 反向代理服务器:Nginx服务器 服务器系统:Linux 2.6.18 服务器配置:Pentium® Dual-Core CPU E5800 @ 3.20GHz 2CPUS 内存:2GB 发包服务器: 发包工具:apache 2.2.19自带的ab测试工具 服务器系统:Linu

js DOM优化相关探索

我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的事情,这就需要我们尽量改进自己的代码,让我们想做的事情尽量在js中做的差不多了在去跟dom打交道. 下面的小例子就说明了问题: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charse