一.math
1.floor 向下取整
就是保留最小整数
console.log(Math.floor(1.1));-------值为1
console.log(Math.floor(1.9));----------值为1
console.log(Math.floor(-1.1));----------值是-2
2.ceil 向上取整
就是保留最大整数
console.log(Math.ceil(1.1));----值为2
console.log(Math.ceil(1.8));---------值为2
console.log(Math.ceil(-1.8));---------值为-1
天花板:ceil--------向天花板取整,也就是向最大数值取整
3.round 四舍五入取整
遵循四舍五入规则
console.log(Math.round(1.1));----------值为1
console.log(Math.round(1.5));----------值为2
4.sqrt 开方
相当于加根号
console.log(Math.sqrt(9));--------值为3
console.log(Math.sqrt(8.8));---------值为2.9左右
开平方:Square Root Calculations----------缩写sqrt
5.pow(m,n) 返回m的n次方
console.log(Math.pow(2,3));值为2的3次方,也就是8
次方:power-------缩写为pow
6.Max(x1,x2...) 返回最大值
console.log(Math.max(1,2,3,-5));值为3
7.min(x1,x2...) 返回最小值
console.log(Math.min(1,2,3,-5));
8.abs 绝对值
console.log(Math.abs(-5));
绝对值:absolute value-----------缩写为abs
9.random
Math.random(): 返回0~1之间的随机数(左闭右开)
案例:
for(var i=0; i<20; i++){
console.log(Math.round(Math.random()*10));[0,10] math-random后面乘的数就是随机数最小到最大的范围。随机数默认从零开始,到所乘的数结束,所以想要改变随机数变化的区间,可以通过调整乘数大小以及给函数整体加减具体数字来解决
console.log(Math.round(Math.random()*7)); 此处函数乘以7,故变化区间就在0-7之间
console.log(Math.round(Math.random()*5)+1);--------[1,6] 想让变化区间的最小值和最大值增加,整体往x轴正方向平移,则需要给函数与相应数值乘积的整体加具体的数字。
console.log(Math.round(Math.random()*6)+3);--------[3,9]
console.log(rand(2,8));----------这个是引入的js文件里面提前写好的函数,意思是生成括号内数字作为左右区间范围内的随机数(没有定时器的情况下需要手动刷新看效果)
}
js文件内:
function rand(max,min){
return Math.round(Math.random()*(max-min)+min) 即带入需要的最大值与最小值就可以得到相应的随机数区间
}
彩虹条案例:
代码思路:
1.颜色是如何构成的?
本质是#加6位16进制的数字(#111111~#ffffff)
代码:
var color = "#";
var str = "0123456789abcdef";-----------------包含所有十六进制数的字符串,一共十五个字符
for(let i=0; i<6; i++){
color += str.charAt(rand(0,15));------------此处使用提前写好的函数随机生成0-15之间的数字作为字符串索引的下标,等同于从字符串随机选择一个字符;然后拼接到#后面,每组循环六次,正好给#后面拼接6个随机数字,生成一个颜色
}
console.log(color);
2.如何将生成的随机颜色以js对象的方式赋值给li
代码:
var oTest = document.getElementById("test");
oTest.style.backgroundColor = color;
3.如何批量的获取li元素 getElementsByTagName(意思是按照标记名获取元素)
document.getElementsByTagName("标签名"):返回标签对应的所有HTML元素,存放至数组中
html:
<ul>
<li id="test"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
script:
setInterval(function(){--------这是定时器
var oLis = document.getElementsByTagName("li");---------通过标记名获取html元素组成oLis数组
var color = "#"; color赋初值为“#”特殊字符串,一会只要给后面循环加上不同的六位十六进制数就好
var str = "0123456789abcdef";----------包含十六进制数字与所有字母的字符串,
for(var i=0; i<oLis.length; i++){ 以li组成的数组作为外循环,遍历数组为其中的每一个li加上颜色属性;
for(var j=0; j<6; j++){----------循环十六进制里的六个数位,在这里循环6次为一组,为每位数随机赋值并拼接到color的字符串“#”后面,凑够【#+六位数】刚好构成一个十六进制颜色;
color += str.charAt(rand(0,15));-----------js文件中提前写好的函数,代表随机生成0-15范围内的一个数字作为str下标,索引到str字符串对应字符,然后拼接到color的值后面
}
oLis[i].style.backgroundColor = color; 注意这里的backgroundColor,在js里面所有的-拼接属性都必须去掉连字符然后后面的单词首字母大写;
color = "#";
}
},50);---------50代表50毫秒执行一次回调函数的代码
二.date日期
1.日期的创建方法
1)无参
创建此时此刻运行的日期对象
var date = new Date();
console.log(date);
2)有参
"日期格式字符串": "YYYY-MM-DD,hh:mm:ss"
var date1 = new Date("日期格式字符串");
var date1 = new Date("1997-07-01,12:13:14");
console.log(date1);
2.提取日期对象的所有属性
1)年
var date = new Date();
console.log(date.getFullYear());
2)月
var date = new Date();月份获取的值会比当下月份少一个月(代码习惯从0开始导致的),所以应用的时候要加上1
console.log(date.getMonth());
3)日
var date = new Date();
console.log(date.getDate());
4)时
var date = new Date();
console.log(date.getHours());
5)分
var date = new Date();
console.log(date.getMinutes());
6)秒
var date = new Date();
console.log(date.getSeconds());
7)星期
取值范围0-6 日,一,二,三,四,五,六
var date = new Date();
console.log(date.getDay());
8)综合案例
要求:将日期转为自定义格式
xxxx年xx月xx日 hh:mm:ss 星期x
代码:
function myDate(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = toTwo(date.getDate());
var h = date.getHours();
var mm = date.getMinutes();
var s = date.getSeconds();
var w = date.getDay();
var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var str = y+"年"+m+"月"+d+"日 "+h+":"+mm+":"+s + " " + week[w];
return str;
}
function toTwo(v){
return v>=10?v:"0"+v;
}-----------这段代码利用三目运算,意思是当v代表的数字不小于10(变成两位数),返回v本身的值,当v代表的数字小于10(一位数),就给前面拼接一个字符串“0”,保证数字占位始终是两位,有利于页面其他局部不受数字长短变化影响。此处可以将函数直接在规定日期形式的主调函数里面调用,分别用除了年份与星期几以外的数字作为参数,保证这些数字始终占位相同,无论是一位数还是两位数,都占两个位置
console.log(myDate(date));
3.日期定义方式
按照本地格式打印日期对象
console.log(date.toLocaleString());
生成页面运行时的日期对象
var date = new Date();
通过日期格式字符串,生成指定日期对象
"yyyy-MM-dd,hh:mm:ss"
var date = new Date("2001-2-1,15:32:32");
console.log(date.toLocaleString());
通过时间戳生成指定日期对象
时间戳函数:Date.parse("2001-2-1,15:32:32"),
返回该日期字符串距离1970年1月1日相差的毫秒数
console.log(Date.parse("2001-2-1,15:32:32"));
var date = new Date(981012752000);
console.log(date.toLocaleString());
4.时间戳
1)概念
时间戳:距离1970年1月1日相差的毫秒数
2)案例
var date = new Date("1997-05-06");----------在这里日期格式字符串作用与毫秒计的时间戳功能相似,一般用日期格式字符串
Date.parse("日期格式字符串"):返回时间戳
console.log(Date.parse("1997-05-06"));
console.log(date.toLocaleString());
5.设置时间
setDate() ----------------------------改变Date对象的日期
setHours() ----------------------------改变小时数
setMinutes() ----------------------------改变分钟数
setMonth() ----------------------------改变月份,从0开始
setSeconds() ----------------------------改变秒数
setFullYear() ----------------------------改变年份
var date = new Date();
date.setDate(date.getDate()+10);------当前时间基础上加十天,一般用于登录有效期之类的
date.setFullYear(2222);
console.log(date.toLocaleString());-------本地格式打印
6.时间差
日期date是可以相减的
案例:
var date1 = new Date();
var date2 = new Date("2000-12-29");
console.log(Math.round((date1-date2)/1000/60/60/24));-------此处直接得出的值如果不经历任何处理,就是以毫秒计算单位的,所以要除后面的数字最终得到得到天数
7.定时器
循环定时器:
setInterval(回调函数,时间间隔);
返回值:关闭定时器的钥匙(可以赋值给新建变量,然后将变量填写在关闭clearinterval函数的括号里面)
关闭定时器的钥匙
clearInterval(钥匙)
案例1:
var count = 0;
var fun = function(){
console.log(++count);
}
setInterval(fun,1000);
案例2:
var time = setInterval(function(){ -------------匿名函数
console.log(++count);
if(count == 5){
clearInterval(time);
}
},1000);
案例3:简易时钟
html:
<input type="text" value="时间" id="time">
script:
var oTime = document.getElementById("time");
setInterval(function(){
var date = new Date();------------获取本地时间
oTime.value = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
},1000); 变成时:分:秒格式的拼接时间获取函数与字符串,然后加上循环定时器,每秒执行一次,也就是每秒从本地获取一次时间信息
setTimeout(倒计时)
setTimeout(function(){
console.log("boom!!!");--------------倒计时3秒在控制台打印“boom!!!”
},3000);