时间对象、格式化时间对象 设置时间对象 计算时间差 浏览器的前进与后退 浏览器地址信息 浏览器的oncsroll事件

133 阅读2分钟

时间对象:

语法: var timer = new Date();

var timer = new Date()   // 默认获取到当前时间
console.log(timer)

var timer1 = new Date('2022-11-1 12:13:14') // 获取到指定时间
console.log(timer1)

时间对象接收参数有两种格式

//  1. 数字
var timer = new Date(2008, 00, 20, 12, 13, 14)  // 参数顺序为  年 - 月 - 日  时 - 分 - 秒
console.log(timer);  
//2. 字符串
var timer1 = new Date('2008-01-20 13:14:15') // 年-月-日 时:分:秒
console.log(timer2);

格式化时间对象

        var time = new Date();
        //获取年
        var year =  time.getFullYear();
        console.log(year);
        //获取月
        var month = time.getMonth();
        console.log(month);
        //获取周
        var week = time.getDay();
        console.log(week);
        //获取天
        var day = time.getDate();
        console.log(day);
        //获取小时
        var hours = time.getHours();
        console.log(hours);
        //获取分钟
        var minutes = time.getMinutes();
        console.log(minutes);
        //获取秒
        var seconds = time.getSeconds();
        console.log(seconds);

设置时间对象

// 语法:时间对象.setXXX();

计算时间差

var time = new Date(); console.log(time);

   //设置年份
    time.setFullYear(2003);
    //获取年份
    var year = time.getFullYear();
    console.log(year);

    //设置月份
    time.setMonth(7);
    //获取月份
    var month = time.getMonth();
    console.log(month);

    //设置时
    time.setHours(4);
    //获取小时
    var hours = time.getHours();
    console.log(hours);

    // 设置分
    time.setMinutes(7)
    //获取分钟
    var minutes = time.getMinutes();
    console.log(minutes);

    //设置秒
    time.setSeconds(58);
    //获取秒
    var seconds = time.getSeconds();
    console.log(seconds);

    // 无设置周方法

    //设置毫秒
    time.setMilliseconds(999);
    var millie = time.getMilliseconds();
    console.log(millie);

    //直接设置距离 1970 的总毫秒
    time.setTime(123456789);
    console.log(time.getTime());
        //获取两个指定的时间
        var prevTime = new Date('2022-10-20 0:0:0');
        var currentTime = new Date();

        // 获取两个指定时间的总毫秒数
        var prevTimeMillie = prevTime.getTime();  // 指定时间
        var currentTimeMillie = currentTime.getTime();  //当前时间

        //获取两个时间总毫秒数的和
        var time = currentTimeMillie - prevTimeMillie;  //当前时间 - 指定时间

        /**
         * 思路:
         * 1000毫米 = 1秒 
         * 1分钟 =  1000*60
         * 1小时 = 1000*60*60
         * 一天 = 1000 *60*60*24
         * 
         * 剩余秒数 天 time = 总毫秒数 - 天数*一天毫秒数        
         *          小时  time = 剩余毫秒 - 小时*一小时毫秒数
         *          分钟 time = 剩余毫秒 - 分钟*一分钟毫秒数
         *          秒 time = 剩余毫秒数 - 秒数*一秒毫秒数
         *         
        */
        //计算天
        var oneDayMillie = 1000 * 60 * 60 * 24;
        var day = parseInt(time / oneDayMillie);

        //计算天后剩余的毫秒数
        time = time - day * oneDayMillie;

        // 计算小时
        var oneHoursMillie = 1000*60*60;
        var hours = parseInt(time / oneHoursMillie);

        //计算小时后剩余的毫秒数
        time = time - hours * oneHoursMillie;

        // 计算分
        var oneMinutesMillie =  1000*60;
        var minutes = parseInt(time / oneMinutesMillie);

        // 计算分钟后剩余的毫秒数
        time = time - minutes*oneMinutesMillie

        //计算秒
        var oneSecondsMillie = 1000;
        var seconds = parseInt(time / oneSecondsMillie);
        


        console.log(`现在过了${day}${hours}小时 ${minutes}分钟 ${seconds}秒`);

浏览器的前进与后退

window.history.back();  //后退 (必须有一次前进才能有后退)
window.history.forward();  //前进 (必须有一次后退才能前进)

浏览器地址信息

// window.location.href = '网址'
setTimeout(function(){
            window.location.href = 'https://www.baidu.com/?tn=21002492_29_hao_pg'
        },3000)  // 三秒后打开网页

浏览器的oncsroll事件

浏览器的滚动距离
         因为是页面滚动,所以需要document 对象求做获取滚动的距离
         方法:
         document.body.scrollTop   在浏览器没有声明<!DOCTYPE html>
         document.documentElement  在浏览器  声明<!DOCTYPE html>
window.onscroll = function(){
    console.log('开始滚动~~~');
            //上下滚动
               console.log('document.body.scrollTop:',document.body.scrollTop,'document.documentElement:',document.documentElement);
            //左右滚动
            console.log('document.body.scrollLeft:',document.body.scrollLeft,'document.documentElement:',document.documentElement);
        }