Math数学对象日期时间对象Date 日期时间常用方法格式化日期时间及案例

最新推荐文章于 2025-06-16 10:02:15 发布

原创最新推荐文章于 2025-06-16 10:02:15 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了JavaScript中的Math对象，用于处理数学问题，以及Date对象，包括创建日期时间对象和常用方法。讨论了如何格式化日期时间，并提供了多个实际案例，如随机数生成、进制转换和日期时间操作等。

Math数学对象

=> 处理数学问题

=> var arr = new Array()

var arr = [10,20]

=> 使用方式: Math.方法名()

var randNum = Math.random() //0-1之间随机数

        // console.log('randNum :',randNum)
        // console.log('randNum :' + randNum)
        // console.log(`randNum :${randNum}`)

        var num = 98.4
        console.log('parseInt(num) :', parseInt(num) ); //取整

        console.log( 'Math.ceil(num) : ', Math.ceil(num) );

        console.log( 'Math.floor(num) : ', Math.floor(num) );
         
        console.log( 'Math.round(num) : ', Math.round(num) );

        var num1 = -98
        console.log( 'Math.abs(num1) : ', Math.abs(num1) );

        console.log('Math.max() :', Math.max(89,79,99));

日期时间对象 Date

=> 提供的内置构造函数，专门用来获取时间的

=> 创建日期时间对象

var timeObj = new Date()

创建指定时间的日期时间对象

var time = new Date('2020-3-10 15:10:35')

var time = new Date(2020,3,10, 15,10,35')

=> 方法

 var date1 = new Date() //当前时间
        console.log(date1); // Thu Dec 02 2021 15:10:35 GMT+0800 (中国标准时间)

        var time1 = new Date('2020-3-10 15:10:35') // 创建指定时间的日期时间对象
        console.log(time1);

日期时间常用方法

 var time = new Date() //当前时间
        console.log('time.getFullYear()  :', time.getFullYear())
        console.log('time.getMonth()  :', time.getMonth()+1)
        console.log('time.getDate()  :', time.getDate())

        console.log('time.getHours()  :', time.getHours())
        console.log('time.getMinutes()  :', time.getMinutes())
        console.log('time.getSeconds()  :', time.getSeconds())

        console.log('time.getDay()  :', time.getDay())
        console.log('time.getTime()  :', time.getTime())

格式化日期时间

Thu Dec 02 2021 15:24:49 GMT+0800 (中国标准时间)

=> 2021-12-02 15:24:49

=> 2021年12月02日 15:24:49

=> 2021/12/02 15:24:49

function formateCurrentDate() {
            var time = new Date() //当前日期时间对象
            var year = time.getFullYear() //年
            var month = time.getMonth() //月
            var date = time.getDate() //日期
            var hours = time.getHours() //小时
            var minues = time.getMinutes() //分钟
            var seconds = time.getSeconds() //秒

            //2021-12-02 15:24:49
            var dateStr = `${year}-${month+1}-${date} ${hours}:${minues}:${seconds}`
            return dateStr
        }

        var time = formateCurrentDate()
        console.log(time);

案例一统计随机数次数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <!-- 
        生成10000个随机数0~10，统计每个随机数出现次数
        分析:  Math.random()  0-1 不包含1
             1. 0~10随机数  
               => Math.random() * 10    0.11  -> 1.1
                                        0.98  -> 9.8
             var randNum = Math.floor( Math.random() * 10 )

             2. for(var i = 0; i<10000; i++){
                   var randNum = Math.floor( Math.random() * 10 )
                }

            3. 随机数：  2,3,2,2,3,6,9,3 ....
                       { 
                        2: 300
                        3: 3676
                        6: 1555
                        9: 144
                        属性：值
                        随机数： 次数
                       }

               3.1 计数器对象
                   var numObj = {

                   }

                   var randNum = 2
                   // 判断计数器对象有没有此随机数，如果没有，放到对象中，值赋值给1
                                                       有, 值加一
                   if(numObj[randNum]){
                       //已经存在
                        numObj[randNum]++
                   }else{
                      //不存在
                       numObj[randNum] = 1  
                   }

              
                                         
     -->
</head>

<body>
    <script>
        function getRandomNum() {
            var numObj = {} //计数器对象
            for (var i = 0; i < 10000; i++) {
                var randNum = Math.floor(Math.random() * 10) // 0~10

                //判断计数器对象有没有此随机数，如果没有，放到对象中，值赋值给1,如果有, 值加一
                if (numObj[randNum]) {
                    //已经存在
                    numObj[randNum]++
                } else {
                    //不存在
                    numObj[randNum] = 1
                }
            }

            for(var key in numObj){
                console.log(`${key} : ${numObj[key]}`);
            }
        }

        getRandomNum()
    </script>
</body>

</html>

案例二随机数工具函数

生成指定范围随机数 m~n之间的随机数

分析:

Math.random() 0~1 不包含1

0~1 Math.random()

0~10 Math.random() * (10-0) + 0

10~20 Math.random() * (20-10) + 10

30~50 Math.random() * (50-30) + 30

m~n Math.random() * (n-m) + m

 // console.log( ' Math.random() * 10 + 10 ',  (Math.random() * 10 + 10));

        function getRandom(x, y) {
            var m = Math.min(x,y)
            var n = Math.max(x,y)
            return Math.floor(Math.random() * (n - m) + m)
        }

        var randomNum = getRandom(500, 100)
        console.log(randomNum);

案例三随机姓名

1. 获取随机姓名

arr[index]

2. 获取随机索引号

范围: 0 - 66 arr.length 不包含66

var arr = ['姓名','姓名2']

        /**
         * 生成x到y之间的随机数
         * 随机数，包含x,不包含y
        */
        function getRandom(x, y) {
            var m = Math.min(x, y)
            var n = Math.max(x, y)
            return Math.floor(Math.random() * (n - m) + m)
        }

        // 1. 生成随机姓名索引号
        var index = getRandom(0, arr.length)
        console.log('随机姓名 :',arr[index]); 
        document.write(arr[index])

案例四进制转换

数字转换进制

二进制: 0 1

=> 10

八进制: 0 1 2 3 4 5 6 7

=> 10

=> 010

十进制: 0 1 2 3 4 5 6 7 8 9

=>10

十六进制: 0 1 2 3 4 5 6 7 8 9 A B C D E F

=> 10

=> 0xA

var num = 0xA
        var num1 = 010
        console.log(num, num1);

        // 十进制->其它进制
        var num2 = 100
        console.log( 'num2.toString(2)  :', num2.toString(2) );
        console.log( 'num2.toString(8)  :', num2.toString(8) );
        console.log( 'num2.toString(16)  :', num2.toString(16) );

        // 其它进制 -> 十进制
        var str = 100
        console.log('parseInt(str,2) ：', parseInt(str,2) );

案例五随机颜色

R　255

G　102

B　102

#FF6666

RGB

=> Red : 0 ~ 255 => 120

=> Green: 0 ~ 255 => 230

=> Blue : 0 ~ 255 => 23

rgb(120,230,23)

#FF6666 十六进制颜色表示法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例: 随机颜色</title>
    
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: #8a2be2;  
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        function getRandom(x, y) {
            var m = Math.min(x, y)
            var n = Math.max(x, y)
            return Math.floor(Math.random() * (n - m) + m)
        }

        function setBakctroundColor() {
            var r = getRandom(0, 256)
            var g = getRandom(0, 256)
            var b = getRandom(0, 256)
            
            var bg = `rgb(${r}, ${g}, ${b})`
            console.log(bg);
            //设置背景颜色给div
            document.querySelector('div').style.backgroundColor = bg
        }
        /*
          十六进制
        */
        function setBackgroundColorTwo(){
            var r = getRandom(0, 256) //123 => F1  
            var g = getRandom(0, 256) // 34 => 15
            var b = getRandom(0, 256)  // 125 => B2

            //  #F115B2
            var r16 = r.toString(16)
            var g16 = g.toString(16)
            var b16 = b.toString(16)
            var bgValue = `#${r16}${g16}${b16}`
            console.log(bgValue);

            //设置背景颜色给div
            document.querySelector('div').style.backgroundColor = bgValue

        }

        setBackgroundColorTwo()
    </script>
</body>

</html>

案例六日期时间工具函数

function dateFtt(fmt, date) {
            var o = {
                "M+": date.getMonth() + 1, //月份
                "d+": date.getDate(), //日
                "h+": date.getHours(), //小时
                "m+": date.getMinutes(), //分
                "s+": date.getSeconds(), //秒
                "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                S: date.getMilliseconds(), //毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(
                    RegExp.$1,
                    (date.getFullYear() + "").substr(4 - RegExp.$1.length)
                );
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(
                        RegExp.$1,
                        RegExp.$1.length == 1 ?
                        o[k] :
                        ("00" + o[k]).substr(("" + o[k]).length)
                    );
            return fmt;
        }

        //创建时间格式化显示
        function formateDate() {
            var crtTime = new Date(); //当前时间
            // return dateFtt("yyyy-MM-dd hh:mm:ss", crtTime);
            // return dateFtt("yyyy年MM月dd日 hh:mm:ss", crtTime);  
            // return dateFtt("yyyy/MM/dd hh:mm:ss", crtTime);  
            return dateFtt("yyyy年MM月dd日", crtTime);  

        }


        var date1 = formateDate()
        console.log(date1);

案例七计算时间差

var time1 = new Date('2019-01-01 00:00:00')
        var time2 = new Date('2019-01-03 04:55:34')

        var t1 = time1.getTime()
        var t2 = time2.getTime()

        var t3 = t2 - t1 // 相差毫秒数
        // 相差的天，小时，分钟，秒
        // 1天= 24小时  1小时= 60分钟  1分钟 = 60秒  1s = 1000毫秒
        // 1天 = 24 * 60 * 60 * 1000
        var day1 = t3 / (24 * 60 * 60 * 1000)
        day1 = Math.floor(day1)
        console.log(day1);

        // 总相差毫秒数 - 相差天数的毫秒数 = 剩下相差小时分钟秒 毫秒数
        var hourseSeconds =  t3 - day1 * (24 * 60 * 60 * 1000) 
        var hourse = hourseSeconds/(60*60*1000)
        hourse = Math.floor(hourse)
        console.log(hourse);

        //分钟和秒 毫秒数 = hourseSeconds - hourse * 60*60*1000
        var minuesSeconds = hourseSeconds - hourse * 60*60*1000
        var minue = minuesSeconds/(60*1000)
        minue = Math.floor(minue)
        console.log(minue);