8-Math-Date

最新推荐文章于 2024-09-05 11:00:53 发布

-是桔子不是橘子-

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量143

点赞数

分类专栏： js 文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_42820765/article/details/128663613

版权

js 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1：Math对象

Math 对象用于执行数学任务。

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

2：Math属性

PI：返回圆周率（约等于3.14159）。

console.log( Math.PI ) ;    // 3.141592653589793

3：Math方法

Math.round(3.6); // 四舍五入。

console.log(Math.round(6.49));   // 6

Math.random(); // 返回大于等于0到小于1之间的随机数。( 范围 [0,1) )

 console.log(Math.random( ));

Math.max(a, b); // 返回较大的数值。

console.log(Math.max(6, 5, 7));  // 7

Math.min(a, b); // 返回较小的数值。

console.log(Math.min(6, 5, 7));  // 5

Math.abs(num); // 返回绝对值。

console.log(Math.abs(-6.1));    //6.1

Math.ceil(3.6); // 向上取整。

console.log(Math.ceil(6.1));     // 7
console.log(Math.ceil(-6.1));  //-6

Math.floor(3.6); // 向下取整。

console.log(Math.floor(-6.1));   // -7

Math.pow(x, y); // x的y次方。

console.log(Math.pow(2, 4));    //16

注：还有一种求x的y次方得方法： x ** Y

2**4       //16

Math.sqrt(num); // 开平方。

console.log(Math.sqrt(16)); //4

4：三角函数复习

Math.sin(x);         // x的正弦值，返回值在-1到1之间。
Math.cos(x);       // x的余弦值，返回值在-1到1之间。

注：需把角度转换成弧度，x指的是弧度，而非角度。

1弧度 = 180度

弧度计算公式：2 * Math.PI / 360 * 角度。(Math.PI /180 * 角度) ;

var degree = 60;
var arc = Math.PI / 180 * 60;
console.log(Math.sin(arc));  // 0.5000000000000001
console.log(Math.floor(Math.cos(arc) *10)/ 10);  // 0.5    (解决了js的精度问题）

5：勾股定理复习

直角边a的平方 + 直角边b的平方 = 斜边c的平方

6：随机数如何设定范围

求0-100之间随机的整数

console.log(Math.random() * 100); 
console.log(Math.round(Math.random() * 100));  //解决了精度问题

求0-99之间随机的整数

console.log(Math.floor(Math.random() * 100));  // 向下取整

求1-100之间随机的整数

console.log(Math.ceil(Math.random() * 100));

求100-1000之间的随机数

0-900的随机数+100

console.log( Math.round( Math.random() * 900 ) + 100 );

封装求两个数之间的随机数的函数

function random(x, y) {
   return Math.round( Math.random() * (y - x) ) + x;
}
console.log(random(4, 10));

7：10进制转16进制或8进制

（1）10 转16

console.log((255).toString(16));    // ff

（2）10 转8

console.log((255).toString(8));    // 377

应用：

1：编写一个函数，获得一个十六进制的随机颜色的字符串（例如：#20CD4F）。

2：编写生成4位数字验证码的函数，并生成10次，同时将结果存入数组。

3: 随机点名程序：

var names = ['王妍', '赵奔', '张莉', '刘创', '张瑶', '陈杭英', '王序晨', '袁瑶'];
// 随机下标的范围：0 —— name.length - 1
var index = Math.round( Math.random() * (names.length - 1));
console.log(names[index]);

1：日期对象

定义：JS DATE使用UTC（国际协调时间）1970,1,1,0,0,0,0所经过的毫秒数。

在JS中日期也是它的内置对象，所以我们要对日期进行获取和操作，必须实例化对象。

2：创建日期对象

var date=new Date( ) ；
console.log(date);  // 这一刻的时间

将会包含本地时间的信息，包括年月日时分秒星期。

可以传入参数的格式（自定义日期对象）：

“时:分:秒月/日/年”、“月/日/年时:分:秒”、“年/月/日”等字符串。

//（1）
var date = new Date('8:8:8 8/8/2008');
console.log(date);  // Fri  Aug 08 2008 08:08:08 GMT+0800 (中国标准时间)
//（2）
var date = new Date('8/8/2008 8:8:8');
console.log(date);  // Fri Aug 08 2008 08:08:08 GMT+0800 (中国标准时间)
//（3）
var date = new Date('2008/8/8');
console.log(date);  //Fri Aug 08 2008 00:00:00 GMT+0800 (中国标准时间)

年,月,日,时,分,秒。注意不能加“”。月是从0开始算的。

var date = new Date(2008, 7, 8, 8, 8, 8);
console.log(date);  //Fri Aug 08 2008 08:08:08 GMT+0800 (中国标准时间)

时间戳 : 时间戳：从1970年1月1号8点0分0秒0毫秒到某一个时间点所经历的毫秒数。

var date = new Date(1522736028701 - 60 * 1000);
console.log(date);

3：日期对象获取信息的方法

注：月份和星期都是从0开始计算的。

周一 ~ 周六（1 ~6）周日（0）

getDate()：从 Date 对象返回一个月中的某一天 (1 ~ 31)。

var date = new Date(1522736517796 - 48 * 60 * 60 * 1000);
console.log(date);

getMonth()：从 Date 对象返回月份 (0 ~ 11)。

var date = new Date();
var month = date.getMonth();
console.log(month);   //3

getFullYear()：从 Date 对象以四位数字返回年份。

var date = new Date();
var year = date.getFullYear();
console.log(year);    //2018

注：getYear()：请使用 getFullYear() 方法代替。由 getYear() 返回的值不总是 4 位的数字！对于介于 1900 与 1999 之间的年份，getYear() 方法仅返回两位数字。对于 1900 之前或 1999 之后的年份，则返回 4 位数字！ECMAscript已经不再要求使用该函数

getDay()：从 Date 对象返回一周中的某一天 (0 ~ 6)。其中0代表星期日。

getHours()：返回 Date 对象的小时 (0 ~ 23)。

var date = new Date();
var hours = date.getHours();
console.log(hours);  // 17

getMinutes()：返回 Date 对象的分钟 (0 ~ 59)。

var date = new Date();
var minutes = date.getMinutes();
console.log(minutes);

getSeconds()：返回 Date 对象的秒数 (0 ~ 59)。

date = new Date();
var seconds = date.getSeconds();
console.log(seconds);

getMilliseconds()：返回 Date 对象的毫秒(0 ~ 999)。

date = new Date();
var milli = date.getMilliseconds();
console.log(milli);

getTime()：返回 1970 年 1 月 1 日至今的毫秒数。

date = new Date();
var time = date.getTime();
console.log(time);

4：日期对象设置信息的方法

setDate()：设置 Date 对象中月的某一天 (1 ~ 31)。

var date = new Date();
date.setDate(9);
console.log(date);         // Mon Apr 09 2018 17:38:26 GMT+0800 (中国标准时间)

setMonth()：设置 Date 对象中月份 (0 ~ 11)。

var date = new Date();
date.setMonth(9);
console.log(date);       //Wed Oct 03 2018 17:37:13 GMT+0800 (中国标准时间)

setFullYear()：设置 Date 对象中的年份（四位数字）。

var date = new Date();
date.setFullYear(2017);  //Mon Apr 03 2017 17:34:44 GMT+0800 (中国标准时间)
console.log(date);

setYear() 请使用 setFullYear() 方法代替。如果 year 参数是两位的数字，比如 setYear(91)，则该方法会理解为 1991。如果要规定 1990 年之前或 1999 年之后的年份，请使用四位数字。 ECMAscript已经不再要求使用该函数。

setHours()：设置 Date 对象中的小时 (0 ~ 23)。

var date = new Date();
date.setHours(18);
console.log(date);    //Tue Apr 03 2018 18:40:09 GMT+0800 (中国标准时间)

setMinutes()：设置 Date 对象中的分钟 (0 ~ 59)。

var date = new Date();
date.setMinutes(10);
console.log(date);

setSeconds()：设置 Date 对象中的秒钟 (0 ~ 59)

var date = new Date();
date.setSeconds(10);
console.log(date);

setMilliseconds()：设置 Date 对象中的毫秒 (0 ~ 999)。

var date = new Date();
date.setMilliseconds(999);
console.log(date);

setTime()：以毫秒设置 Date 对象。

var date = new Date();
date.setTime(1522736517796);
console.log(date);

5：关于日期对象的常用操作

1：将日期格式化成字符串。(return yyyy-mm-dd hh:ii:ss)

function formatDateToString() {
  var date = new Date();
  var y = date.getFullYear();
  var m = addPrefixZero(date.getMonth()+1);
  var d = addPrefixZero(date.getDate());
  var h = addPrefixZero(date.getHours());
  var i = addPrefixZero(date.getMinutes());
  var s = addPrefixZero(date.getSeconds());
  return y + '-' + m + '-' + d +"  " + h +':' + i +':' + s;
}
console.log(formatDateToString());
// 给时间添加前缀0
function addPrefixZero(num) {
   if(num < 10) {
          return '0' + num;
   }else{
          return num;
   }
}

2：将指定格式字符串转化成日期。(eg:2018-01-01 12:23:46 ——Mon Jan 01 2018 12:23:46 GMT+0800 (中国标准时间)）

function formatStringToDate(str) {
     var arr =str.split(' ');    //arr是：["2018-01-01", "12:23:46"]
     var left = arr[0].split('-');
     var right = arr[1].split(':');
     //自定义日期，即给new Date传参数
     var date = new Date(left[0], left[1] - 1, left[2], right[0], right[1], right[2]);
     return date;
}
console.log(formatStringToDate('2018-01-01 12:23:46'));

3：日期转为毫秒数。

// 将指定格式字符串转化成日期（ 格式：yyyy-mm-dd hh:ii:ss）
function formatStringToDate(str) {
     var arr =str.split(' ');   //arr是：["2018-01-01", "12:23:46"]
     var left = arr[0].split('-');
     var right = arr[1].split(':');
     //自定义日期，即给new Date传参数
     var date = new Date(left[0], left[1] - 1, left[2], right[0], right[1], right[2]);
     return date;
}
// 日期转为毫秒数（格式：yyyy-mm-dd hh:ii:ss）
function formatStringToTime( str ) {
     var date = formatStringToDate(str);
     return date.getTime() 
}
console.log(formatStringToTime('2018-01-01 12:23:46'));

4：计算两个日期的时间差值。

//将指定格式字符串转化成日期( 格式：yyyy-mm-dd hh:ii:ss)
function formatStringToDate(str) {
     var arr =str.split(' ');   //arr是：["2018-01-01", "12:23:46"]
     var left = arr[0].split('-');
     var right = arr[1].split(':');
     //自定义日期，即给new Date传参数
     var date = new Date(left[0], left[1] - 1, left[2], right[0], right[1], right[2]);
     return date;
}
// 日期转为毫秒数。(格式：yyyy-mm-dd hh:ii:ss)
function formatStringToTime(str) {
     var date = formatStringToDate(str);
     return date.getTime()
}
console.log(formatStringToTime('2018-01-01 12:23:46'));
// 计算两个日期的时间差值。
function diffTime(str1, str2) {
     var time1 = formatStringToTime(str1);
     var time2 = formatStringToTime(str2);
     return time2 - time1;
}
console.log(diffTime('2018-01-01 12:23:46', '2018-01-01 12:24:46'));

5：日期函数封装（dateUtil.js）（封装常见功能）

6：延时器和定时器

延时器：

语法：setTimeout(函数或者代码串，指定的时间(毫秒));

setTimeout(function () {}, delay(ms))

在指定的毫秒数后只执行一次函数或代码。

setTimeout (function () {
      alert(1);
},3000)

清除延迟器：clearTimeout();

var timer = setTimeout (function () {
      alert(1);
},3000);
setTimeout(function () {
      clearTimeout(timer);
},2000)

定时器：

语法：setInterval(函数或者代码串，指定的时间(毫秒));

setInterval(function () {}, interval(ms));

按照指定的周期(毫秒)不断的执行函数或者是代码串。

var num = 1;
var timer = setInterval(function () {
      console.log(num++);
},1000)

清除定时器：clearInterval();

var num = 1;
var timer = setInterval(function () {
     console.log(num++);
     if(num >= 10) {
            clearInterval(timer);
     }
}, 1000);

应用：

1：倒计时。

综合应用：

1：数码时钟。

<div id="box"></div>
<style>
body {
      background: #000;
      color: #fff;
      font-weight: bold;
}
img {
      vertical-align: middle;
}
</style>
<script>
function addPrefixZero(num) {
      return num < 10 ? '0' + num : num;
}
var box = document.getElementById('box');           
function formatDate() {
     var date = new Date();
     var y = date.getFullYear();
     var m = addPrefixZero(date.getMonth() + 1);
     var d = addPrefixZero(date.getDate());
     var h = addPrefixZero(date.getHours());
     var i = addPrefixZero(date.getMinutes());
     var s = addPrefixZero(date.getSeconds());
     var sTime = '' + y + '-' + m + '-' + d + '&nbsp;&nbsp;&nbsp;' +h + ':' + i + ':' + s;
     var sHtml = '';
     for(var i = 0; i < sTime.length; i++) {
            var char = sTime.charAt(i);
            if(isNaN(Number(char))) {
                   sHtml += char;
            } else {
                   sHtml += '<img src="images/' + char + '.png">';
            }
     }
     box.innerHTML = sHtml;
}
formatDate();
setInterval(function () {
     formatDate();
}, 1000);
</script>

2：数字字母混合验证码。

function createCaptcha() {
     var str = 'abcdefghijklmnopqrstuvwxyz';
     var captcha = '';
     for(var i = 0; i < 4; i++) {
            var index = Math.floor( Math.random() * str.length );
            var char = str.charAt(index);
            captcha += char;
     }
     return captcha;
}
var arr = [];
for(var i = 0; i < 10; i++) {
     arr.push(createCaptcha());
}
console.log(arr);