- 博客(87)
- 收藏
- 关注
RSS订阅原创 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> <style&g
2022-02-28 17:26:48
265
原创 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> &l
2022-02-28 16:48:42
327
原创 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> <sty
2022-02-21 20:24:31
1323
原创 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>
2022-02-21 19:49:58
1894
原创 JS实现物体运动
JS实现物体运动案例：简单的运动，让一个div从左到右运动代码编写要注意的问题：1.停不下来2.当速度取某些数的时候停不下来3.到达目的值以后点击还会继续运动if…else 将运动分开4.重复点击按钮速度加快保证只有一个定时器在启动每次启动定时器之前，将上次定时器关闭<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <m
2022-02-21 19:41:16
806
原创 ECMA6class语法
ECMA6class语法回顾：JS继承和多态//ECMA6class语法class Person{ //class属性添加 constructor(name,sex,age){ this.name = name; this.sex = sex; this.age = age; } ShowSelf(){ alert(`我是一个叫${this.name}，今年${this.age}岁的${this.sex}孩
2022-02-20 20:39:00
478
原创 JS之__proto__和instanceof关键字
JS之__proto__和instanceof关键字proto构造函数构造出来的对象，有个属性__proto__ 指向构造出这个对象的构造函数的原型function Dog({name,type,age}){ //this = new Object(); //添加属性 this.name = name; this.type = type; this.age = age;}/* 通过构造函数的原型添加方法*/Dog.prototype = {
2022-02-20 18:35:03
359
原创 JS继承和多态
JS继承和多态继承案例：创建一只狗function Dog({name,type,age}){ //this = new Object(); //添加属性 this.name = name; this.type = type; this.age = age;}/* 通过构造函数的原型添加方法*/Dog.prototype = { run: function(){ alert(this.name + "会飞快的奔跑");
2022-02-19 21:22:48
1070
原创 JS混合法—构造函数
JS混合法—构造函数了解prototype原型概念：每一个函数上，都有一个原型对象prototype用在构造函数上，我们可以给构造函数的原型prototype，添加方法1.如果我们将方法添加到构造函数的原型prototype对象上2.构造函数构造出来的对象共享原型上所有的方法例子：var arr1 = [10,20,30,40,50];var arr2 = [1,2,3,4,5];// 在数组函数的原型上添加sum方法Array.prototype.sum = function
2022-02-19 19:57:57
188
原创 JS封装创建对象的函数(构造函数)
JS封装创建对象的函数(构造函数)工厂模式：1.原料2.加工3.出厂【注】凡是满足上述三个步骤创建对象的函数，我们把它叫做工厂方法如果，我们某一个函数，使用new运算符去调用1.当前函数中的this指向新创建的对象2.自动去完成 1.原料 和 3.出厂操作这种通过new调用函数，我们把他叫做构造函数，构造函数可以构造对象【注】构造函数一般情况下首字母大写function Preson(name,sex){ //1.原料 //var obj = new Object(
2022-02-19 19:47:30
582
原创 JS封装一个函数实现解析search
JS封装一个函数实现解析search?id=5&search=ok获取url中search，通过传入对应key，返回key对应的value例子：传入id，返回5function getValue(search,key) {//找出key第一次出现的位置var start = search.indexOf(key);if(start == -1) { return;}//找出key最后出现的位置var end = search.indexOf("&",start);i
2022-02-18 23:27:14
492
原创 set集合和map集合
set集合// 创建set对象let imgs = new Set();//添加元素imgs.add(100);imgs.add(100);imgs.add("hello");imgs.add("hello");imgs.add("true");imgs.add(new String("world"));imgs.add(new String("world"));// 如果添加相等的元素，则只会保存第一个元素：console.log(imgs); // {100, 'hello',
2022-02-18 22:36:18
390
原创 JS合并对象
JS合并对象Object.assign 合并对象【注】将所有传入的对象，都合并到第一个对象中，属性被后续参数中具有相同属性的其他对象覆盖。/* 浅拷贝 改变obj3 f的值的时候，obj1里的f也被修改了(obj1拷贝了obj3 f的地址)*/var obj1 = { a: 10, b: 10}var obj2 = { b: 20, c: 30}var obj3 = { d: 40, f: ["hello","worl
2022-02-18 20:36:49
1647
原创 ECMA6字符串和新增数组方法
ECMA6字符串传统字符串：所有单引号，双引号括起来的都叫做字符串 ECMA6字符串：反引号 `` 1.ECMA6字符串，想怎么写就怎么写，换行，代码缩进，都能在字符串中体现出来 2.${变量/表达式/函数调用}var str = "hello world"; // 报错var str = `hello world`; // 正常输出，保留换行和代码缩进function showSelf({name,age,sex = "男"}){ // 传统写法 al
2022-02-17 22:11:11
182
原创 JS解构用法
JS解构用法中括号解构var [x,y,z] = [10,20,30];alert(x + ',' + y); // 10,20var [x,[a,b],y] = [10,[20],40];alert(a + "," + y); // 20,40alert(b); // undefined大括号解构var {name,age,sex} = { age: 18, name: "钢铁侠", sex: "男"}alert(name); // 钢铁侠alert
2022-02-17 16:30:21
378
原创 箭头函数用法及和ECMA5数组方法结合
1.箭头函数用法箭头函数：新潮的函数写法【注】适当的省略函数中的function和return关键字各种形式的箭头函数 //1.无参数，无返回值 function show(){ alert("hello world"); } var show = () => { alert("hello world"); } //2.有一个参数，无返回值 function xxx(num){ alert(num); } var x
2022-02-17 15:58:08
445
原创 const关键字
const 声明变量，变量只能在声明的时候确定，后续是没有办法修改的【注】const声明常量(变量没有办法改)；const IP = "111";alert(IP); //输出111IP = 'xx';alert(IP); //控制台报错 Uncaught TypeError: Assignment to constant variable....
2022-02-17 15:24:56
449
原创 let和var关键字
let和var关键字let 关键字用来声明变量 只要遇到大括号就形成作用域【注】let关键字声明的变量，所在作用域叫做块级作用域 var 关键字声明变量，将变量或者形参所在函数的大括号作为作用域处理1.作用域不同在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的，所以for循环推荐用let2、let不能在定义之前
2022-02-17 15:19:13
265
原创 强制改变this指向（call，apply，bind的用法和区别）
强制改变this指向（call，apply，bind的用法和区别）call 格式：函数名.call(); 参数： 第一个参数：传入该函数this指向的对象，转入什么强制指向什么 第二个参数开始将原有的参数往后顺延一位function show(x,y){ alert(this); alert(x + "," + y);} show(20,30); // [object Window] // 20,30 show.call("call",2
2021-10-13 14:08:26
161
原创 JS之localStorage实战
JS之localStorage实战目标：用localStorage记录下滑动条的进度，下次打开不变代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
2021-10-11 15:44:57
255
原创 JS之localStorage
JS之localStorage本地存储技术： localStorage(IE8以下不兼容) 1.永久存储 2.最大可以存储5M 客户端的一个微型数据库 3.只能存储string cookie 1.可以设置过期时间 2.最大可以存4kb 3.每一个域名下面最多可以存储50条数据 sessionStorage(结合后台使用) localStorage 对象 setItem(name,
2021-10-11 15:31:51
503
原创 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> <style>
2021-10-11 15:19:52
255
原创 JS正则元字符
JS正则元字符元字符：在正则表达式中有特殊含义的字符单个数字和字符的元字符 . 匹配单个的任意字符 [范围] 匹配单个范围内的字符 [0-9] [a-zA-Z0-9_]匹配单个的数字、字母下划线 [^范围] 匹配任意一个除括号范围内的字符 [^0-9] 匹配任意一个非数字字符 \w 匹配单个的数字、字母下划线(同上)
2021-10-11 11:13:48
1122
原创 JS在字符串中使用正则的方法
在字符串中使用正则的方法字符串的函数： match() 格式：字符串.match(正则) 功能：在字符串匹配是否符合正则表达式 返回值：匹配成功，返回装有匹配到字串的数组 匹配失败，返回null replace() 格式：字符串.replace(oldStr/正则,newStr); 功能：用newStr将oldStr替换 返回值：替换成功的新字符串 split()
2021-10-11 10:55:18
1264
原创 案例：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> <style> #sm
2021-10-11 10:42:30
141
原创 案例：动态生成表格
动态生成表格<!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> #t1 tr td{w
2021-09-13 17:07:31
171
原创 JS事件监听器
1.传统事件绑定 1.重复添加事件会覆盖 2.不能精确的删除事件上的某一个函数2.事件监听器(给某个按钮需要绑定多个函数，精确删除) 低版本IE浏览器不兼容 addEventListener() 格式：node.addElementListener("click") 参数： 第一个参数 事件类型 第二个参数 绑定函数 第三个参数 布尔值 true 事件捕获
2021-09-13 16:55:01
3103
原创 JS事件委托
JS事件委托委托： A委托B去买饭 A发布任务 委托方 B执行任务 代理方 事件委托实现步骤： 1.找到当前节点的父节点或者祖先节点 2.将事件添加到你找到的这个父节点或者祖先节点上 3.找到触发对象，判断触发对象是否是想要的触发对象，进行后续的操作例子：<!DOCTYPE html><html lang="en"> <head> <meta chars
2021-09-13 16:20:22
142
原创 JS获取当前窗口的宽和高
JS获取当前窗口的宽和高window.onload = function(){ document.onclick = function(){ //输出当前窗口的宽 var windowWidth = document.documentElement.clientWidth || document.body.clientWidth; alert(windowWidth); //输出当前窗口的高 var windowHe
2021-09-09 15:28:23
5492
原创 JS案例：物体拖拽
物体拖拽分析：拖拽: mousedown var offsetX = e.clientX - node.offsetLeft; var offsetY = e.clientY - node.offestTop; mousemove node.style.left = e.clientX - offsetX + 'px'; node.style.top = e.clientY - offsetY + 'px'; mous
2021-09-09 15:22:26
578
原创 JS阻止默认行为
JS阻止默认行为例：阻止超链接的的默认行为1、简陋的阻止：a连接的默认行为的方式 缺点：运行到了return，后续的内容我们就不执行了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
2021-09-09 14:47:12
1960
原创 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> <style> *{margin:
2021-09-07 17:02:21
1674
原创 案例：跟随鼠标一串的效果
案例：跟随鼠标一串的效果代码：<!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> *
2021-09-07 16:52:04
115
原创 案例：鼠标精灵跟随效果
案例：鼠标精灵跟随效果代码：<!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> *{
2021-09-07 16:32:40
180
原创 JS事件冒泡
JS事件冒泡浏览器上事件天生一个特点：事件流事件冒泡：由里向外逐级触发事件捕获：由外向里逐级触发组织事件冒泡：浏览器兼容问题事件对象的属性和方法cancelBubble=true （取消冒泡）stopPropagation() （停止传播）例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con
2021-09-07 16:15:51
1184
原创 JavaScript触发对象e.target和this的区别
JavaScript触发对象e.target和this的区别target 目标对象/触发对象 事件对象的属性【注】这个事件是由谁而起IE8一下不兼容 window.event.srcElement;this 永远指向当前函数的主人例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c
2021-09-07 15:34:59
138
原创 键盘事件对象的属性
键盘事件对象的属性keyCode 键码which返回值：键码返回的是大写字母的ASCII码值，不区分大小写格式：var which = e.which || e.keyCode;【注】只在keydown下支持charCode 字符码which返回值：字符码区分大小写，返回值按下键对应的ASCII码值格式 var which = e.which || e.charCode;【注】只在keypress下支持，只支持字符键用法：window.onload = function(){
2021-09-07 15:13:03
503
原创 JS修改键
JS修改键shiftKey 按下shift键，为true，默认为falsealtKey ctrlKeymetaKey windows系统 按下windows(开始)键，为true macos系统 按下command键，为true【注】 和别的操作进行组合，形成一些快捷键操作例：window.onload = function(){ document.onmousedown = function(ev){ var e
2021-09-07 15:03:59
694
原创 案例：跟随鼠标移动提示框
案例：跟随鼠标移动提示框直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script></s
2021-09-07 14:48:15
339
原创 鼠标事件对象的属性
鼠标事件对象的属性 事件对象： button的属性 0 左键 1 滚轮 2 右键 获取当前鼠标位置(原点位置不一样) clientX clientY 原点位置：可视窗口的左上角为原点 pageX pageY 原点位置：整个页面的左上角(包括滚出去的波动距离) screenX screenY 原点位置：电脑屏幕的左上角例：document.onmousedown = function(ev){ var
2021-09-07 14:30:19
2920
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人