- 博客(17)
- 收藏
- 关注
原创 清晰了解原型链
看完这段代码:<!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"> <tit
2020-12-16 14:36:18 165
原创 Tab选项卡用操作原型链的方式改写
上篇文章,是优化版的Tab选项卡,这次用到原型链的方式对其进行改写,效果图是一样的,完整代码如下:<!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-Com
2020-12-15 14:57:32 179
原创 更加简洁的菜单跳转
之前有写过一个菜单跳转,这次再来个更加简洁的写法:看下图:<!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="
2020-12-15 13:58:29 200
原创 为什么推荐用原型链
之前有写过一篇关于创建函数方法的文章,然后推荐用‘自定义构造函数’,这次就用到原型链,对比一下优劣:[1] 字面量 无法创建很多同类型的数据[2] 内置构造函数 无法创建很多同类型的数据 && 繁琐[3] 工厂函数 无法区分不同对象的类型[4] 自定义构造函数 浪费性能那么怎么解决自定义构造函数浪费性能这个问题呢?方案A :把函数放在外面声明,解决浪费性能的问题,但是破坏了代码的封装性function fn() { c
2020-12-15 11:28:03 263
原创 JS中函数的四种创建方法
知道的四种创建方法:[1] 字面量创建 简单快速,不适合批量的创建对象var o1 = {}; //空对象 var o2 = { name: "zs", age: 19 }[2] 内置构造函数(Object)var personA = new Object(); //空对象 var obj1 = {} personA.name = "zs"; personA.age = 100;
2020-12-11 17:06:29 1245 1
原创 写点用JS创建标签的进阶版
普通的用js创建标签:var oDiv=document.createElement('div')//1 oDiv.innerText='我是div标签' oDiv.style.width='100px'//2 oDiv.style.height='100px' oDiv.style.backgroundColor='darkcyan' oDiv.style.lineHeight='100px' documen
2020-12-11 15:32:42 210
原创 用JS写一个可以用键盘方向键控制的动画
用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" cont
2020-12-11 10:30:55 297
原创 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"> <titl
2020-12-10 17:17:39 93
原创 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-12-10 14:57:42 370
原创 用js写一个能自动回复消息的机器人
上效果图:挺有意思的,无聊得时候自己玩一下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-12-10 10:07:12 2091
原创 用js写一个相册
效果图:直接给代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .pic
2020-12-09 15:32:26 671
原创 用js写一个菜单跳转
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {
2020-12-09 11:22:50 313 1
原创 当一个事件被添加了两个监听事件后
当一个事件被添加了两个监听事件后,通过按钮点击事件移除?<div style="width: 100px; background: darkcyan;">我是div</div><button>按钮</button><script> /* div标签原本有一个鼠标移入事件,当点击按钮的时候需要把这个事件注销掉 */ var oDiv = document.querySelector("div");
2020-12-09 09:53:32 370
原创 JS常见的按钮添加事件(含事件监听兼容写法)
JS常见的按钮添加事件有三种方式第一种:直接以属性节点的方式来添加:<button onclick="alert(123)">按钮1</button>第二种:以事件属性的方式来添加:<button>按钮</button><script> var oBtn = document.querySelector("button"); console.dir(oBtn); /* 注意点1:给标签添加
2020-12-08 16:58:23 5725 1
原创 封装获取标签样式的方法(兼容性)
关于getComputedStyle()的用法:语法:window.getComputedStyle(ele);注意点:该方法存在兼容性问题,在IE老版本的浏览器中不能使用这个方法,ele.currentStyle属性;所以下面来用JS来封装一下这个函数,让其具有兼容性:function getStyleWithKey(ele, key) { if (window.getComputedStyle) { return window.getCom
2020-12-08 15:40:01 128
原创 自己用js封装一个表单添加按钮
自己用js封装一个表单添加按钮,直接上代码```<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><
2020-12-08 15:28:43 523
原创 vue文档(大量)
VueVue是一个前端js框架,由尤雨溪开发,是个人项目Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂,这个时候,angular开发团队也开发了angular2.0版本,并且更名为a
2020-06-14 19:39:34 810
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人