Math 对象中常用的方法
Math.random() 方法
创建一个介于0~1之间的随机数,不包括1。
常用于创建两个数之间的随机数。
语法
Math.random()*(b+1-a) + a
实例
// 输出1~10之间的随机整数
console.log(parseInt(Math.random()*(10+1-1)+1));
Math.round() 方法
四舍五入保留小数。
实例
var float1 = 123.156;
console.log( Math.round(float1) ); // 输出结果是 123
var float2 = 123.556;
console.log( Math.round(float2) ); // 输出结果是 124
Math.ceil() 方法和 Math.floor() 方法
这两种方法是今后常用的方法。
Math.ceil() 方法
向上取整,整数部分进一。
Math.floor() 方法
向下取整,只保留整数部分。
实例
var float1 = 123.156;
console.log( Math.ceil(float1) ); // 输出结果是 124
console.log( Math.floor(float1) ); // 输出结果是 123
Math.pow() 方法
幂运算 / 乘方运算。有两个参数,第一个是底数,第二个是指数。
实例
console.log(Math.pow(2,5)); // 计算 2的5次方
Math.sqrt() 方法
求平方根。
实例
console.log(Math.sqrt(9)); // 9的平方根,是3
Math.abs() 方法
求绝对值。
实例
console.log(Math.abs(-9)); // -9的绝对值,是9
date 对象及其常用方法
date对象,是JavaScript中提供的,存储时间的对象。使用时,需要先创建一个时间对象。
我们可以使用 JavaScript 提供的方法,关键词 new + Date() 方法创建一个时间对象。
实例
// 存储的时间信息,是程序执行时的 当前时间
var d = new Date();
console.log(d); // 向控制台输出内容
console.dir(d); // 查看对象的内容信息
通过 Date() 创建的对象中,包含很多的方法,都是JavaScript规定好的,可以直接使用。
1. getFullYear() 方法
获取4位年份数值。
实例
var d = new Date();
var year = d.getFullYear() ;
console.log(year);
2. getMonth() 方法
获取月份。
实例
var d = new Date();
// JavaScript规定,获取的月份,数值是 0-11 , 0表示1月份,11表示12月份
// 实际月份的数值,是获取结果 +1
var month = d.getMonth() + 1;
console.log(month);
3. getDate() 方法
获取日期。
实例
var d = new Date();
var date = d.getDate();
console.log(date);
4. getDay() 方法
获取星期。
实例
var d = new Date();
// JavaScript规定,获取星期的结果是 0-6的数值
// 0表示 星期日 1表示 星期一 .... 6表示 星期六
var week = d.getDay();
console.log(week);
5. getHours() 方法
获取小时。
实例
var d = new Date();
var house = d.getHours();
console.log(house);
6. getMinutes() 方法
获取分钟。
实例
var d = new Date();
var minute = d.getMinutes();
console.log(minute);
7. getSeconds() 方法
获取秒。
实例
var d = new Date();
var second = d.getSeconds();
console.log(second);
8. getTime() 方法
获取当前时间戳,即从格林尼治时间 1970年1月1日,0点0分0秒 到现在的时间差(毫秒)。
实例
var d = new Date();
var times = d.getTime();
console.log(times);
在说定时器与延时器之前,我们需要知道什么是时间戳,以及如何使用时间戳:
时间戳
在JavaScript程序中,所谓的时间戳,指的是:
当前时间 和 格林尼治时间 1970年1月1日 0点0分0秒,相差的毫秒数。
简单理解,就是从 格林尼治时间 1970年1月1日 0点0分0秒,到现在,过了多少毫秒。
实际项目中,时间戳 往往用于计算时间,来衡量时间差。
实例
例如:秒杀倒计时
原理
假如 秒杀 是 4月1日 0点0分0秒开始。
4月1日 0点0分0秒 这个时间有 时间戳 ,当前时间也会有 时间戳。
两个时间戳相减,结果是两个时间之间的时间差,单位是毫秒。
再将这个毫秒,转化为 天,小时,分钟,秒 就是我们要的结果。
// 获取2020年4月1日0点0分0秒的时间戳
// 获取指定时间的时间对象, Date()参数是要获取的时间的字符串
// '年-月-日 空格 小时:分钟:秒'
// 有参数,获取指定时间的时间对象
var end = new Date('2020-4-1 0:0:0');
// 当前的时间对象,没有参数,获取当前时间对象
var start = new Date();
// 计算时间差,应该是 最终的事件的时间戳,减去当前时间的时间戳
// 时间单位是 毫秒, 需要转化为秒 1秒 = 1000毫秒
// 转化的秒数,是小数,我们只要整数部分,取整
// end - start 直接使用时间对象相减 也可以获取 时间差
// 但是一些低版本的浏览器,还有一些IE版本的浏览器,对这样时间对象直接相减,操作不支持
var times = parseInt( ( end.getTime() - start.getTime() ) / 1000 ) ;
console.log(times);
// 需要将时间差的秒数 转化为 天,小时,分钟,秒等信息
// 1,将秒,转化为天
// 秒数 / 一天的秒数 对结果取整 只获取整数部分
// parseInt() 或者 Math.floor()
var day = parseInt( times / (24*60*60) ) ;
console.log(day);
// 2, 将 转化为 天数之后, 剩余的秒数, 转化为 小时
// 而不是所有的秒数
// 方法1: 总秒数 - 天数所代表的秒数 --- 是我们要转化为小时的秒数
// var a = times - day*(24*60*60);
// console.log(a);
// 方法2: 总秒数 % 一天的秒数 求余数
// 将所有的秒数,都转化为天,之后剩余的余数,就是我们要求的数值,也就是转化为小时的秒数
// var b = times % (24*60*60);
// console.log(b);
// 转化为小时的秒数 / 一小时有多少秒 结果,获取整数部分
var hour = parseInt( ( times % (24*60*60) ) / (60*60) );
console.log(hour);
// 3 , 将 剩余的秒数,转化为分钟
// 方法1:总秒数 - 天数的秒数 - 小时的秒数
// 方法2: 总秒数 % 小时的秒数
// 剩余的秒数 / 分钟的秒数 获取整数部分
var minute = parseInt( ( times % (60*60) ) / 60 );
console.log(minute);
// 4 , 求剩余的秒数
// 方法1 : 总秒数 - 天的秒数 - 小时的秒数 - 分钟的秒数
// 方法2 : 总秒数 % 一分钟的秒数
var second = times % 60 ;
console.log(second);
document.write( `距离结束时间,还有${day}天,${hour}小时,${minute}分钟,${second}秒,请您抓紧时间付款,或者找老公付款` );
若要达到动态刷新的效果,需要用到定时器,接下来我们一起来看一下应该 如何使用定时器:
······································································································································
定时器和延时器
······································································································································
定时器
根据设定的时间间隔,来循环执行程序。
只要定时器不停止,程序就会一直执行。
语法
setInterval( 参数1 , 参数2 )
参数1:要执行的程序,必须是一个函数的形式 function(){ 定义程序 }
参数2:执行程序的间隔时间 单位是毫秒
时间间隔不能无限小,与计算机的刷新频率有关
60Hz 60赫兹 代表,1秒刷新60次
1次就是 1000 / 60 ---- 16.666... 毫秒
你定义的程序的时间间隔,不能小于 16.6666... 毫秒
我们一般都定义最少 0.1秒,也就是 100毫秒
实例
// 将定时器,存储在一个变量中
// 每间隔1000毫秒,也是一秒,重复执行 function(){}中的程序
var interval1 = setInterval( function(){
document.write('张老师帅极了' + '<br>');
} , 1000);
终止定时器
要终止定时器的执行,需要有两个条件
1,使用一个变量,来存储定时器
2,使用清除定时器方法,参数是这个定时器的变量
如果程序中,有多个定时器,清除哪个,就停止哪个
即时写多个参数,也只对第一个参数清除定时器
清除定时器方法使用 clearInterval() 方法。
实例
var interval1 = setInterval( function(){
document.write('张老师帅极了' + '<br>');
} , 1000);
clearInterval(interval1);
注意:
变量中,存储的是当前 这个定时器 的 序号。
这个序号,表示当前这个定时器,是整个程序中的第几个定时器。
编号是从1开始编号的。
所谓的清除定时器,实际上就是关闭整个程序中的第几个定时器。
如何间隔一段时间,再来停止定时器
实例
// 定义一个变量,存储执行次数
var int = 0;
var interval3 = setInterval( function(){
document.write('张老师不仅帅,还是非常帅' + '<br>');
// 每次执行,变量自增
int++;
// 当满足某个我们设定的条件时
if(int === 10){
// 清除定时器,终止程序的执行
clearInterval(interval3);
}
} , 1000);
console.log(interval3);
定时器的缺陷
定时器最大的问题:
程序的第一次执行,是在间隔规定的时间之后,才会执行。
在走完第一个时间间隔之前,程序是不会执行的。
解决办法:
为了防止时间间隔执行完毕之前,页面没有执行结果,会将程序 先 提前执行一次
实例
// 为了防止5秒钟之内,页面内有输出内容
document.write('张老师和鹏哥比,谁更帅?还用问吗,当然是张老师'+'<br>');
// 第一次向页面输出内容,是在间隔规定的5秒之后
setInterval( function(){
document.write('张老师和鹏哥比,谁更帅?还用问吗,当然是张老师'+'<br>');
} , 5000 )
延时器
按照设定的时间,延迟程序的执行。
延时器中的程序,只能执行一次。
可以简单的理解为 定时炸弹 到了指定的时间就会执行,并且只会执行一次。
语法
setTimeout( 函数 , 延迟的时间 );
第一个参数,也是函数形式,来定义要执行的程序内容。
第二个参数,定义延迟时间,单位也是毫秒。
实例
// 延时5秒钟之后,执行程序
var timeout1 = setTimeout( function(){
console.log('张老师还是很帅的');
} , 5000 );
console.log(timeout1);
清除延时器
给一个变量存储延时器
使用清除延时器方法,参数是这个变量。
清除延时器方法使用 clearTimout() 方法。
实例
var timeout1 = setTimeout( function(){
console.log('张老师还是很帅的');
} , 5000 );
clearTimout(timeout1);
注意:
变量中,存储的也是当前 这个延时器 的 序号。
这个序号,表示当前这个延时器,是整个程序中的第几个延时器。
编号是从1开始编号的。
所谓的清除延时器,实际上就是关闭整个程序中的第几个延时器。
特别说明
-
JavaScript中,定时器和延时器的计数是不做区分的。
也就是第几个定时器,和第几个延时器,是一起计算的,不做区分。
例如:
setInterval(function(){} , 1000); 1
setInterval(function(){} , 1000); 2
settimeout(function(){} , 1000); 3
setInterval(function(){} , 1000); 4
settimeout(function(){} , 1000); 5
-
clearInterval 和 clearTimout 是不做区分的。
clearInterval 可以清除定时器,也可以清除延时器 。
clearTimout 可以清楚延时器,也可以清除定时器。
······································································································································
利用以上知识,我们可以尝试写出一个动态的时钟:
动态时钟demo
<!-- 在html中定义需要显示时钟的区域,并定义一个id -->
<h1 id="time"></h1>
<script>
//将我们的动态时钟封程序装到函数内部,以便随时调用
function setTime() {
// 获取本地时间戳
let now = new Date();
// 获取当前年份
let year = now.getFullYear();
// 获取当前月份,但要注意
// JavaScript规定,获取的月份,数值是 0-11 , 0表示1月份,11表示12月份
// 所以我们给获取的月份 + 1,以便正常显示
let month = now.getMonth() + 1;
// 获取当前日期
let day = now.getDate();
// 获取当前周数,这里又要注意了
// JavaScript规定,获取星期的结果是 0-6的数值
// 0表示 星期日 1表示 星期一 .... 6表示 星期六
// 所以我们可以将其获取的数字转换为数组的索引下标,从而用数组来显示大写的星期
let week = now.getDay();
// 获取小时
let hour = now.getHours();
// 获取分钟
let minute = now.getMinutes();
// 获取秒
let second = now.getSeconds();
// 这里我们就可以建立一个数组存储大写的星期
// 然后在返回值中调用达到正常显示的目的
let arr = ['日','一','二','三','四','五','六'];
// 返回值,返回我们的动态时间并正常显示
return `${year} 年 ${month} 月 ${day} 日 星期${arr[week]} ${hour} 时 ${minute} 分 ${second} 秒`;
}
// 解决定时器的缺陷,让程序在时间间隔执行完毕之前,页面也有输出结果
time.innerHTML = setTime();
// 定义定时器,达到我们的时钟动态刷新的效果
setInterval(function () {
time.innerHTML = setTime();
},1000);
</script>
这样我们的动态时钟就算完成了,我们可以在页面中随时调用这个时钟了。