J avaScript中Math对象使用

---

##J avaScript中Math对象使用

---

---

前言

在J avaScript中，对象是非常重要的知识点，可以看作是无序的集合数据类型，由若干的键值对来组成。世界上的万物都可以看作对象，每个对象都带有属性和方法。对象可以用来统一管理多个数据。

一、Math对象

Math对象的使用

含义：Math对象用来对数字进行数学相关的运算，该对象不是构造函数，不需要实例化对象，可以直接使用其静态属性和静态方法。

其常用属性和方法

控制台中执行结果

  // 获取圆周率
Math.PI;
// 获取绝对值
Math.abs(-1);
Math.abs('-11')
// 获取最大值
Math.max(1, 2, 3, 4, 5);
// 获取最小值
Math.min(1, 2, 3, 4, 5);
// 获取基数（base）的指数（exponent）次幂
Math.pow(2, 4);// 获取2的4次幂
// 获取x的平方根 
Math.sqrt(9);
// 向上取整
Math.floor(1.9);
// 向下取整
Math.ceil(1.9);
// 四舍五入
Math.round(1.5);
// 四舍五入
Math.round(-1.5);

二、生成指定范围的随机数

1.Math.random()的使用

Math.random（）用来获取随机数。每次调用该方法返回的结果都不同。该方法返回的结果是一个很长的浮点数。如“0.925045617789475”，其范围0~1（不包括1）。

代码示范

Math.random() * (3 -1) + 1;// 1<= 返回结果 <3
Math.random() * (20-10 )+10;// 10<= 返回结果 <20
Math.random() * (99-88)+10;// 88<= 返回结果 <99

上述代码的返回结果是浮点数，当需要获取整数结果时，可以搭配Math.floor（）来实现。

示范

// 表示生成大于或等于min且小于max的随机值
Math.random() * (max - min) + min;
// 表示生成0到任意数之间的随机整数
Math.floor(Math.random() * (max + 1));
// 表示生成1到任意数之间的随机整数
Math.floor(Math.random() * max + 1);

生成随机数

// 生成0-1之间的随机数
// [0,1)
var res = Math.random()
console.log(res);
// 生成大于或等于min且小于max的随机值
// [1-10)
var res1 = Math.random() * (10 - 1) + 1;
console.log(res1);
// 生成0到任意数之间的随机整数
// [0,10]
var res2 = Math.floor(Math.random() * (10 + 1));
console.log(res2);
// 生成1到任意数之间的随机整数
// [1,10]
var res3 = Math.floor(Math.random() * 10 + 1);
console.log(res3);

生成颜色

function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function getRGB(min, max) {
  var c1 = getRandom(min, max);
  var c2 = getRandom(min, max);
  var c3 = getRandom(min, max);
  return 'rgb(' + c1 + ', ' + c2 + ', ' + c3 + ')';
}
console.log(getRGB(0, 255));

生成随机数的颜色

function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function getColor() {
var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c',
'd', 'e', 'f'];
var str = '#';
for (var i = 0; i < 6; i++) {
  str += arr[getRandom(0, 15)];
}
 return str;
}
console.log(getColor());

猜数字游戏

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
var random = getRandom(1, 10);
while (true) { //死循环，利用break来跳出循环
  var num = prompt('猜数字，范围在1~10之间。');
  if (num > random) {
    alert('你猜大了');
 }
  else if (num < random) {
    alert('你猜小了')
 }
  else {
    alert('恭喜你，猜对了');
    break;
 }
}

2.日期对象

 Javascript中的日期对象需要使用new Date（）实例化对象才能使用。

日期对象的使用

Javascript中的日期对象需要使用new Date（）实例化对象才能使用。Date（）是日期对象的构造函数。在创建日期对象时，可以为Date构造函数传入一些参数，来表示具体的日期。

创建方式如下（示例）：

// 方式1：获取当前时间
var date1 = new Date();
console.log(date1)
// 输出：Wed Apr 05 2023 20:57:12 GMT+0800 (中国标准时间)
// 方式2：传入年、月、日、时、分、秒（月的范围是0~11,即真实月份-1）
var date2 = new Date(2023, 03, 06, 10, 57, 56);
console.log(date2)
// 输出：Thu Apr 06 2023 10:57:56 GMT+0800 (中国标准时间)
// 方式3：用字符串表示日期和时间
var date3 = new Date('2023-04-06 10:57:56');
方法 作用
getFullYear() 获取表示年份的4位数字，如2020
getMonth() 获取月份，范围0~11（0表示一月，1表示二月，依次类推）
getDate() 获取月份中的某一天，范围1~31
getDay() 获取星期，范围0~6（0表示星期日，1表示星期一，依次类推）
getHours() 获取小时数，返回0~23
getMinutes() 获取分钟数，范围0~59
getSeconds() 获取秒数，范围0~59
getMilliseconds() 获取毫秒数，范围0~999
getTime() 获取从1970-01-01 00:00:00距离Date对象所代表时间的毫秒数
方法 作用
setFullYear(value) 设置年份
setMonth(value) 设置月份
setDate(value) 设置月份中的某一天
setHours(value) 设置小时数
setMinutes(value) 设置分钟数
setSeconds(value) 设置秒数
setMilliseconds(value) 设置毫秒数
setTime(value) 通过从1970-01-01 00:00:00计时的毫秒数来设置时间
console.log(date3)
// 输出：Thu Apr 06 2023 10:57:56 GMT+0800 (中国标准时间)

总结：

1. 如果Date()不写参数，就返回当前时间
2. 如果Date()里面写参数，就返回括号里面输入的时间

Date对象的常用get方法

Date对象的常用set方法

示例

function getMyDate() {
  var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  // 获取当前时间
  var date = new Date();
  console.log(date);
  // 获取当前年份：date.getFullYear()
  // 获取当前月份：date.getMonth() + 1——（0表示一月，1表示二月，依次类推） 
  // 获取当前月份中的某一天：date.getDate()
  // 获取星期：arr[date.getDay()]——（0表示星期日，1表示星期一，依次类推） 
  var str = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' +
date.getDate() + '日 ' + arr[date.getDay()];
  return str;
}
console.log(getMyDate());

统计代码执行时间

// 方式1：通过日期对象的valueof()或getTime()方法
var date1 = new Date();
// valueOf用于获取对象的原始值
console.log(date1.valueOf()); // 示例结果：1571196996188
console.log(date1.getTime()); // 示例结果：1571196996188
// 方式2：使用“+”运算符转换为数值型
var date2 = + new Date();
console.log(date2); // 示例结果：1571196996190
// 方式3：使用HTML5新增的Date.now()方法
console.log(Date.now()); // 示例结果：1571196996190

倒计时

function getTimer() {
  // 获取当前时间
  var date = new Date();
  // var str = date.getHours() + ':' + date.getMinutes() + ':' +
date.getSeconds();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getMinutes();
  // 使用三元表达式格式化日期
  h = h < 10 ? '0' + h : h
  m = m < 10 ? '0' + m : m
  s = s < 10 ? '0' + s : s
  return h + ':' + m + ':' + s;
 console.log(getTimer())

倒计时

1. 倒计时的核心算法是输入的时间减去现在的时间，得出的剩余时间就是要显示的倒计时时间，
2. 这需要把时间都转化成时间戳（毫秒数）来进行计算，把得到的毫秒数转换为天数、小时、分数、秒数。

function getCountTime(endTime) {
  var d, h, m, s;
  //1. 用用户输入的时间 减去 开始的时间就是 倒计时
  //2. 但是要注意，我们得到是 毫秒数 然后 把这个毫秒数转换为 相应的 天数 时分秒 就好了
  //除以1000以后是在秒级进行操作（数字小利于计算），不除以1000则是在毫秒级进行操作
  var countTime = parseInt((new Date(endTime) - new Date()) / 1000);
  // console.log(countTime);
  // 3. 把得到的毫秒数 转换 当前的天数 时分秒
  console.log(countTime);
  d = parseInt(countTime / 60 / 60 / 24); // 计算天数
  h = parseInt(countTime / 60 / 60 % 24); // 计算小时
  m = parseInt(countTime / 60 % 60); // 计算分数
  s = parseInt(countTime % 60); // 计算当前秒数
  return '还剩下' + d + '天' + h + '时' + m + '分' + s + '秒 ';
}
console.log(getCountTime('2023-05-01 00:00'));

总结

通过以上讲解，希望能更加了解倒计时等代码使用，更加熟练掌握js的使用，与html配合使用！!！