资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaScript标准库系列——Math对象和Date对象（二）

JavaScript标准库系列——Math对象和Date对象（二）

whinc / 1075人阅读

摘要：目录导语对象对象对象方法的应用日历插件小结导语这是标准库系列的第二篇文章，主要讨论一下对象和对象，对象在平时处理一些数学操作时能起到事半功倍的作用，目前小羊接触到的对象的使用场景是动画制作对象作为关于时间的接口，能够将其应用于制作和时间相关

目录 导语 1. Math对象 2. Date对象 3. Date对象方法的应用——日历插件； 4. 小结 导语

这是《JavaScript标准库系列》的第二篇文章，主要讨论一下Math对象和Date对象，Math对象在平时处理一些数学操作时能起到事半功倍的作用，目前小羊接触到的Math对象的使用场景是动画制作；
Date对象作为关于时间的接口，能够将其应用于制作和时间相关的应用，下文给出一个日历小插件作为该对象的实际应用；

1.Math对象

Math对象提供了数学当中常见的属性和方法，注意的是Math对象并不是构造函数；
Math对象的方法的其中一个应用是在制作复杂的动画特效时能派上大用场，因此对动画制作感兴趣的童鞋要掌握好；

1.1Math对象的属性

Math对象的属性定义常见的数学常量：

1.2 Math对象的方法

最值方法

Math.min && Math.max:根据参数返回最值；

可利用该方法去获取数组的最值；

舍入方法

Math.floor:向下取整；
Math.ceil:向上取整；

Math.round:四舍五入取整；

随机数方法

Math.random:返回0~1（不包含1）的随机数；

可以通过以下方法获取任意范围的随机数：

//获取0~9的数值
Math.floor(Math.random()*10)
//获取1~10的数值
Math.floor(Math.random()*10+1)
//获取任意范围的数值
function randomNum(min,max){
    if(min-max>0){
        var mid = min;
        min = max;
        max = mid;
    }
    var range = max - min + 1
        return Math.floor(Math.random()*range+min);
};

小小变色特效

//html

Hello World


//js
   var $colors = $("#colors")
      setInterval(function(){
       var pipeRed = randomNum(0,255),
      pipeGreen = randomNum(0,255),
      pipeBlue = randomNum(0,255);
      color = "rgb("+pipeRed+","+pipeGreen+","+pipeBlue+")";
       $colors.css({
         "background":color,
       }) 
       console.log(color)
      },1000)

基本数学函数方法

三角函数方法

【注】：

关于三角函数方法的应用，可以参考小羊的《基于Canvas的动画基本原理与数理分析》一文； 2. Date对象

Date对象使用自UTC1970年1月1日零时开始的经过的毫秒数来保存时间，时间范围为该时期前后1亿天；

2.1 Date对象作为工具方法

Date对象自身的方法
Date对象作为方法使用，带不带参数都返回当前的时间的字符串


注意：new Date()返回的是对象，虽然二者看上去很像；

Date对象的静态方法

Date.now():返回当前距离1970年1月1日 00:00:00 UTC的毫秒数；

Date.UTC():返回设置的参数距离1970年1月1日 00:00:00 UTC的毫秒数，参数格式为：year, month[, date[, hrs[, min[, sec[, ms]]]]]


[注]12个月份分别有0~11表示，上面的11代表12月；

Date.parse():解析日期字符串，返回当前距离1970年1月1日 00:00:00 UTC的毫秒数；


[注]可传递的日期字符串不仅限于上述，但是一般采用上面3种日期字符串表示方法；
Date.parse()和Date.UTC()作用类似；

2.2 Date对象的实例方法

Date作为构造函数
Date作为构造函数时，可以生成一个时间对象的实例， 不传参数将返回当前的时间对象实例，传递的参数可以是多个代表日期的数值，也可以是日期字符串，还可以是代表时间的毫秒数；


使用代表日期的数值设置时间时要注意各个参数的取值范围：

year: 4位年份;
month: 0-11，这个要注意；
date:1-31;
hour:0-23;
minute:0-59;
second:0-59
ms:0-999

Date对象的实例方法
阮一峰的《JavaScript标准参考教程》总结了3大类方法，小羊根据其教程筛选了比较常用to类方法，详见阮一峰的教程；

to类方法

toString:返回当前时区的时期字符串；

toUTCString:返回当前0时区的时期字符串；
toDateString:返回日期字符串；
toTimeString:返回时间字符串；
toLocalTimeString:返回当地表现形式的时间字符串


get类方法

getFullYear:获取实例的四位年份；

getMonth:获取月份（0表1月，11表12月）；
getDate:获取第几天；
getDay:获取星期（0为星期日，6为星期六）；
getHours:返回小时；
getMinutes:返回分钟；
getSeconds:返回秒；
getMilliseconds:返回毫秒；
getTime():返回距离1970年1月1日00:00:00的毫秒数，相当于valueOf();


set类方法

setFullYear:设置实例的四位年份；

setMonth:设置月份；
setDate:设置日子；
setHours:设置小时；
setMinutes:设置分钟；
setSeconds:设置秒；
setMilliseconds:设置毫秒；
setTime:设置毫秒时间戳；

3.3. Date对象方法的应用——日历插件；

日期插件件详见小羊的文章[《[简洁的jQuery日历小插件]》](http://www.jianshu.com/p/048d...；

4. 小结

通读本文之后，我们可以基本清楚理解：

Math对象提供数学当中常用的属性和方法；

Math对象的属性包括PI、E、LN2、LN10、LOG2E、LOG10E；

MAth对象的方法包括最值方法、舍入方法、随机数方法、基本数学函数方法和三角函数方法；

Date对象的使用可分为Date对象作为工具方法和Date对象的实例方法；

Date对象作为工具方法部分，Date()直接返回当前时间的字符串，注意和new Date()的区别；Date.now()返回当前距离起始日期的毫秒数；Date.parse()可以解析日期为毫秒数；

Date对象可作为构造函数创建一个日期实例，可传递多种形式的日期参数；但要注意不同时间参数的取值范围的不同；

Date对象的实例方法可大致分为3大类，to类、get类和set类；其中除了getDay()这一方法在set类中没有对应方法外，其他get类都有对应set类方法；

参考资料

《JavaScript高级程序设计（第3版）》

《JavaScript标准参考教程》——阮一峰

GPU云服务器 云服务器 javascript类和对象 date对象 Date日期对象 php date对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86723.html

相关文章

  • 2019年前端笔试题

    摘要：为了实现这一点，他们创建了两种呈现模式标准模式和混杂模式。不存在或形式不正确会导致和文档以混杂模式呈现。无论是否编写了有效的，如果选择了错误的，那么页面就将以混杂模式呈现，其行为就可能会有错误或不可预测。 什么是web标准？WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。...

    Baaaan 评论0 收藏0

  • 2019年前端笔试题

    摘要：为了实现这一点，他们创建了两种呈现模式标准模式和混杂模式。不存在或形式不正确会导致和文档以混杂模式呈现。无论是否编写了有效的，如果选择了错误的，那么页面就将以混杂模式呈现，其行为就可能会有错误或不可预测。 什么是web标准？WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。...

    Neilyo 评论0 收藏0

  • 前端面试之路二(javaScript基础整理)

    摘要：在标签中添加属性，本质上是跟在标签里面写属性时一样的，所以属性值最终都会编译为字符串类型。这个节点包括很多，比如，以及一些方法等方法。一个对象有很多，该集合名字为，里面有其他以及，里面有很多。 一、变量类型和计算 JS中使用typeof能得到哪些类型 变量类型 值类型：变量本身就是含有赋予给它的数值的，它的变量本身及保存的数据都存储在栈的内存块当中 引用类型：引用类型当然是分配到...

    AbnerMing 评论0 收藏0

  • JavaScript 基础知识 - 入门篇(二)

    摘要：函数可以没有返回值，会在最后面返回一个。事物的行为在对象中用方法来表示。 11. 函数 11.1 函数的基础知识 为什么会有函数？ 在写代码的时候，有一些常用的代码需要书写很多次，如果直接复制粘贴的话，会造成大量的代码冗余；函数可以封装一段重复的javascript代码，它只需要声明一次，就可以多次调用； 冗余代码： 冗余：多余的重复或啰嗦内容 缺点： 代码重复，可阅读性差 ...

    niuxiaowei111 评论0 收藏0

发表评论

登陆后可评论

0条评论

whinc

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<