Rafi Yang-CSDN博客

原创清晰了解原型链

看完这段代码：<!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 137

上篇文章，是优化版的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 165

原创更加简洁的菜单跳转

之前有写过一个菜单跳转，这次再来个更加简洁的写法：看下图：<!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 173

原创为什么推荐用原型链

之前有写过一篇关于创建函数方法的文章，然后推荐用‘自定义构造函数’，这次就用到原型链，对比一下优劣：[1] 字面量无法创建很多同类型的数据[2] 内置构造函数无法创建很多同类型的数据 && 繁琐[3] 工厂函数无法区分不同对象的类型[4] 自定义构造函数浪费性能那么怎么解决自定义构造函数浪费性能这个问题呢？方案A ：把函数放在外面声明，解决浪费性能的问题，但是破坏了代码的封装性function fn() { c

2020-12-15 11:28:03 250

原创 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 1192 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 177

原创用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 275

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

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

原创用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 2019

原创用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 637

原创用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 256 1

原创当一个事件被添加了两个监听事件后

当一个事件被添加了两个监听事件后，通过按钮点击事件移除？<div style="width: 100px; background: darkcyan;">我是div</div><button>按钮</button><script> /* div标签原本有一个鼠标移入事件，当点击按钮的时候需要把这个事件注销掉 */ var oDiv = document.querySelector("div");

2020-12-09 09:53:32 338

原创 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 5480 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 114

原创自己用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>&lt

2020-12-08 15:28:43 505

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

KindleYoung的博客