01.Math
Math.random(); // 0 - 1 的随机数
Math.round(); //四舍五入取整
Math.ceil(); //向上取整
Math.floor(); //向下取整
Math.abs(); //绝对值
Math.max(num1,num2,num3
练习：
万花筒效果
<style>
*{
margin:0;
padding:0;
}
section{
width:300px;
height:100px;
background:black;
position:fixed;
top:0;bottom:0;
right:0;left:0;
margin:auto;
transform :rotateX(20deg) rotateY(50deg);
transform-style:preserve-3d;
}
div{
width:300px;
height:100px;
position :absolute;
}
</style>
<section id="box"></section>
<script>
//分析：
/*
tan 对边比临边
Math.tan((2 * Math.PI() / 360) * 30) = 对边 / 临边
*/
//万花筒的效果
var z = 150 / Math.tan((2 * Math.PI / 360) *30);
for(var i = 0 ; i < 6 ; i++){
/*重新确定旋转中心，让回到小人的身上，绕着小人旋转，然后，让z轴，位移(采用三角函数计算位移的距离，有六个拼接，
每个旋转360/60=60deg,做三角形，计算邻边的长度，每个图片的宽度为600，它的一半300为对边，使用Math.tan()计算出邻边)，
让每一个图片使用一个随机色代替，最后拼成一个万花筒的效果*/
box.innerHTML += '<div style="transform-origin:center center '+ (-z) +'px;transform:translateZ('+ z + 'px) rotateY('+ i * 60+ 'deg); background:'+ randomColor() + ' " ></div>';
}
//随机色
function randomColor(){
var str = '0123456789abcdef';
var color = '#';
//颜色值为#6个16进制数
for(var i = 0 ; i < 6 ; i++){
//charAt()根据下标获取字符串中的某一个字符(每一次随机一个1-15下标)
color += str.charAt(parseInt(Math.random()*16));
}
return color;
}
</script>
02.抛物线
<style>
* {
margin: 0;
padding: 0;
}
/* 形成坐标轴的样式 */
div:nth-of-type(1) {
width: 600px;
height: 1px;
background: red;
position: absolute;
top: 300px;
}
div:nth-of-type(2) {
width: 1px;
height: 600px;
background: blue;
position: absolute;
left: 300px;
}
span{
display:block;
width:2px;
height:2px;
background:red;
position:absolute;
}
</style>
<div></div>
<div></div>
<script>
for(var x = -300 ; x < 300 ; x++){
// 假设a=0.01;
var y = (-0.01) * Math.pow(x,2); //这里的负号代表的不是开口，由于定位的原因造成和数学里的开口方向的不同
document.write('<span style="left:' + (x + 300) + 'px; top:' + (y + 300) + 'px; "></span>')
}
</script>
03.随机颜色封装
<script src="../myApi.js"></script>
<script>
/*
rgb(255,255,0);
16进制 #ff0000;
toString(16) 把字符转进制
*/
function randomColor(){
var
r = randomNum(0,255), //rgb的取值范围为0-255
g = randomNum(0,255),
b = randomNum(0,255);
return systemChange(r,g,b);
}
function systemChange(r,g,b){ //转进制，16进制后，如果得到的数为一位数，需要补零操作
r = r.toString(16).length < 2 ? '0' + r.toString(16) : r.toString(16);
g = g.toString(16).length < 2 ? '0' + g.toString(16) : g.toString(16);
b = b.toString(16).length < 2 ? '0' + b.toString(16) : b.toString(16);
return '#' + r + g + b;
}
document.body.style.background = randomColor();
console.log(randomColor());
</script>
04.时间对象
1.js里面的对象
-
宿主对象： DOM 、 BOM
-
内部对象： new Array() 、 new Object() 、new String() 、new Function()
-
内置对象：Math
2.new Date()
存在着时间的信息（传参：字符串，数字，时间戳）
创建过去或者未来的时间对象
过去：
var agoTime = new Date('2018-09-04 12:00:00');
var agoTime = new Date('2018/09/04 12:00:00');
var agoTime = new Date(2018,00,01);
未来：
var futuerTime = new Date('2037-09-04');
现在：
var nowTime = new Date()
获取时间戳：获取的是1970年1月1日到现在的毫秒数
date.getTime();
简单测试：
var nowTime = new Date();
console.log(nowTime);
//过去
var agoTime = new Date('1997-11-04'); //传一个字符串
console.log(agoTime); //Tue Nov 04 1997 08:00:00 GMT+0800 (中国标准时间)
var agoTime = new Date('1997/11/04 12:00:00'); //以斜杠隔开
console.log(agoTime); //Tue Nov 04 1997 12:00:00 GMT+0800 (中国标准时间)
var agoTime = new Date('1997,11,04 12:00:00'); //以逗号隔开
console.log(agoTime); //Tue Nov 04 1997 12:00:00 GMT+0800 (中国标准时间)
//未来
var futureTime = new Date('2024-3-20');
console.log(futureTime); //Wed Mar 20 2024 00:00:00 GMT+0800 (中国标准时间)
//创建一个五天之后的时间（可以传递时间戳）
var nowTime = new Date();
var futureTime = new Date(nowTime.getTime() + (5 * 24 * 60 * 60 * 1000));
console.log(futureTime);
查看元素的一些属性：console.dir
扫描二维码关注公众号，回复：
7180298 查看本文章
05.时间对象api
获取里面：年月日 时分秒 星期几 毫秒数
时间的对象api
1：年份
getFullYear() 获取
setFullYear() 设置
2：月份
getMonth(); 获取0-11;
setMonth(); 设置
3：星期
getDay() 获取
4:多少号
getDate() 获取
setDate() 设置 如果把日期设置为0的情况下。保存的是上个月的天数
eg：怎么获取当月的天数
分析：
a:先把月份设置成下个月
date.setMonth(date.getMonth()+1);
b:再把日期设置为0
date.setDate(0);
c:在获取getDate();
5:时
getHours() 获取
setHours() 设置
6:分钟
getMinutes() 获取
setMinutes() 设置
7:秒
getSeconds() 获取
setSeconds() 设置
8:毫秒
getMilliseconds() 获取
setMilliseconds() 设置
对时间对象api的检测：
var date = new Date();
//获取年份
var year = date.getFullYear();
console.log(year); //2019
//设置年份
date.setFullYear(2012);
var year = date.getFullYear();
console.log(year); //2012
//获取月份
var month = date.getMonth();
console.log(month); //8 (9月份，由于月份是从0-11)
//设置月份
date.setMonth(3);
var month = date.getMonth();
console.log(month); //3
//星期
var day = date.getDay();
console.log(day); //3 不能设置，只能获取
//多少号
console.log(date.getDate()); //4
// //设置多少号
date.setDate(10);
console.log(date.getDate()); //10
//时
var hours = date.getHours();
console.log(hours); //17
//设置多少时
date.setHours(4);
var hours = date.getHours();
console.log(hours); //4
//分
var minutes = date.getMinutes();
console.log(minutes); //24
//设置多少分
date.setMinutes(40);
var minutes = date.getMinutes();
console.log(minutes); //40
//秒
console.log(date.getSeconds()); //26
//设置多少秒
date.setSeconds(30);
console.log(date.getSeconds());
//毫秒
console.log(date.getMilliseconds()); //801 1s = 1000ms
//设置毫秒
date.setMilliseconds(2);
console.log(date.getMilliseconds()); //2
06.日历效果
<style>
*{
margin:0;
padding:0;
}
header{
width:770px;
overflow:hidden;
margin:30px auto 0;
}
div{
float:left;
width:100px;
height:100px;
border-radius:50%;
background:tomato;
margin:5px;
text-align:center;
line-height:100px;
font-size:30px;
font-weight:bold;
color:#fff;
}
section{
width:770px;
overflow:hidden;
margin:0 auto;
}
/*span*/
span{
float:left;
width:100px;
height:100px;
border-radius: 50%;
background:#ccc;
margin:5px;
}
section div{
background:gold;
}
</style>
<header id="box1">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</header>
<section id="box2">
</section>
<script>
/*
1.获取当月第一天为周几（打的空格的数量）
2.获取当月的天数
*/
var date = new Date();
//date.setMonth(4); //因为刚好9月的第一天是星期天，所以，测试了4月的，当第一天不从周天开始的时候，用span补齐
//设置当月的第一天
date.setDate(1);
var week = date.getDay(); //0 周日 （当月的第一天是星期几）
//打印空格
for(var i =