0
点赞
收藏
分享

微信扫一扫

JavaScript零基础通关（11）Math对象，最大值，封装自己的数学对象，Math绝对值和三个取证方法，随机数方法 random()，

独西楼Q 2022-04-14 阅读 26
前端html5css3htmlcss

JavaScript 内置对象

  1. 内置对象
    JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
    前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解
    内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
    内置对象最大的优点就是帮助我们快速开发
    JavaScript 提供了多个内置对象：Math、 Date 、Array、String等
    自定义对象，内置对象，浏览器对象，
    自定义对象，内置对象，ECMAscript
    内置对象就是指JS语言自带的一些对象，

2. 查文档

2.1 MDN
学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。
Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。
MDN: https://developer.mozilla.org/zh-CN/

常用成员的使用就可以了，查文档，

2.2 如何学习对象中的方法

查阅该方法的功能
查看里面参数的意义和类型
查看返回值的意义和类型
通过 demo 进行测试

参数，返回值的意义加二类型，

3. Math 对象

3.1 Math 概述
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

Math.PI		 // 圆周率
Math.floor() 	 // 向下取整
Math.ceil()            // 向上取整
Math.round()           // 四舍五入版 就近取整   注意 -3.5   结果是  -3 
Math.abs()		 // 绝对值
Math.max()/Math.min()	 // 求最大和最小值

注意：上面的方法必须带括号
案例：封装自己的数学对象
利用对象封装自己的数学对象 里面有 PI 最大值和最小值

01-Math对象的最大值

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // Math数学对象 不是一个构造函数 ，所以我们不需要new 来调用 而是直接使用里面的属性和方法即可
        console.log(Math.PI); // 一个属性 圆周率
        console.log(Math.max(1, 99, 3)); // 99
        console.log(Math.max(-1, -10)); // -1
        console.log(Math.max(1, 99, 'pink老师')); // NaN
        console.log(Math.max()); // -Infinity
    </script>
</head>

<body>

</body>

</html>

不需要new来调用，直接使用里面的属性

02-封装自己的数学对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 利用对象封装自己的数学对象  里面有 PI 最大值和最小值
        var myMath = {
            PI: 3.141592653,
            max: function() {
                var max = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] > max) {
                        max = arguments[i];
                    }
                }
                return max;
            },
            min: function() {
                var min = arguments[0];
                for (var i = 1; i < arguments.length; i++) {
                    if (arguments[i] < min) {
                        min = arguments[i];
                    }
                }
                return min;
            }
        }
        console.log(myMath.PI);
        console.log(myMath.max(1, 5, 9));
        console.log(myMath.min(1, 5, 9));
    </script>
</head>

<body>

</body>

var myMath={
PI:3.1415926;
max:function(){var max=arguments[0];
for(var i=1;i<argumenst.length;i++){if(Arguments[i]>max){max=arguments[i];}}return max;},
min:function(){var mmin=arguments[0];for(var i=;1i<arguments.length;i++){if(arguments[i]<min){min=arguments[i];}}return min;}
car myMath={PI:3.1415926,max:function(){var max=arguments[0];for(var i=1;ji<arguments.length;i++){if(arguments[i]>max){max=arguments[i];}}returnmax;}
min:function()var min=arguments[0];for(var i=1;i<arguments.length;i++){if(arguments[i]<min){min=arguments[i];
var min=arguments[0];
for(var i=1;i<arguments.length;i++){if(Arguments[i]<min){min=arguments[i];}}
var min=arguments[0];
for(var i=1;i<arguments.length;i++){if(arguments[i]<min){min=arguments[i];}}return min;}

Math绝对值和三个取证方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1.绝对值方法
        console.log(Math.abs(1)); // 1
        console.log(Math.abs(-1)); // 1
        console.log(Math.abs('-1')); // 隐式转换 会把字符串型 -1 转换为数字型
        console.log(Math.abs('pink')); // NaN 

        // 2.三个取整方法
        // (1) Math.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()   四舍五入  其他数字都是四舍五入，但是 .5 特殊 它往大了取  
        console.log(Math.round(1.1)); // 1
        console.log(Math.round(1.5)); // 2
        console.log(Math.round(1.9)); // 2
        console.log(Math.round(-1.1)); // -1
        console.log(Math.round(-1.5)); // 这个结果是 -1
    </script>
</head>

<body>

</body>

</html>

3.2 随机数方法 random()

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
得到一个两数之间的随机整数，包括两个数在内

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

return Math.floor(Math.random()(max-min+1))+min;
Math.random()(max-min+1))+min;
案例：猜数字游戏
程序随机生成一个 1~ 10 之间的数字，并让用户输入一个数字，

  1. 如果大于该数字，就提示，数字大了，继续猜；
  2. 如果小于该数字，就提示数字小了，继续猜；
  3. 如果等于该数字，就提示猜对了， 结束程序。

Math对象随机数方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1.Math对象随机数方法   random() 返回一个随机的小数  0 =< x < 1
        // 2. 这个方法里面不跟参数
        // 3. 代码验证 
        console.log(Math.random());
        // 4. 我们想要得到两个数之间的随机整数 并且 包含这2个整数
        // 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 = ['张三', '张三丰', '张三疯子', '李四', '李思思', 'pink老师'];
        // console.log(arr[0]);
        console.log(arr[getRandom(0, arr.length - 1)]);
    </script>
</head>

<body>

</body>

</html>

function getRnadom(min,max){return Math.floor(Math.floor(Math.random()*(max-min+1))+min;}
console.log(getRandom(1,10));
var arr=[‘张三’,‘张三丰’,];
console.log(arr[getRandom(0,arr.length-1)];
arr[getRandom(0,arr.length-1)]);

05猜数字游戏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 猜数字游戏
        // 1.随机生成一个1~10 的整数  我们需要用到 Math.random() 方法。
        // 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次猜的机会
    </script>
</head>

<body>

</body>

</html>

Math.floor(Math.random()*(max-min+1))=min;
var random=getRandom(1,10);
while(true){var num=prompt(‘’);
if(num>random){alert(‘你猜大了’)}else if(num<random){alert(‘你猜小了’);}else{alert(‘你好帅哦’);break;}}

06-Date日期对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // Date() 日期对象  是一个构造函数 必须使用new 来调用创建我们的日期对象
        var arr = new Array(); // 创建一个数组对象
        var obj = new Object(); // 创建了一个对象实例
        // 1. 使用Date  如果没有参数 返回当前系统的当前时间
        var date = new Date();
        console.log(date);
        // 2. 参数常用的写法  数字型  2019, 10, 01  或者是 字符串型 '2019-10-1 8:8:8'
        var date1 = new Date(2019, 10, 1);
        console.log(date1); // 返回的是 11月 不是 10月 
        var date2 = new Date('2019-10-1 8:8:8');
        console.log(date2);
    </script>
</head>

<body>

</body>

</html>

Date()日期对象，是一个构造函数，必须使用new来调用我们创建的日期对象
var date1=new Date(2019,10,1);
console.log(date1);
var date2=new Date(‘2019-1-1 8:8:8’）；
var date1=new Date(‘2019-1-1 8:8:8’);
console.log(date1);

07-格式化日期对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 格式化日期 年月日 
        var date = new Date();
        console.log(date.getFullYear()); // 返回当前日期的年  2019
        console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
        console.log(date.getDate()); // 返回的是 几号
        console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
        // 我们写一个 2019年 5月 1日 星期三
        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>
</head>

<body>

</body>

</html>

getMonth()月份,getDate()返回的是第几号
getDay()周一返回的是1，周六返回的是6
getFullYear();
getDate();返回的是几号，

格式化日期时分秒

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 格式化日期 时分秒
        var date = new Date();
        console.log(date.getHours()); // 时
        console.log(date.getMinutes()); // 分
        console.log(date.getSeconds()); // 秒
        // 要求封装一个函数返回当前的时分秒 格式 08:08:08
        function getTimer() {
            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(getTimer());
    </script>
</head>

<body>

</body>

</html>

var date=new Date();
function getTimer(){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;
案例分析
随机生成一个1~10 的整数 我们需要用到 Math.random() 方法。
需要一直猜到正确为止，所以一直循环。
用while 循环合适更简单。
核心算法：使用 if else if 多分支语句来判断大于、小于、等于。

4. 日期对象

4.1 Date 概述
Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
Date 实例用来处理日期和时间
4.2 Date()方法的使用

  1. 获取当前时间必须实例化
var now = new Date();
console.log(now);
  1. Date() 构造函数的参数
    如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2019-5-1’) 或者 new Date(‘2019/5/1’)
    如果Date()不写参数，就返回当前时间
    如果Date()里面写参数，就返回括号里面输入的时间
    new Date(‘2019/5/1’);
    4.3 日期格式化
    我们想要 2019-8-8 8:8:8 格式的日期，要怎么办？
    需要获取日期指定的部分，所以我们要手动的得到这种格式。
    在这里插入图片描述
    getFullYear()
    getMonth()
    getDate()
    getDay()获取星期几，
    getHours(）获取当前小时
    案例： 输出当前日期
    请写出这个格式的日期：2019年8月8日 星期四
    ‘今天是’+year+‘年’+month+‘月’+dates+‘日’+arr[day]
    var date=new Date();
    date.getFullyear（）；
    date.getMonth()+1;
    date.getDate();
    date.getDay();
    案例： 输出当前时间’
    写一个函数，格式化日期对象，成为 HH:mm:ss 的形式 比如 00:10:45

4.4 获取日期的总的毫秒形式

Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数

为什么计算机起始时间从1970年开始?

我们经常利用总的毫秒数来计算时间，因为它更精确

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())	
console.log(date.getTime())	
// 2. 简单写可以这么做
var now = + new Date();			
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

var now=new Date();
console.log（date.valeOf()));
var noew=+new Date();
案例：倒计时效果
做一个倒计时效果
在这里插入图片描述
案例分析
核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
转换公式如下：
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数

09-获取Date总的毫秒数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 获得Date总的毫秒数(时间戳)  不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
        // 1. 通过 valueOf()  getTime()
        var date = new Date();
        console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
        console.log(date.getTime());
        // 2. 简单的写法 (最常用的写法)
        var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
        console.log(date1);
        // 3. H5 新增的 获得总的毫秒数
        console.log(Date.now());
    </script>
</head>

<body>

</body>

</html>

获得Date总的毫秒数（时间戳）date.valueOf();
var date1=new Date();
H5新增的获得总的毫秒数
console…og(date.now()
console.log(Date.now（））

10-倒计时效果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 倒计时效果
        // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
        // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
        // 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
        // 转换公式如下： 
        //  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
        //  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
        //  m = parseInt(总秒数 /60 %60 );     //   计算分数
        //  s = parseInt(总秒数%60);            //   计算当前秒数
        function countDown(time) {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            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('2019-5-1 18:00:00'));
        var date = new Date();
        console.log(date);
    </script>
</head>

<body>

</body>

</html>

d=parseInt(总秒数/60/60/24);
h=parseInt(总秒数/60/60%24);
function countDown(time){var nowTime=new Date();
var inputTime=new Date(time);
var d=parseInt(times/60/60/24);
d=d<10?‘0’+d:d;
h=h<10?‘0’+h:h;
m=m<10?‘0’+m:m;
var d=parseInt(time/60/60/24);
d=d<10?‘0’+d:d;
h=h<10?‘0’+h:h;
return d+‘天’+h+‘时’+m+‘分’+s+‘秒’;
console.log(countDown(‘2-19-5-1 18:00:00’));
4.4 获取日期的总的毫秒形式
Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数

为什么计算机起始时间从1970年开始?

我们经常利用总的毫秒数来计算时间，因为它更精确

// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())	
console.log(date.getTime())	
// 2. 简单写可以这么做
var now = + new Date();			
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();

var now=new Date();
console.log(date.valueOf())
案例：倒计时效果
做一个倒计时效果
在这里插入图片描述
function countDon(time){
var nowTime=new Date();
var inputTime=new Date(time);
var times=(inputTime-nowtime)/1000;

举报

相关推荐

【JS】Math对象随机数方法

javascript前端

JavaScript第四天(3)数学内置对象，操作对象，遍历对象，随机数对象，内置对象Math,生成任意范围随机数，

前端csshtml5css3html

【JavaSE API 】生成随机数的2种方法：Random类和Math类的Random方法

java开发语言

c语言三个数求最大值(c语言三个数求最大值和最小值)

c语言算法c++数据结构开发语言Linux系统/运维

求三个数的最大值

c语言

比较三个数的最大值

if语句嵌套Python编程语言

班级随机点名的简单制作（由Math对象中的获取随机数random演化而来）

javascript内置对象数组JavaScript前端开发

O(n)求三个数乘积的最大值

#include无序数组ios虚拟化云计算

生成10个随机数保存于数组中，并找出其最大值和最小值

随机数最小值for循环Linux系统/运维

ACMNO.33 C语言-最大值3 分别用函数和带参的宏，从三个数中找出最大的数。

C语言-最大值3#includec语言ios虚拟化云计算
0 条评论