js学习笔记----进阶Day01星海特效等和offset家族

星海特效

1. 获取网页可视区域的宽度高度

var screenW = document.documentElement.clientWidth;

var screenH = document.documentElement.clientHeight;

document.body 或者给body设置id都可以拿到body

3. 设置类名
4. 给宽高, 大小, 闪烁延时加上随机数

var x = Math.random() * screenW;
var y = Math.random() * screenH;

// 4.设置位置
star.style.left = x + 'px';
star.style.top = y + 'px';

// 5.大小随机
var scale = Math.random() * 1.5;
star.style.transform = "scale("+ scale +")";

// 6.动画延迟
var del = Math.random();
star.style.animationDelay = del + "s";

js实际上控制的是行内级. 若需要修改js的属性则将CSS样式的属性加!important.

常用函数库

• 外链使用js

<script src="js/underscore.js"></script>
<script>
</script>

1. each

2. map功能强大

3. random 可以取到边界和负数

4. without 删掉数组中的元素 原数组不改变

照片墙

offset家族

• offsetleft: 为元素到最近的定位祖先元素的距离

事件对象

1. event.clientX 光标距离网页可视范围的坐标

2. event.pageX 光标距离网页(包括滚动的范围, 注意滚动条)的坐标

3. event.screenX 光标距离显示器的坐标

var event = event || window.event;
// 光标距离网页可视距离的x,y坐标值
console.log(event.clientX, event.clientY);

// pageX pageY 光标距离文档左边/上边的距离
console.log(event.pageX, event.pageY);

// screenX screenY 光标距离屏幕(显示器🖥)的左边距离和上边距离
console.log(event.screenX, event.screenY);

// 获取点击的事件对象
console.log(event.target);
// js是链式编程  只要前面是对象就可以无限点
console.log(event.target.id);
console.log(event.target.className);

放大镜

• 公式: 大盒子图片移动的距离 = 蒙版移动的距离 x / 小盒子的宽度 * 大盒子的宽度

js为弱语言 : for循环里的局部变量, 在for循环执行结束后不会被销毁

onclick 和 onmousedown区别: onclick 抬起时才触发事件. onmousedown在按下时触发

• 保留两位小数的方法

scale = parseInt(scale * 100) / 100;

断点调试js

• watch里可写js代码

1. debugger;

2. chrome -> source