JS标准库----Math对象,Date 日期对象,定时器
Math对象
提供了各种数学功能,不是一个构造函数,不能产生实例。
Math.abs(); 返回绝对值
var num1 = -1;
console.log(Math.abs(num1));
max(a,b,c) 返回参数中最大值
console.log(Math.max(1,3,9,7));
min(a,b,c) 返回参数中最小的值
console.log(Math.min(1,3,9,7));
floor(num) 返回小于或等于参数值的最大整数(地板值,下舍入)
console.log(Math.floor(3.8));
ceil(num) 返回大于或等于参数值的最小整数(上舍入);
console.log(Math.ceil(3.3));
round() 四舍五入
console.log(Math.round(3.5));
pow() 幂运算
console.log(2 ** 3);
console.log(Math.pow(2,3)); // 2为底数,3为指数的幂运算。
sqrt() 平方根
console.log(Math.sqrt(4));
random() 返回0-1之间的随机数
// random() 返回0-1之间的随机数,可以等于0,但是不等于1。
var num4 = Math.random();
// 产生1-3的整数 2-6
num4 = Math.floor(Math.random()*3+1); // 1-3.999999
// 封装产生范围内的随机整数方法
function randomInt(min, max){
return Math.floor(Math.random()*(max-min+1)+min)
}
console.log(randomInt(2,6));
// 写一个产生随机的4位验证码的方法
function randomCode(){
let str = "";
for(let i=0;i<4;i++){
str += randomInt(0,9);
}
return str;
}
console.log(randomCode());
Date 日期对象
Date 日期对象,是一个构造函数,获取当前时间作为对象。
Date 日期计算起始时间(零点)是从 1970年1月1日 00:00:00
作为普通函数使用,返回当前的时间字符串
console.log(Date())
作为构造函数使用,返回日期对象
var date1 = new Date(); // 默认调用了实例的toString(),显示出来是一个日期字符串
console.log(date1);
Date.now(); // 返回当前时间距离零点时间的毫秒数(时间戳)
console.log(Date.now());
Date.parse() 解析日期字符串,返回日期离零点直接的毫秒数
console.log(Date.parse('Sun Jul 10 2022 21:45:21 GMT+0800 (中國標準時間)'))
console.log(Date.parse('Sun Jul 10 2022'))
console.log(Date.parse('2022-10-10 23:10:10'))
console.log(Date.parse('xxxxx'))
get方法获取具体的年月日,时分秒
var date2 = new Date();
console.log(date2.getFullYear()); // 获取年
console.log(date2.getMonth()+1); // 获取月,从0开始计算,需要+1
console.log(date2.getDate()); // 获取日期
console.log(date2.getDay()); // 周几,星期日为0。
console.log(date2.getHours()); // 获取小时
console.log(date2.getMinutes()); // 获取分钟
console.log(date2.getSeconds()); // 获取秒
console.log(date2.getTime()); // 距离零点的毫秒数(时间戳)。
var date2 = new Date("2022-10-10 23:10:10"); // 可以传入时间戳,日期字符串转为日期对象。
set方法可以设置日期,与get对应。
date2.setFullYear("2033");
date2.setDate(12)
console.log(date2);
定时器*
setInterval(表达式,毫秒值) 间隙性计时器
clearInterval() 清除计时器
setTimeout(表达式,毫秒值) 一次性计时器(定时器)
clearTimeout()清除计时器
js提供了定时执行js代码的功能,叫定时器。主要由两个内置的定时器方法实现。
一. setTimeout(function(){},delay);
-
该函数指定某个方法在,delay毫秒之后执行,只执行一次。返回值是该定时器在程序内部的索引值。
var index = setTimeout(function(){ document.write("hello"); }, 2000); console.log(index);
-
clearTimeout(index);//根据定时器的索引清除定时器,定时器不会运行。
clearTimeout(index);
-
实现每隔一段时间执行函数
// 3.1 输出5次hello就停止。 var count = 1; // 创建变量计算hello输出次数,当大于5以后,不再调用write方法。 function write(){ setTimeout(function(){ document.write(count+"-hello,"); count++; if(count<6){ write(); } },2000); } write();
二、setInterval(function,delay),
1.每隔delay毫秒执行一次函数,会一直执行。返回值是该定时器的索引值
var index = setInterval(function(){
document.write("hello");
}, 2000);
-
clearInterval(index),停止计时器。
clearInterval(index);
-
输出5次hello就停止。
var counta = 1; var setIndex = setInterval(function(){ document.write(counta + "-hello,"); counta++; if(counta >5){ clearInterval(setIndex); } }, 2000);
三、 如果计时器用变量代替函数,变量不要添加()
var handle = function(){
document.write("time out");
};
setTimeout(handle,2000)
四、 定时器调用函数传递参数,定时器函数的第三个参数开始就是给调用的函数传递参数。
var handle = function(name,age){
document.write("time out "+name+age);
};
setTimeout(handle,2000,111,100);
案例一:显示当前时间
<body>
<div></div>
<script>
let div = document.querySelector("div");
setInterval(function () {
let time = new Date();
let hours = time.getHours();
let minutes = time.getMinutes();
let seconds = time.getSeconds();
h1.innerHTML = `${hours}:${minutes}:${seconds}`;
}, 1000)
</script>
</body>
案例二:秒表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo27</title>
</head>
<body>
<button class="start">开始</button>
<button class="pause">暂停</button>
<button class="stop">重置</button>
<h1></h1>
<script>
let start = document.querySelector(".start");
let pause = document.querySelector(".pause");
let stop = document.querySelector(".stop");
let h1 = document.querySelector("h1");
let seconds = 0;
let ms = 0;
h1.innerHTML = `${seconds}:${ms}`;
let timer = null;
start.onclick = function () {
// 重复点击开始按钮时,先停止上一次的计时器
clearInterval(timer);
timer = setInterval(() => {
if (ms === 9) {
++seconds;
ms = 0;
}
++ms;
h1.innerHTML = `${seconds}:${ms}`;
}, 100);
}
pause.onclick = function () {
clearInterval(timer);
}
stop.onclick = function () {
clearInterval(timer);
seconds = 0;
ms = 0;
h1.innerHTML = `${seconds}:${ms}`;
}
</script>
</body>
</html>