- 博客(16)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 client offset scroll 三大家族
var box = document.getElementById("box"); // 1. width 和 height /* // border + padding + 内容的宽度和高度 console.log(box.offsetWidth, box.offsetHeight); // padding + 内容的宽度和高度 console.log(box.clientWidth, box.clie...
2020-06-29 10:49:00
118
原创 瀑布流布局思路
瀑布流布局是页面在展示时形成层次不齐的感觉，在特定的情况下使用此种布局页面中的元素全是div，在这种布局中，使用浮动布局，加上定位。思路：获取所有的div元素获取盒子的宽度，宽度都是相同，高度不同在浮动布局中每一行的盒子个数不固定，是根据屏幕宽度和盒子宽度决定获取屏幕宽度求出列数，屏幕宽度 / 盒子宽度 取整瀑布流最关键的是第二行的盒子的排布方式，通过获取第一行盒子中最矮的一个的下标，绝对定位，top是最矮盒子的高度，left是最矮盒子的下标 * 盒子的宽度循环遍历所有的盒子，通过列数
2020-06-28 13:08:22
553
原创 scroll 家族
scroll兼容问题 获取页面上下位移，和左右位移ie9和最新的浏览器window.pageYOffset; scrollLeftwindow.pageYOffset; scrollTopFirfox浏览器和其他浏览器document.documentElement.scrollTopdocument.documentElement.scrollLeftChrome浏览器和没有声明 DTDdocument.body.scrollTopdocument.body.scrol
2020-06-27 18:18:16
109
原创 js 实现缓动动画
利用定时器来控制元素的offsetLeft的值，offsetLeft = 开始位置 + （最终位置 - 开始位置）* 缓动系数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; .
2020-06-26 17:16:01
292
原创 css offset家族
1. offsetWidth = 内容 + 左右内边距 + 左右边框 offsetHeight = 内容 + 上下内边距 + 上下边框style.width和 style.height 获取的是内容宽度和高度，想要改变宽度和高度也只能通过它2. offsetLeft offsetTop 距离第一个有定位的父级盒子左边和上边的距离。父盒子必须要有定位，如果没有，则以最终body为准3. offsetParent 找到最近的有定位的父级元素 pa
2020-06-26 15:27:52
786
原创 css3中 animation
animation 定义动画属性CSS animation 属性是animation-name，动画名称 用@keyframes定义动画animation-name属性是必须存在的，因为animation-name的值默认是none，没有动画。animation-duration, 动画持续时间默认值为0s，表示无动画。animation-timing-function，动画在每一动画周期中执行的节奏。可能值为一或多个（1）linear:表示动画从头到尾的速度都是相同的。（2）
2020-06-25 22:51:10
898
原创 js贪吃蛇
```javascript// 全局变量var sw = 20, sh = 20, td = 30, th = 30;var snake = null; //蛇的实例对象var game = null; //游戏的实例对象var food = null; //食物的实例对象// 方块// 方块的构造函数及原型链方法function Square(x, y, className) { this.x = x; this.y = y; t...
2020-06-16 21:08:54
151
原创 js中 数组相关函数
// 重写添加push方法 var arr = [1,2,3]; Array.prototype.push = function () { for(var i = 0; i < arguments.length; i++) { this[this.length] = arguments[i]; } return this.length; }...
2020-06-07 10:11:53
169
原创 js 中三目运算符
//三目运算符 只有两个判断是if else 时可以用三目运算符简化函数 // 条件判断 ？ 是 ： 否 并且返回值 // var num = 1 > 0 ? 2 + 2 : 1 + 1; //4 var num = 1 > 0 ? ("10" > "9" ? 1 : 0) : 2; //0function deepClone(origin, target) { var target ...
2020-06-06 23:48:13
378
原创 js 对象的拷贝 深浅拷贝
对象的拷贝：1.浅拷贝：直接拷贝所有属性，但是会出现原对象和克隆对象的引用值的地址相同，在改一个对象的属性会将另一个对象的属性改掉。2.深拷贝：在循环遍历原对象时，判断对象的每一个属性是否是引用值。 var obj = { name: 'abc', age: 123, sex: 'female', card: ['hahaha', 'hehehe'], wife: {
2020-06-06 23:20:57
134
原创 js 包装类
new String() new Boolean() new Number()只有原始值数字是原始值，原始值不能有自己的属性和方法属性和方法只有对象有，包括对象自己，数组，functionundefined null 不可以有属性原始值不可以有属性和方法，但经过了包装类（加隐式）可以调用一些属性与方法...
2020-06-04 11:37:15
159
原创 js 对象
对象的创建方法：1.var obj = {} 对象字面量/对象直接量2.构造函数：1）系统自带的构造函数Objectnew Object() Array() Number() Boolean() Date()2)自定义Object。create（原型）方法构造函数内部原理前提必须加new在函数体最前面加上var this = {} 空对象执行this.xxx = xxx隐式的返回return thisreturn 可以手动返回值，但只可以返回对象系统会自
2020-06-04 10:57:57
122
原创 js作用域精解
***[[scope]]????**每个JavaScript函数都是一个对象 对象中的有些属性我们可以访问，但也有些不可以，这些属性仅供JavaScript引擎存取，[[scope]]就是其中之一，[[scope]]指的就是我们所说的作用域，其中存储了运行时期上下文集合。**作用域链：[[scope]]中所存的执行期上下文对象的集合，这个集合呈链式连接，我们把这种链式链接叫作作用域链***运行期上下文：***当函数在执行的前一刻，会创建一个成为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时
2020-06-03 18:14:35
120
原创 js代码预编译过程
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
2020-06-01 19:10:55
197
原创 js 显示类型转化 Number parseInt parseFloat toString String Boolean
显示类型转化 Number parseInt parseFloat toString String Boolean 1.Number: true->1 false->0 null->0 undefined->NaN "a"->NaN 2.parseInt(demo,redix): (小数部分去掉,数转化成整形,非数都是NaN) true->NaN ...
2020-06-01 13:24:43
167
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人