时间对象案例数学方法 1.random 语法：Math.random() 范围是 [0,1) 0-1之间包左不包右

案例

假设 str 存储的是后端反馈给我们的一个信息
            var str = 'username=靓仔&age=18&qq=88888888'

            需求1:
                将
                'username=靓仔&age=18&qq=88888888'
                更改为
                {
                    username: '靓仔',
                    age: 18,
                    qq: 88888888
                }

            需求2:
                将
                {
                    username: '靓仔',
                    age: 18,
                    qq: 88888888
                }
                更改为
                'username=靓仔&age=18&qq=88888888'

方法一
var str = 'username=靓仔&age=18&qq=88888888';
        var obj = {};
        //准备一个空数组
        var str = str.replace('=', ',')
        var str = str.replace('=', ',')
        var str = str.replace('=', ',')
        var str = str.replace('=', ',')
        // 把'='取掉
        // console.log(str)
        str = str.replace('&', ',');
        str = str.replace('&', ',');
        str = str.replace('&', ',');
        str = str.replace('&', ',');
        // 把 '&'去掉
        // console.log(str)
        var arr1 = str.split(',');
        // 转换成数组
        // console.log(str1)
        arr1[3] = Number(arr1[3])
        arr1[5] = Number(arr1[5])
        // 将 18 和88888888 转变为字符串
        for (var i = 0; i < arr1.length; i++) {
            // 遍历数组
            var tet = arr1.splice(i, 1)
            // 将每个剪切出来的值放到一个变量里面
            obj[tet] = arr1[i]
            // 这个变量作为对象的键
            // 利用数组塌陷缺陷将这个数组里面的项作为对象的值
            // 两者建立联系
        }
        console.log(obj);


        // ================================================================================

        //     需求2:
        // 将
        // {
        //     username: '靓仔',
        //     age: 18,
        //     qq: 88888888
        // }
        // 更改为
        // 'username=靓仔&age=18&qq=88888888'
        var obj = {
            username: '靓仔',
            age: 18,
            qq: 88888888
        }
        var arr = [];
        obj['age'] = String(obj['age'])
        obj['qq'] = String(obj['qq'])
        // 将age 和qq的值转变为字符串
        for (var k in obj) {
            arr[arr.length] = k;
            arr[arr.length + 1] = obj[k];
        }
        // 通过遍历对象将对象的键和值按顺序放到数组中
        str = arr.join('=');
        // 利用得出的数组里面有空格,
        // 并且转换为字符串
        str = str.replace('==', '*')
        str = str.replace('==', '*')
        str = str.replace('==', '*')
        str = str.replace('==', '*')
        str = str.replace('=', '&')
        str = str.replace('=', '&')
        str = str.replace('=', '&')
        str = str.replace('=', '&')
        str = str.replace('*', '=')
        str = str.replace('*', '=')
        str = str.replace('*', '=')
        str = str.replace('*', '=')
        // 将中间的符号转变过来
        console.log(str);

方法二
/**
         *  1. 将字符串拆分开
         *      1.1 username=靓仔
         *      1.2 age=18
         *      1.3 qq=88888888
         *  2. 想办法得到 username 与 靓仔
         *      2.1 利用循环 将每一个字符串 中的 = 作为分隔符, 然后拆分开
         *  3. 得到对应的属性名与属性值后, 添加到一个对象中
        */

        // 1. 将字符串拆分开
        var arr = str.split('&')
        // console.log(arr)

        var obj = {}

        // 2. 利用循环 将每一个字符串 中的 = 作为分隔符, 然后拆分开
        arr.forEach(function (item) {
            var newArr = item.split('=')

            // 3. 得到对应的属性名与属性值后, 添加到一个对象中
            obj[newArr[0]] = newArr[1]
        })

        console.log(obj)

        /**
         *  需求2
         *      1. 遍历对象, 拿到对象的属性名与属性值
         *      2. 拼接到字符串中
        */

        // 1. 遍历对象, 拿到对象的属性名与属性值

        var newStr = ''
        for (var k in obj) {
            // console.log(k, obj[k], obj.k)

            // username=靓仔&age=18&qq=88888888
            // newStr = newStr + k + '=' + obj[k] + '&'
            newStr += k + '=' + obj[k] + '&'
        }
        newStr = newStr.slice(0, -1)
        // newStr = newStr.slice(0, newStr.length - 1)


        console.log(newStr)

数学方法

1.random

语法：Math.random() 范围是 [0,1) 0-1之间包左不包右
作用:返回一个 0~1 之间的随机数, 包含0不包含1 值为 0.99999999999999999999999999

代码演示：
var num = Math.random()
        console.log(num)

round
- 将一个小数进行四舍五入取整
- 注意:当数字为负数时,忽略四舍五入,并且向上取整

代码演示：
        console.log(Math.round(2.4));// 2
        console.log(Math.round(2.5));//3
        console.log(Math.round(-2.3));//-2
        console.log(Math.round(-2.5));//-2

ceil();
- 作用:将一个小数向上取整(它大的最小整数)

代码演示：
        console.log(Math.ceil(1.9))//2
        console.log(Math.ceil(1.000001))//2
        console.log(Math.ceil(-1.000001))//-1

floor
作用:将一个小数进行向下取整

代码演示：
        console.log(Math.floor(1.9))//1
        console.log(Math.floor(1.000001))1

abs
- 作用:绝对值
- 返回值:在数轴上点到原点的 "距离"

        console.log(Math.abs(10))//10
        console.log(Math.abs(-10))//-10

sqrt 作用：求一个数字的平方根

var num = Math.sqrt(9);
        console.log(num);  // 3  
        // 9 开根号 取正数 为 3

pow 作用：求数据的几次方

var num = Math.pow(3, 4)    // 求 数字 3 的 4 次幂
        console.log(num)// 81
        //  3**4    相当于3的4次方

max 作用：求一组数据中的最大值

var num = Math.max(10, 20, 100, 37, 50)
        console.log(num)  //  100

min 作用：求一组数据中的最小值

    var num1 = Math.min(10, 20, 100, 37, 50)
        console.log(num1) // 10

PI 求 Π的值

console.log(Math.PI)//3.141592653589793

小案例

封装一个函数，求0~10之间的随机整数

function fn() {
        /* 向下取整  0 ~ 0.99999*/
    // Math.random()  计算出一个随机数
            var num =parseInt(10 * Math.random());
    // 10 * Math.random()   将这个随机数放大 10 倍
    // 没有10
             console.log(num);

        //  优化版
          var num = Math.floor(11 * Math.random())
         11 * Math.random()   将这个随机数放大 11 倍
    //  例如:  0.65 * 11 = 7.15
    // 0.99 * 11 =10.89
    // Math.floor(10.89)  = 10
            console.log(num);
        }
        fn();

方法二
   
        function fn(){
            //   1. 先计算出一个随机数
                var num = Math.random() // 0~0.9999999
                //  2. 将随机数放大 10 倍
                num = num * 10
                //  3. (四舍五入取整)
                num = Math.round(num)
            //  0~ 0.499  0
            //  0.599~ 1.499  1
            //  1.5 ~2.499    2
            //  .....
            //   8.5~9.499   ->      9
            //   9.499~9.99  ->      10
            return num
            //  return  作用是返回值  即 返回值(最后结果)给调用 然后放到变量里面然后在打印出来
        }
        var tet = fn();
        console.log(tet);

优化二
/*
        向上去整  0~9.999
        */
        var num1 = Math.ceil(Math.random() * 10)
        console.log(num1);

分析总结:
// 封装一个函数，求0~x之间的随机整数
        function fn(x) {
            var num = Math.floor((x + 1) * Math.random())
            //  例如:  0.65 * 11 = 7.15
            console.log(num);
        }
        fn(10);

随机数的和

     var obj = {}
            // 随机数的和
            for (var i = 0; i < 100000; i++) {
                var num = fn()
                // 将返回的值放到num中 
                // num 的范围是 0 到 10;
                if (obj[num] === undefined) {
                    // 判断如果没有
                    obj[num] = 1
                } else {
                    obj[num]++
                    // 如果有加上上一次的值求和
                }
            }

            console.log(obj)

时间对象

在 JS 中给我们提供了一个内置的构造函数
- 不传参数, 直接获取当前时间
  - var timer = new Date() 注意 “ Date ” 书写()
  - console.log(timer)
  - Thu Mar 16 2023 14:08:31 GMT+0800 (中国标准时间)
- 传递参数, 传递一个字符串进去
  - var timer = new Date('2022-3-16 12:13:14')
  - console.log(timer)
  - Wed Mar 16 2022 22:30:00 GMT+0800 (中国标准时间)
  - 获取我们指定的时间
- 传递参数, 传递数字进去, 最少传递两个数字

var timer = new Date(2022, 0, 31, 12, 13, 14)  
// 注意点! 在 JS 中, 月份的表示是从0~11的, 也就是说, 1月代表的是0
        console.log(timer)

只有 (2022, 2 , 16, 31, 8,30,55)的时候注意得到的数字 == (真实的)月份 - 1 注意点! 在 JS 中, 月份的表示是从0~11的, 也就是说, 1月代表的是0

时间对象的获取类方法

var time = new Date();
                // 获取当前时间戳
                console.log(time.getFullYear());//2023
                // 注意驼峰命名法则
                // 获取当前年份
                console.log(time.getMonth());//02 
                // 获取当前月份
                console.log(time.getDate());// 16 日期
                // 获取当前哪一天
                console.log(time.getDay());// 4
                // 获取当前周几
                console.log(time.getHours()); // 14
                // 获取当前几时
                console.log(time.getMinutes());//31
                // 获取当前几分
                console.log(time.getSeconds());//46
                //获取当前几秒
                console.log(time.getMilliseconds());//634
                // 获取当前毫秒数
        // ===============================================================
                console.log(time.getTime());//1678948306634
        // 获取当前毫秒数 
        // 时间戳 是1970年的1月1日0时0分秒到现在的秒数

时间对象的设置类方法

 var timer = new Date();
        // 获取的是当前时间戳
        // 设置时间
        timer.setFullYear(2020)
        console.log(timer.getFullYear());//2020
        // 注意驼峰命名法则
        // 设置当前年份
        timer.setMonth(7)
        console.log(timer.getMonth());//7 
        // 设置当前月份
        timer.setDate(16)
        console.log(timer.getDate());// 16 日期
        // 设置当前哪一天
        timer.setHours(16)
        console.log(timer.getHours()); // 16
        // 设置当前几时
        timer.setMinutes(20)
        console.log(timer.getMinutes());//20
        // 设置当前几分
        timer.setSeconds(50)
        console.log(timer.getSeconds());//50
        //设置当前几秒
        timer.setSeconds(266)
        console.log(timer.getMilliseconds());//266
        // 设置当前毫秒数
        timer.setTime(1678948306634)
        console.log(timer.getTime());//1678948306634
        // 获取当前毫秒数  
        // 时间戳 是1970年的1月1日0时0分秒到现在的秒数 

        timer.setDay(5)
        console.log(timer.getDay());// 5
        // 设置当前周几
        // JS 中没有提供修改周几的方法

小案例

小案例:
    计算两个日期的时间差
    比如: 当前时间距离: 2023-3-19 8:30:45  之间相差 x 天 y 时 分 q 秒
    使用两个时间的毫秒数的差值去计算相差的天时

// 逻辑:
//             1. 创建两个时间对象
//             2. 计算两个时间对象的毫秒数差值
//             3. 利用这个差值, 计算这里有多少完整的天
//             parseInt(差值(总毫秒数) / 一天的毫秒数)
//             4. 用剩余不足一天的总毫秒数, 去计算时分秒


方法一
// 创建两个时间对象
        var time = new Date('2023-03-19 08:30:45');  这种格式
        var time = new Date(2023, 2, 19, 8, 30, 45)  // 注意月份=真实月份数-1
        var secondes = time.getTime()
        // 获取指定时间的时间戳  即多少毫秒
        var nowtime = new Date();
        var nowcondes = nowtime.getTime()
        // 获取当前时间戳 当前多少毫秒

        // 计算两个时间对象的毫秒数差值
        var timer = secondes - nowcondes // 转化为毫秒相减
        timer /= 1000;  // 转化为秒  // 注意换算单位
        // console.log(timer);

        var getDates = parseInt(timer / 60 / 60 / 24) //天
        var getHours = parseInt(timer / 60 / 60 % 24) //小时
        var getminutes = parseInt(timer / 60 % 60) // 分钟
        var getSecondes = parseInt(timer % 60) // 秒

        console.log(`相差${getDates}天${getHours}小时${getminutes}分${getSecondes}秒`);
        //相差2天16小时59分31秒


方法二
       // 1. 创建两个时间对象
        var currentTime = new Date()
        var prevTime = new Date(2023, 2, 19, 8, 30, 45)
        
        // 2. 计算两个时间对象的毫秒数差值
        var time = prevTime.getTime() - currentTime.getTime()
        
        // 3. 利用这个差值, 计算这里有多少完整的天
        var oneDay = 1000 * 60 * 60 * 24
        var day = parseInt(time / oneDay)

        // 3.1 计算去掉完整天数的毫秒数
        time = time - (day * oneDay)

        // 4. 用剩余不足一天的总毫秒数, 去计算时分秒

        // 4.1 时
        var oneHours = 1000 * 60 * 60
        var hours = parseInt(time / oneHours)
        // 计算不足一小时的毫秒数, 能够用它计算有多少分钟, 多少秒
        time = time - (hours * oneHours)

        // 4.2 分
        var oneMinutes = 1000 * 60
        var minutes = parseInt(time/ oneMinutes)
        // 计算不足一分钟的毫秒数, 能够用它计算有多少秒
        time = time - (minutes * oneMinutes)

        // 4.3 秒
        var seconds = parseInt(time / 1000)
        console.log(seconds)

BOM

      browser 浏览器
      object  对象
      model  模型

浏览器对象模型提供了一些操作浏览器的功能
- 获取浏览器的窗口尺寸
- 操作浏览器的页面跳转
- 获取浏览器的地址栏的信息
- 控制页面的刷新,前进后退
- 做一些简单的本地存储
获取浏览器窗口的尺寸 (通过 window 可以操作 BOM)

        var  a = 1200;
        console.log(a);//100
        // 注意:我们在操作BOM的时候,window可以省略不写
        // 建议:全局变量不用加 window，如果使用的是 BOM内的内容，建议加上
        console.log(window);
        console.log(window.a);
        console.log('高度',window.innerHeight);// 当前浏览器高度
        console.log('宽度',window.innerWidth);//  当前浏览器宽度
        console.log('高度',innerHeight);
        console.log('宽度',innerWidth);

浏览器的弹出框
- prompt(输入框) alert(弹出框) confirm(询问框)
  - var num = prompt('请输入一个内容'); console.log(num); //输入框
  - alert('请输入一个内容'); // 弹出框
  - var str1 = confirm('你确定跳转页面吗');
浏览器的地址信息
- 在 window 中, 有一个对象 location, 他是专门用来存储浏览器的地址信息
- location 这个对象中有一个属性是 href 我们可以给他重新赋值一个地址, 实现页面的跳转
- 实现页面的跳转还有一个方法, reload，我们调用之后，可以刷新当前页面
- 还有一个方法, reload, 我们调用之后, 可以刷新当前页面

        console.log(window.location);
        console.log(window.location.href);
        console.log(window.location.href='地址');

通过BOM 获取浏览器的版本信息

js代码从上往下执行
- 浏览器的onload 事件
- 会将内部的代码等到页面所有内容加载完毕后执行

   window.onload =function (){
          console.log('我执行的时候,说明当前的所有内容都加载完毕了');
       }

浏览器滚动事件
window.onscroll = function (){}
4.浏览器的滚动距离
- 思考:浏览器滚动了吗
- 回答:没有滚动,其实是浏览器内的
- 语法1:document.body.scrolltop
- 语法2:document.documentElement.scrolltop
  - 区别:
    1. IE 浏览器(了解)
      - 没有DOCTYPE ,那么使用两个中间任意一个都可以
      - 有DOCTYPE 那么只有使用 documentElement
    2. Chorme 和火狐浏览器
      - 没有DOCTYPE, 用body
      - 有 DOCTYPE, 使用 documentElement
    3. Safari
      - 这两个都不能使用, 使用 window.pageYOffset
浏览器的横向滚动距离
- 语法1: document.body.scrollLeft
- 语法2: document.documentElement.scrollLeft
  区别参考上边的

代码解析：
window.onscroll = function () {
            // console.log('document.body.scrollTop: ', document.body.scrollTop)
            // console.log('document.documentElement.scrollTop: ', document.documentElement.scrollTop)

            
            console.log('document.body.scrollLeft: ', document.body.scrollLeft)
            console.log('document.documentElement.scrollLeft: ', document.documentElement.scrollLeft)
        }

时间对象

案例

数学方法

小案例

随机数的和

时间对象

时间对象的 获取类方法

时间对象的 设置类方法

小案例

BOM

通过BOM 获取浏览器的版本信息

时间对象的获取类方法

时间对象的设置类方法