时间对象及时间戳的运用(时针、倒计时)

748 阅读4分钟

时间对象

时间的获取

 // 1.获取当前时间对象
var date = new Date();  //当前的时间的时间对象,注意下 :这个时间是你的电脑时间,一般用的时间会从服务器获取
console.log(date);

 // 2.时间对象的时间可以设置
 // 2.1设置时间方式一:
 // 参数分别是 年  月(注意:是从0-11月)  日   时  分  秒 
 var date = new Date("2020","7","3");//注意这里的"7"代表8月
 console.log(date);//Mon Aug 03 2020 00:00:00 GMT+0800 (中国标准时间)
 
//2.2设置时间方式二:注意 月份就是 1-12月 
//年份常用连接符号 可以是 - / .
var date = new Date("2020-8-5 14:20:14");//注意这里的8-5 代表8月5日
console.log(date);//Wed Aug 05 2020 14:20:14 GMT+0800 (中国标准时间)

时间的操作

var nowDate = new Date();
console.log(nowDate);//获取当前时间

// 1.获取年份 getFullYear; 注意:都需要加小括号
var year =   nowDate.getFullYear();
console.log(year);
// 2.获取月份 ; 尤其注意 月份是 0-11 也是索引
var month = nowDate.getMonth();
console.log(month+1);  // 获取的月份 一定要加1 才是现在的月份
// 3. 获取天 getDate
 var day = nowDate.getDate();
 console.log(day);
// 4.获取星期 getDay
var day = nowDate.getDay(); //尤其要和获取天区分开;星期日是执行0,其余正常1-6;
console.log(day);
// 5.获取时 : 24小时制
var hour = nowDate.getHours();
console.log(hour);
// 6.获取分 :
var minute = nowDate.getMinutes();
console.log(minute);
// 7.获取秒 
var second = nowDate.getSeconds();
console.log(second);

总结:获取月份时,尤其注意 月份是 0-11 也是索引,执行是必须加1;
注意区分天date和星期day;

一、写一个时钟的js

1.获取当前的时 、分、 秒;

2.分钟 = 秒转成分 + 当前的分;

3.小时 :分转成小时 + 当前小时的时间;

//这个版本每次刷新一下页面会从0点等到持续1秒后再执行当前时间转动,用户体验感不太好
setInterval(function(){
	var date = new Date(); //当前是的时间对象 电脑时间
	var msecond = date.getMilliseconds(); // 获取毫秒数		
	var second = date.getSeconds()+msecond/1000;  // 获取当前的秒
	var minute = date.getMinutes() + second / 60;  // 获取当前分 + 当前秒的时间
	var hour = date.getHours() + minute / 60; //获取当前小时 + 当前分和秒所占的小时数;
// var myhour =  date.getHours()>12?date.getHours()-12:date.getHours();
// 算角度 
var dsecond = second / 60 * 360+msecond/1000;;  //秒所占的角度
var dminute = minute / 60 * 360;  //分所占的角度
var dhour = hour / 12 * 360;
hourEle.style.transform = "rotate(" + dhour + "deg)";
minuteEle.style.transform = "rotate(" + dminute + "deg)";
secondEle.style.transform = "rotate(" + dsecond + "deg)";
},1000)
		
//稍微优化下版本
var run = function () {
var date=new Date();  // 获取当前的时间;
var msecond = date.getMilliseconds(); // 获取毫秒数	
var second = date.getSeconds()+msecond/1000;  // 获取当前的秒
var minute = date.getMinutes() + second / 60;  // 获取当前分 + 当前秒的时间
var hour = date.getHours() + minute / 60;//获取当前小时 + 当前分和秒所占的小时数;

//计算角度
var dsecond = second / 60 * 360;  //秒所占的角度
var dminute = minute / 60 * 360;  //分所占的角度
var dhour = hour / 12 * 360;
//第一位是id名
hourEle.style.transform = "rotate(" + dhour + "deg)";
minuteEle.style.transform = "rotate(" + dminute + "deg)";
secondEle.style.transform = "rotate(" + dsecond + "deg)";
}
run(); // 浏览器一进入的时候就会 先执行一次
setInterval(run,1000);// 先没有执行 需要等到 1秒之后才会间隔执行

二、时间戳

时间戳 : 一个时间距离格林威治时间(1970年1月1日0时0分0秒)的毫秒数 ;

如何获取时间戳 : 时间对象.getTime();

var date = new Date();
var time = date.getTime();
console.log(time);  //当前的时间戳 就是 当前时间 距离 格林威治时间的毫秒数。

时间戳的用处:可以做2个时间之间的实际差 ;或者是倒计时 、秒杀。

注意 :时间戳在js里是毫秒,在很多后台传过来的时间戳是秒。

三、做一个倒计时

一般获取时间会通过服务端获取

function fn(){
            var mdate=new Date("2021-8-29 08:36:25")
            var nowdate=new Date();
            var mtimeStamp=mdate.getTime();
            var nowtimeStamp=nowdate.getTime();
            var time=(mtimeStamp-nowtimeStamp)/1000;//两者间隔时间差
        }
          
        function run() {
            // 1.全国上学时间对象 :
            var mdate = new Date("2021-09-01 09:00:00");  //周一上午9点 
            // console.log(mdate);
            // 2.现在的时间对象
            var nowDate = new Date();  //现在的时间对象

            // 3.获取对象的时间戳 ,计算中间的时间差 
            var mtimeStamp = mdate.getTime();  //周一上课的时间戳;
            var nowTimeStamp = nowDate.getTime(); //当前时间的时间戳;

            // 距离周一的时间差  
            var time = parseInt((mtimeStamp - nowTimeStamp) / 1000);//时间戳计算出的是毫秒,我们要转化成秒,再来做以下的天/时/分/秒转化。
            //  console.log(time);
            // 算出天数
            var day = parseInt(time / 3600 / 24);
            // console.log(day);
            // 算出小时数
            var hour = parseInt(time / 3600) % 24
            // console.log(hour);
            // 算出分钟
            var minute = parseInt(time / 60) % 60;
            // console.log(minute)
            // 算出秒
            var second = parseInt(time % 60);
            // console.log(second);
            // document.write("距离周一上课还有" + day + "天" + hour + "小时" + minute + "分钟" + second + "秒");//每一秒执行一次,重复写一次

            // 替换html代码
            document.body.innerHTML = "距离周一上课还有" + day + "天" + hour + "小时" + minute + "分钟" + second + "秒";
        }
        setInterval(run, 1000);//时间间隔 每1秒执行一次

总结思路:把2个需要倒计时的时间获取到对应的 时间戳 ,然后再计算2个时间中的时间差(),最后把时间差转成对应的天/小时/分钟/秒。