自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(16)
  • 资源 (2)
  • 收藏
  • 关注

原创 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 27

原创 瀑布流布局思路

瀑布流布局是页面在展示时形成层次不齐的感觉,在特定的情况下使用此种布局页面中的元素全是div,在这种布局中,使用浮动布局,加上定位。思路:获取所有的div元素获取盒子的宽度,宽度都是相同,高度不同在浮动布局中每一行的盒子个数不固定,是根据屏幕宽度和盒子宽度决定获取屏幕宽度求出列数,屏幕宽度 / 盒子宽度 取整瀑布流最关键的是第二行的盒子的排布方式,通过获取第一行盒子中最矮的一个的下标,绝对定位,top是最矮盒子的高度,left是最矮盒子的下标 * 盒子的宽度循环遍历所有的盒子,通过列数

2020-06-28 13:08:22 88

原创 scroll 家族

scroll兼容问题 获取页面上下位移,和左右位移ie9和最新的浏览器window.pageYOffset; scrollLeftwindow.pageYOffset; scrollTopFirfox浏览器和其他浏览器document.documentElement.scrollTopdocument.documentElement.scrollLeftChrome浏览器和没有声明 DTDdocument.body.scrollTopdocument.body.scrol

2020-06-27 18:18:16 29

原创 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 84

原创 css offset家族

1. offsetWidth = 内容 + 左右内边距 + 左右边框 offsetHeight = 内容 + 上下内边距 + 上下边框style.width和 style.height 获取的是内容宽度和高度,想要改变宽度和高度也只能通过它2. offsetLeft offsetTop 距离第一个有定位的父级盒子左边和上边的距离。父盒子必须要有定位,如果没有,则以最终body为准3. offsetParent 找到最近的有定位的父级元素 pa

2020-06-26 15:27:52 37

原创 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 49

原创 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 49

原创 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 55

原创 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 71

原创 js 对象的拷贝 深浅拷贝

对象的拷贝:1.浅拷贝:直接拷贝所有属性,但是会出现原对象和克隆对象的引用值的地址相同,在改一个对象的属性会将另一个对象的属性改掉。2.深拷贝:在循环遍历原对象时,判断对象的每一个属性是否是引用值。 var obj = { name: 'abc', age: 123, sex: 'female', card: ['hahaha', 'hehehe'], wife: {

2020-06-06 23:20:57 44

原创 js 包装类

new String() new Boolean() new Number()只有原始值数字是原始值,原始值不能有自己的属性和方法属性和方法只有对象有,包括对象自己,数组,functionundefined null 不可以有属性原始值不可以有属性和方法,但经过了包装类(加隐式)可以调用一些属性与方法...

2020-06-04 11:37:15 55

原创 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 44

原创 js作用域精解

***[[scope]]????**每个JavaScript函数都是一个对象 对象中的有些属性我们可以访问,但也有些不可以,这些属性仅供JavaScript引擎存取,[[scope]]就是其中之一,[[scope]]指的就是我们所说的作用域,其中存储了运行时期上下文集合。**作用域链:[[scope]]中所存的执行期上下文对象的集合,这个集合呈链式连接,我们把这种链式链接叫作作用域链***运行期上下文:***当函数在执行的前一刻,会创建一个成为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时

2020-06-03 18:14:35 34

原创 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 59

原创 js 中函数参数的一些解释

2020-06-01 17:15:29 74

原创 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 53

贪吃蛇1.zip

js 贪吃蛇源码

2020-06-16

淘宝静态页面.zip

仿淘宝静态页面源码

2020-05-31

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除