js作业（10-对象Math和格式化日期）

最新推荐文章于 2024-09-27 15:27:45 发布

咋的啥名都用不了呢~

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量58

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_63492023/article/details/129702776

版权

本文介绍了JavaScript中Math对象的几个重要功能，包括获取最大值、绝对值和取整方法。同时，展示了如何生成随机数以及实现猜数字游戏。此外，还详细讲解了Date对象的使用，如创建日期、格式化日期和时间以及获取时间戳。最后，通过示例展示了如何实现倒计时效果。

摘要由CSDN通过智能技术生成

Math对象最大值

<!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>Document</title>
</head>

<body>
    <script>
        // Math数学对象 不是一个构造函数，所以我们不需要new 来调用而是直接使用里面的属性和方法即可
        console.log(Math.PI); //属性 圆周率
        console.log(Math.max(1, 99, 12)); //99
        console.log(Math.max(-1, -100)); //-1
        console.log(Math.max(1, 22, 'pink')); //NaN
        console.log(Math.max()); //-Infinity
    </script>
</body>

</html>

Math绝对值和三个取整方法

<!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>Document</title>
</head>

<body>
    <script>
        // 1.绝对值方法 （absolute）
        console.log(Math.abs(1)); //1
        console.log(Math.abs(-1)); //1
        console.log(Math.abs('-1')); //1 隐式转换 会把字符串型 -1 转换为数字型
        console.log(Math.abs('red')); //NaN
        // 2.三个取整方法
        // (1) Math.floor() floor：地板 向下取整 往最小了取值
        console.log(Math.floor(1.1)); //1
        console.log(Math.floor(1.9)); //1
        // (2) Math.ceil() ceil：天花板 向上取整 往最大了取值
        console.log(Math.ceil(1.1)); //2
        console.log(Math.ceil(1.9)); //2
        // (3) Math.round() round：精确的 四舍五入 其他数字都是四舍五入，但是 .5 特殊 它往大了取
        console.log(Math.round(1.1)); //1
        console.log(Math.round(1.9)); //2
        console.log(Math.round(-1.1)); //-1
        console.log(Math.round(-1.5)); //-1 不是-2
    </script>
</body>

</html>

Math对象随机数方法

<!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>Document</title>
</head>

<body>
    <script>
        // 1.random() 返回一个随机的小数 0<=x<1
        // 2.这个方法里面不跟参数
        // 3.代码验证
        console.log(Math.random());
        // 4.得到一个两数之间的随机整数，包括两个数在内
        // Math.floor(Math.random() * (max - min + 1)) + min;
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        console.log(getRandom(1, 10));
        // 5.随机点名
        var arr = ['张三', '李四', '王五', 'red'];
        // console.log(arr[0]);
        // console.log(getRandom(arr[0], arr[2])); error 输出为：NaN张三
        // console.log(arr[getRandom(0, 2)]);
        console.log(arr[getRandom(0, arr.length - 1)]);
    </script>
</body>

</html>

猜数字游戏

<!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>Document</title>
</head>

<body>
    <script>
        // 程序随机生成一个1~10之间的数字，并让用户输入一个数字，
        // 1.如果大于该数字，就提示，数字大了，继续猜；
        // 2.如果小于该数字，就提示数字小了，继续猜；
        // 3.如果等于该数字，就提示猜对了，结束程序。

        // (1) 随机生成一个1~10的整数 我们需要用到Math.random0方法。
        // (2) 需要一直猜到正确为止，所以一直循环。
        // (3) 用while 循环合适更简单。
        // (4) 核心算法：使用if else if多分支语句来判断大于、小于、等于。
        // function getRandom(min, max) {
        //     return Math.floor(Math.random() * (max - min + 1)) + min;
        // }
        // var random = getRandom(1, 10);
        // while (true) { //死循环
        //     var num = prompt('你来猜？输入1~10之间的一个数字');
        //     if (num > random) {
        //         alert('你猜大了！');
        //     } else if (num < random) {
        //         alert('你猜小了！');
        //     } else {
        //         alert('你好牛，猜对了！！！');
        //         break;
        //     }
        // }
        // 要求用户猜 1~50 间的一个数字 但只有 10 次机会
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        var random = getRandom(1, 50);
        // var i = 1;
        // while (i <= 10) { //死循环
        //     var num = prompt('你来猜？在10次条件下，输入1~50之间的一个数字');
        //     if (num > random) {
        //         alert('你猜大了！');
        //         i++;
        //     } else if (num < random) {
        //         alert('你猜小了！');
        //         i++;
        //     } else {
        //         alert('你好牛，猜对了！！！');
        //         break;
        //     }
        // }
        for (var i = 9; i >= 0; i--) {
            var num = prompt('你来猜？在10次条件下，输入1~50之间的一个数字');
            if (num > random) {
                alert('你猜大了！');
            } else if (num < random) {
                alert('你猜小了！');
            } else {
                alert('你好牛，猜对了！！！');
                break;
            }
        }
    </script>
</body>

</html>

Date日期对象

<!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>Document</title>
</head>

<body>
    <script>
        // Date() 日期对象 是一个构造函数 必须使用 new 来调用创建 Date()
        var arr = new Array();
        var obj = new Object();
        // 1.用 Date 如果没有提供参数，那么新创建的 Date 对象表示当前实例化时刻的日期和时间。
        var date = new Date();
        console.log(date);
        // 2.参数常用的写法 数字型 2023,03,27 或 字符串型 '2023-2-20 10:10:13'或'2023/2/20'
        var date1 = new Date(2023, 3, 27);
        console.log(date1); //返回的不是4月 不是3月
        var date2 = new Date('2023-2-20 10:10:13');
        console.log(date2);
    </script>
</body>

</html>

格式化日期年月日星期

<!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>Document</title>
</head>

<body>
    <script>
        // 格式化 年月日
        var date = new Date();
        console.log(date.getFullYear()); //返回当前日期年 2023
        console.log(date.getMonth() + 1); //月份(0-11月 取值) 返回的月份小一个月 2 要 +1
        console.log(date.getDate()); //返回 几号
        console.log(date.getDay()); //周日0 到 周六6
        // 我们的 2023年3月21日 星期二
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
    </script>
</body>

</html>

格式化日期时分秒

<!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>Document</title>
</head>

<body>
    <script>
        // 格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours()); //时
        console.log(date.getMinutes()); //分
        console.log(date.getSeconds()); //秒
        // 要求封装一个函数返回当前的时分秒 格式 08:08:08
        function getTime() {
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return h + ':' + m + ':' + s;
        }
        console.log(getTime());
    </script>
</body>

</html>

获得Date总的毫秒数

<!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>Document</title>
</head>

<body>
    <script>
        // 获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数，而是距离1970年1月1号过了多少毫秒数
        // 1.通过 valueOf() getTime()
        var date = new Date();
        console.log(date.valueOf()); //现在时间距离1970年1月1号 总的毫秒数
        console.log(date.getTime());
        // 2.简单写法 +new Date() 最常用的写法
        var date1 = +new Date(); // 返回的是总的毫秒数
        console.log(date1);
        // 3.H5 新增的 获得总的毫秒数
        console.log(Date.now()); // 注意大写
    </script>
</body>

</html>

倒计时效果

<!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>Document</title>
</head>

<body>
    <script>
        // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减，比如05分减去25分，结果会是负数的。
        // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
        // 3.把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)
        // 转换公式如下：
        // d= parselnt(总秒数/60/60/24)；// 计算天数
        // h = parselnt(总秒数/60/60%24) // 计算小时
        // m = parselnt(总秒数/60 %60)；、 /／ 计算分数
        // s = parselnt(总秒数%60; // 计算当前秒数

        function countDown(time) {
            var nowTime = +new Date(); //返回当前时间戳
            var inputTime = +new Date(time); //返回用户输入的时间戳
            var times = (inputTime - nowTime) / 1000; //time是剩余的秒数
            var d = parseInt(times / 60 / 60 / 24); //天
            d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            var m = parseInt(times / 60 % 60); //分
            m = m < 10 ? '0' + m : m;
            var s = parseInt(times % 60); //秒
            s = s < 10 ? '0' + s : s;
            return d + '天' + h + '时' + m + '分' + s + '秒';
        }
        console.log(countDown('2023-4-20 12:00:00'));
        var date = new Date();
        console.log(date);
    </script>
</body>

</html>