🌈个人主页：前端青山
🔥系列专栏：JavaScript篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-Math和Date对象详解
目录
Math对象（Math对象不能new!!!!)
案例
计时器
Date对象
如何创建日期对象？
如何访问日期对象中的信息？
如何设置日期对象中的信息？
如何以本地格式的字符串输出日期对象？
案例
简单的代码异步执行机制
Math对象（Math对象不能new!!!!)
-
Math.PI 圆周率
-
Math.abs() 求绝对值
-
Math.round() 四舍五入
如果负数时， > 0.5 进一 <=0.5 舍去
console.log(Math.round(4.5)); //5
console.log(Math.round(4.4)); //4
console.log(Math.round(-4.5)); // -4
console.log(Math.round(-4.5000001)); // -5
console.log(Math.round(-4.4)); //-4
console.log(Math.round(-4.6)); //-5-
Math.ceil() 向上取整
console.log(Math.ceil(4.1)); //5
console.log(Math.ceil(4.9)); //5
console.log(Math.ceil(-4.1)); //-4
console.log(Math.ceil(-4.9)); // -4-
Math.floor() 向下取整
console.log(Math.floor(4.1)); //4
console.log(Math.floor(4.9)); //4
console.log(Math.floor(-4.1)); //-5
console.log(Math.floor(-4.9)); // -5-
Math.max() 最大值
-
求数组中最大值： Math.max.apply(null,数组) Math.max( ... 数组名)
-
求数组中最小值： Math.min.apply(null,数组) Math.min( ... 数组名)
var arr = [2,3,1,4,5,3,4];
console.log(Math.max(2,3,1,4,5,3,4));
console.log(Math.min(2,3,1,4,5,3,4));
console.log(Math.max.apply(null,arr));
console.log(Math.min.apply(null,arr));-
Math.pow(m,n) 求m的n次方
-
Math.sqrt(n) 求n的开方
-
Math.random() 随机数 0 <= n < 1
Math.floor(Math.random() * (max - min + 1) + min) 推荐 Math.round(Math.random() * (max - min) + min)
function random(min,max){
if(min > max){
var t = min;
min = max;
max = t;
}
return Math.floor(Math.random() * (max - min + 1) + min);
}案例
-
实现猜数字游戏（1~10，三次机会）
<!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>Document</title>
</head>
<body>
<input type="button" value="你猜？" id="btn">
<script>
//实现猜数字游戏（1~10，三次机会）
/*
1~10 ? 得到一个什么样的信息？ 随机数
三次机会？想到了什么呢？ 用户输入三次，循环3次
如果第一次用户就猜中了？后面的两次机会还需要吗？如果不需要了？怎么办？ break
*/
//一、获取页面元素
var o_btn = document.getElementById('btn');
//二、添加事件
o_btn.onclick = function(){
//1. 随机一个整数：（1~10）
var rand = Math.floor(Math.random() * 10 + 1);
//2. 让用户去猜，且有三次猜的机会，所以使用循环
for(var i = 1;i < 4;i ++){
//问用户接收一个整数
var n = parseInt(prompt('请输入1~10中的一个整数：'));
//检测用户输入的整数是否等于随机数
if(rand === n){
alert('您猜中了!');
break; //退出循环
}else if(n > rand){
alert('您猜大了！');
}else{
alert('您猜小了！');
}
}
//3. 三次机会用完了
if(i === 4){
alert('很遗憾，你挑战失败！正确的数字是：' + rand);
}
}
</script>
</body>
</html>-
封装一个随机颜色的函数（至少封装三种）
<!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>Document</title>
<style>
#box{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="button" value="你猜？" id="btn">
<div id="box"></div>
<script>
//封装一个随机颜色的函数（至少封装三种）
/*
1. 单词 ['red','green','blue'] pass
2. #十六进制 6个 #ffffff 白色 #000000 黑色
3. rgb(0~255,0~255,0~255)
*/
function randColor01(){
// 在乘的时候会自动将(0xffffff)这个十六进制数转为十进制，求出随机数后再转为十六进制
return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
}
function randColor02(){
var str = '#';
//颜色有6个十六进制数
for(var i = 0;i < 6;i ++){
str += Math.floor(Math.random() * 17).toString(16);
}
return str;
}
function randColor03(){
var arr = [];//放置颜色值
for(var i = 0;i < 3;i ++){
arr.push(Math.floor(Math.random() * 256)); //[45,23,233]
}
// 45,23,233
return 'rgb(' + arr.join() + ')';
}
function randColor04(){
var str = 'rgb(';//放置颜色值
for(var i = 0;i < 3;i ++){
str += Math.floor(Math.random() * 256) + ','; //'rgb(33,44,55,'
}
return str.slice(0,-1) + ')';
}
console.log(randColor01());
console.log(randColor02());
console.log(randColor03());
// alert(randColor03());
//获取按钮
var o_btn = document.getElementById('btn');
//获取div
var o_div = document.getElementById('box');
//添加事件
o_btn.onclick = function(){
//改变div的背景颜色
o_div.style.backgroundColor = randColor03();
}
</script>
</body>
</html>-
封装一个4位验证码的函数（包含数字大写字母小写字母）
<script>
/*
封装一个4位验证码的函数（包含数字大写字母小写字母）
4位验证码? 循环四次
包含数字大写字母小写字母？ 数组 字符串 下标
*/
function verificationCode(n){
//包含的内容
var str = '0123456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM';
var code = '';
//n位验证码
for(var i = 0;i < n;i ++){
code += str.charAt(Math.floor(Math.random() * str.length));
}
return code;
}
alert(verificationCode(6));
</script>-
扁平化数组 如：[1,2,[3,[4,5],[6,7],8],9] [1,2,3,4,5,6,7,8,9]
<!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>Document</title>
</head>
<body>
<script>
/*
扁平化数组 如：[1,2,[3,[4,5],[6,7],8],9] [1,2,3,4,5,6,7,8,9]
1. 不知道里面有多少层数组，也就不知道嵌套多少层循环，这时候，使用递归解决
instanceof : 检测当前对象是否属于某一个类返回布尔
*/
// [1,[2,3]] [1,2,3]
function delayering(data){ //data : 数据
//准备一个新数组
//1.2.1
var list = [];
//1. 判断data 是否为数组
if(data instanceof Array){
//如果data是数组，返回true
//遍历数组
//1.1
for(var i = 0,len = data.length;i < len;i ++){
list = list.concat(delayering(data[i]));
}
}else{ //如果data不是数组，返回false,执行else
//不是数组的这个元素，给它添加到一个新数组中
//1.2
list.push(data);
}
//返回新数组
//2
return list;
}
console.log(delayering([1,[2,3]]));
console.log(delayering([1,2,[3,[4,5],[6,7],8],9]))
data = [1,[2,3]]
var list = [1,2,3];
list = list.concat(delayering(1)); [1]
list = list.concat(delayering([2,3])); [2,3]
return list; [1,2,3]
data = 1
var list = []
list.push(1); [1]
return [1]
data = [2,3]
var list = [2,3];
list = list.concat(delayering(2)); [2]
list = list.concat(delayering(3)); [3]
return [2,3]
data = 2
var list = [];
list.push(2); [2]
return [2];
data = 3
var list = [];
list.push(3); [3]
return [3];
</script>
</body>
</html>计时器
-
timer = setInterval(函数,毫秒数) : 间歇性计时器
-
clearInterval(timer) : 取消计时器
-
timer = setTimeout(函数,毫秒数) : 一次性计时器、延时器、定时器
-
clearTimeout(timer);
Date对象
如何创建日期对象？
-
var date = new Date();
-
var date = new Date(2002,2,5); //0~11
-
var date = new Date(2002,2,5,18,30,50); //0~11
-
var date = new Date('2002-3-5'); //1~12
-
var date = new Date('2002-3-5 18:30:50'); //1~12
-
var date = new Date('2002/3/5'); //1~12
-
var date = new Date('2002/3/5 18:30:50'); //1~12
如何访问日期对象中的信息？
-
date.getFullYear() //年
-
date.getMonth() //月 0~11
-
date.getDate() //日
-
date.getDay() //星期
-
date.getHours() 时
-
date.getMinutes() 分
-
date.getSeconds() 秒
-
date.getMilliseconds() 毫秒
-
date.getTime() 时间戳
如何设置日期对象中的信息？
-
date.setFullYear() 年
-
date.setMonth() 0~11
-
date.setDate() 日
-
date.setHours() 时
-
date.setMinutes() 分
-
date.setSeconds() 秒
-
date.setMilliseconds() 毫秒
-
date.setTime() 时间戳
如何以本地格式的字符串输出日期对象？
-
date.toLocaleString() 本地格式的日期时间字符串
-
date.toLocaleDateString() 本地格式的日期字符串
-
date.toLocaleTimeString() 本地格式的时间字符串
案例
-
求出自己已生活了多少天零多少小时零多少分钟零多少秒钟？
<script>
//求出自己已生活了多少天零多少小时零多少分钟零多少秒钟？
// 1天 = 24小时
// 1小时 = 60分
// 1分 = 60秒
// 1秒 = 1000毫秒
//1. 获取当前的日期时间
var now = new Date();
//2. 生日
var birthday = new Date('1984/3/5 18:30:50');
//3. 求两个时间的差值
// var minus = now - birthday; //毫秒数
var minus = Math.floor((now.getTime() - birthday.getTime()) / 1000); //秒
//4. 求天数
var date = Math.floor(minus / 60 / 60 / 24);
//5. 求小时
var hours = Math.floor((minus - date * 24 * 60 * 60) / 60 / 60);
//6. 分钟
var minutes = Math.floor((minus - date * 24 * 60 * 60 - hours * 60 * 60) / 60);
//7. 秒
var seconds = minus % 60;
console.log(date + '天' + hours + '时' + minutes + '分' + seconds + '秒');
</script>-
写出距当前日期7天后的日期时间（注，使用日期对象的方法实现，不允许自己计算）
<script>
//写出距当前日期7天后的日期时间（注，使用日期对象的方法实现，不允许自己计算）
// date date.setDate(date.getDate() + 7)
function nDaysAfter(n){
var date = new Date(); //创建日期对象
//设置当前的日 （ 当前的日期 + 指定的天数)
date.setDate(date.getDate() + n);
return date;
}
console.log(nDaysAfter(3).toLocaleString());
console.log(nDaysAfter(7).toLocaleString());
</script>-
数码时钟
<!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>Document</title>
<style>
.sp{
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<div id="time">
<img src="img/0.jpg" alt="">
<img src="img/0.jpg" alt="">
<span class="sp">:</span>
<img src="img/0.jpg" alt="">
<img src="img/0.jpg" alt="">
<span class="sp">:</span>
<img src="img/0.jpg" alt="">
<img src="img/0.jpg" alt="">
</div>
<script>
/*
document.querySelectorAll(选择器) : 通过选择器获取所有的元素。返回一个伪数组（类数组）
伪数组（类数组）：
1. 与数组相同的地方：都可以通过下标访问。都有length属性
2. 与数组不同的地方：伪数组没有数组的方法。
*/
//一、获取页面元素
//获取div#time中所有的img
var o_img = document.querySelectorAll('#time>img');
setInterval(function(){
//二、获取当前本地时间
//1. 创建日期对象
var date = new Date();
//1.1 获取时
var hours = date.getHours();
//1.2 获取分
var minutes = date.getMinutes();
//1.3 获取秒
var seconds = date.getSeconds();
//2. 将时分秒三段数字分解为6个数字并存在一个数组中
// 11 2
var arr = [
hours < 10 ? 0 : Math.floor(hours / 10), hours % 10,
minutes < 10 ? 0 : Math.floor(minutes / 10),minutes % 10,
seconds < 10 ? 0 : Math.floor(seconds / 10),seconds % 10
]
console.log(arr);
//3. 将图片中的src地址更改为当前时间对象的数字
//遍历伪数组
for(var i = 0,len = o_img.length;i < len;i ++){
o_img[i].src = 'img/' + arr[i] + '.jpg';
}
},1000)
</script>
</body>
</html>-
倒计时
<!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>Document</title>
</head>
<body>
<input type="text" name="" id="hours">:
<input type="text" name="" id="minutes">:
<input type="text" name="" id="seconds">
<script>
//获取元素
var o_hours = document.getElementById('hours');
var o_minutes = document.getElementById('minutes');
var o_seconds = document.getElementById('seconds');
//倒计时
var timer = setInterval(function(){
//1. 现在时间
var now = new Date();
//2. 两点到期
var date = new Date('2022/12/9 14:00:00');
//3. 求时间差
var minus = Math.floor((date.getTime() - now.getTime()) / 1000);
//4. 求小时
var hours = Math.floor(minus / 60 / 60);
//5. 求分
var minutes = Math.floor((minus - hours * 60 * 60) / 60);
//6. 求秒
var seconds = minus % 60;
console.log(hours + ':' + minutes + ':' + seconds);
o_hours.value = hours;
o_minutes.value = minutes;
o_seconds.value = seconds;
//7. 倒计时的停止条件
if(hours === 0 && minutes === 0 && seconds === 0){
clearInterval(timer);
alert('倒计时结束！');
}
},1000)
</script>
</body>
</html>简单的代码异步执行机制
同步：按步骤执行
异步：同时进行
-
计算机程序执行分为同步执行,和异步执行:
所谓的异步执行,是一种特殊的程序的执行方式，常见的异步程序有:
定时器（setInterval），延时器（setTimeou），各种事件的绑定（onclick......），ajax请求
-
异步程序的执行过程
-
从第一行代码开始执行
-
同步程序开始执行
-
遇到异步程序了，暂时不执行，将异步程序暂时存储在“异步池”中
-
所有的同步程序执行完毕
-
开始执行“异步池”中的异步程序
-
若有设定了时间的程序，就会先执行到点了的程序
-
若有设定的时间是相同的程序，则依照书写顺序执行
-
-
setTimeout(function(){
console.log('我是异步执行的程序1');
} , 2000);
setTimeout(function(){
console.log('我是异步执行的程序2');
} , 1000);
console.log('我是同步执行的程序')
//结果依次是：
//我是同步执行的程序
//我是异步执行的程序2
//我是异步执行的程序1
