从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍

Math对象的介绍


1:Math对象

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



2:Math属性

PI:返回圆周率(约等于3.14159)。



3:Math方法

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

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

// 随机数如何设定范围
// 0 - 100(包含)之间的随机值—Math.round四舍五入
console.log(Math.round(Math.random() * 100));
// 0 - 99(包含)之间的随机值—Math.floor向下取整
console.log(Math.floor(Math.random() * 100));
// 1 - 100(包含)之间的随机值—Math.ceil向上取整
console.log(Math.ceil(Math.random() * 100));
// 100 - 1000(包含)之间的随机值
// 求两个值之间的随机数
/*function random(x, y) {
	return Math.round(Math.random() * (y - x)) + x;
}
*/
console.log(Math.round(Math.random() * (1000 - 100)) + 100);

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

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

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

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

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

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

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



4:三角函数复习

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

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



附录: 

勾股定理:

var a = 3, b = 4;
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
console.log(c);

三角函数:

var degree = 60;
var rad = Math.PI / 180 * degree;
console.log(Math.ceil(Math.sin(rad) * 10) / 10);
console.log(Math.floor(Math.cos(rad) * 10) / 10); 


Date日期对象的介绍


1:日期对象

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

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



2:创建日期对象

var oDate=new Date();

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

可以传入参数的格式:

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

var oDate = new Date(‘12:12:12 12/12/2017‘); //“时:分:秒 月/日/年”
var oDate = new Date(‘12/14/2017 12:12:12‘); //“月/日/年 时:分:秒”
var oDate = new Date(‘2017/12/14‘); //“年/月/日”等字符串

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

var oDate = new Date(2017, 11, 12, 13, 24, 36); // 0代表1 

3.时间戳。

var oDate = new Date(1516775284475); 


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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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



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

1:将日期格式化成字符串。

2:将指定格式字符串转化成日期对象。

3:日期字符串转为毫秒数。

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

5:日期函数封装(dateUtil.js)(封装常见功能)



6:延时器和定时器

延时器:

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

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

清除延迟器:clearTimeout();

var timer3 = setTimeout(function () {
	console.log(‘蹦!‘);
} , 3000);

setTimeout(function () {
	clearTimeout(timer3);
}, 2000);

 setTimeout()调用函数的写法方式,也可去掉引号

function print() {
	console.log(‘你好‘);
}
setTimeout(‘print()‘, 3000);//此写法如果在window.onload调用,建议放到匿名函数,
//涉及到作用域的问题,js运行到此报错,也可调整js引用的位置

  

  定时器:

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

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

清除定时器:clearInterval();

var num = 6;
var timer = setInterval(function () {
	console.log(--num);

	if(num === 0) {
		clearInterval(timer);
	}
}, 1000);

  

原文地址:https://www.cnblogs.com/witkeydu/p/8345085.html

时间: 2024-11-05 04:52:19

从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍的相关文章

JavaScript中Global、Math、Date对象的常用方法

JavaScript当中Global.Math.Date类型常用方法如下: 1 /* 2 js 中 Global对象 是一个不存在的对象,它里面的方法可以调用 3 常用方法: 4 1 encodeURI 对uri进行转换字节, 不改变特殊符号,不常用 5 2 encodeURIComponent 对uri进行转换字节码,符号全部转换 常用 6 3 decodeURI 解码 7 4 decodeURIComponent 解码 8 5 eval 传入一个字符串,当作js脚本进行执行 9 6 pars

javascript如何将时间日期转换为Date对象

javascript如何将时间日期转换为Date对象:有时候需要讲一个字符串型的时间日期转换为Date时间对象,下面就通过一个简单的实例提供一种解决方案,当然也是一种思路,可以进行一定的变通,以达到举一反三的效果.例如这里有一个时间日期字符串: 2013-9-15 8:25:30 下面就将它们转换为时间对象.代码如下: var timeStr="2013-9-15 8:25:30"; var strArray=timeStr.split(" "); var strD

从零开始学习前端JAVASCRIPT — 5、JavaScript基础ES5

1:ES5简介 ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正. 与HTML5规范进程本质类似,ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化. 2:严格模式的意义 相对于正常模式而言: 1:消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为. 2:消除代码运行的一些不安全之处,保证代码运行的安全. 3:提高编译器效率,增加运行速度. 4:为未来新版本的Java

javascript Date对象的介绍及linux时间戳如何在javascript中转化成标准时间格式

1.Date对象介绍 Date对象具有多种构造函数.new Date()new Date(milliseconds)new Date(datestring)new Date(year, month)new Date(year, month, day)new Date(year, month, day, hours)new Date(year, month, day, hours, minutes)new Date(year, month, day, hours, minutes, seconds

从零开始学习前端JAVASCRIPT — 1、JavaScript基础

1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类型检查. 静态类型:编译的时候就知道每个变量的类型. 解释型:程序不需要编译,程序在运行的时候才翻译成机器语言,每执行一次都要翻译一次,因此效率比较低,但是跨平台性好. 编译型:程序在执行之前需要一个专门的翻译过程,把程序编译为机器语言的文件,运行时直接使用编译的结果就行了. 标记语言:标记语言的存

从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

1:DOM(Document  Object  Model)的概念和作用 document对象是DOM核心对象:对html中的内容,属性,样式进行操作. 节点树中节点之间的关系:父子,兄弟. 2:DOM常用属性 title:返回或设置当前文档的标题. all:返回所有元素的集合. forms:返回对文档中所有form对象的引用. 通过集合来访问相应的对象: 1.通过下标的形式. 2.通过name形式. 3:DOM查询方法 1.getElementById(id):返回拥有指定id的(第一个)对象

从零开始学习前端JAVASCRIPT — 3、JavaScript基础string字符串介绍

1:字符串 JS中的任何数据类型都可以当作对象来看.所以string既是基本数据类型,又是对象. 2:声明字符串 基本数据类型:var sStr = '字符串'; 对象的方法:var oStr = new String('字符串'); //统计每个字符出现的次数,结果显示 a 2.b 1.c 2.d1,去掉重复的字符,使结果显示 abcdfgj. //var定义的变量赋值字符串以对象[]的方式访问单个字符IE8以上支持 var str="abcdafgcj"; var arr={};

从零开始学习前端JAVASCRIPT — 14、闭包与继承

1:闭包 1 . 概念:闭包就是能够读取其他函数内部变量的函数.在JS中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解为”定义在一个函数内部的函数”. 2 . 闭包的特点 1)可以读取函数内部的变量. 2)让这些变量的值始终保存在内存中. 3 . 闭包的原理 理解闭包,首先必须理解JS变量的作用域.变量的作用域无非就是两种(es5):全局变量和局部变量. JS语言的特殊之处,就在于函数内部可以直接读取全局变量.另一方面,函数外部自然无法读取函数内的局部变量. 注意: 1)函数内部

从零开始学习前端开发 — 15、CSS3变形基础过渡、动画

一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 eg: transition: all 1s; ident 指定要过渡的css属性列表 eg: transition:border-radius 1s,background 2s; none 没有属性发生过渡 注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性