JavaScript
关注
分享
扫一扫
Sarnwan
现在
展开
-
JS——||和&&
||和&&在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2021-08-20 11:19:43 · 76 阅读 · 0 评论 -
正则表达式
正则表达式正则表达式：正则表达式的应用，正则表达式的基本使用，正则表达式和字符串正则表达式：描述字符串的构成模式，按位描述规则正则表达式的创建：/内容/ 或 new RegExp(‘内容’) typeof 正则表达式结果是object元字符元字符：指定一位指定类型的字符\d:一个数字\D:一个非数字字符\w:一个单字字符(字母数字下划线)\W:一个非单字字符\s:一个空白字符.:任意字符^:匹配开头$:匹配结尾new RegExp()——斜杆要多写一个字符的转义：在原创 2021-08-19 23:15:55 · 359 阅读 · 0 评论 -
js实现猜数字
js实现猜数字0-9才对弹出对了，猜小弹出小了，猜大弹出大了，没写弹出重新填写，直至猜对为止在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width原创 2021-08-19 12:45:19 · 757 阅读 · 0 评论 -
js内置对象——Math对象和Date对象
Math对象Math对象：幂——Math.pow()开方——Math.sqrt()向上取整——Math.ceil()向下取整——Math.floor()四舍五入——Math.round()参数列表的最大、最小值——Math.max() Math.min(),要求参数必须是罗列出来的而不能是数组，数组的话使用apply方法——Math.max/min.apply(null,arr) 随机数：Math.random() 求[a,b] parseInt(Math.random()*(b-a+1))＋原创 2021-08-19 11:59:30 · 84 阅读 · 0 评论 -
js——包装类
包装类只有基本类型才具有包装类包装类：NUmber() String() Boolean()分别是数字、字符串、布尔值的包装类 用途：为使基本类型值可以从它们的构造函数的prototype上获得包装类的结果是对象，能正常的运算NUmber() String() Boolean()：实例都是object,它们的PrimitiveValue属性存储它们的本身值...原创 2021-08-19 10:34:47 · 78 阅读 · 0 评论 -
js面向对象——炫彩小灯
js面向对象——炫彩小灯在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2021-08-18 15:10:53 · 156 阅读 · 0 评论 -
js面向对象——红绿灯实例
上升到面向对象：定义不同的类，让类的实例工作在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc原创 2021-08-18 13:06:09 · 370 阅读 · 0 评论 -
js——继承
js——继承继承：两个类之间的 is a kind of 关系实现继承：子类拥有父类的全部属性和方法，还可以拥有自己独有的方法和属性通过原型链实现继承：子类的原型指向父类的实例 子类.prototype=new 父类() 子类可以重写/复写父类的方法在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http原创 2021-08-18 12:20:25 · 84 阅读 · 0 评论 -
原型 prototype
prototype和原型链查找prototype:原型，任何函数都有prototype属性，其值是个对象默认拥有constructor属性指回函数普通函数 prototype没啥用构造函数 prototype很有用， 构造函数的prototype是其实例的原型构造函数.prototype===构造函数实例._proto原型链查找：实例可以打点访问其原型的属性和方法hasOwnProperty():检查对象是否真正自己拥有某属性或方法in:检查某个属性或方法是否可以被访问，不能检查属性/方法原创 2021-08-17 12:24:27 · 91 阅读 · 0 评论 -
new调用函数-----new 函数()
new 函数()new调用函数四步走：1.函数体内会自动创建出一个空白对象 2.函数的上下文this会指向这个对象 3.执行函数体内的语句 4.函数会自动返回上下文对象，即使函数没有return对象在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=原创 2021-08-17 11:58:51 · 1430 阅读 · 0 评论 -
js——this详解
认识上下文：函数上下文this指待啥由函数调用方式决定认识上下文之上下文规则1上下文规则：1.对象打点其方法函数，则函数的上下文就是这个打点的对象 对象.方法()四个小例题在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-08-16 20:37:07 · 67 阅读 · 0 评论 -
js面向对象之对象深浅克隆
js面向对象之对象深浅克隆认识对象：键值对的集合访问属性：打点或方括号，推荐使用方括号修改、添加属性：对象.属性=XXX删除属性：delete 对象.属性对象的方法：对象的某个属性值是方法，则其也称为对象的方法方法调用：打点调用对象的遍历：for…in…循环 for(var k in obj){}——k是变量将会是键，obj是要遍历的对象对象的深浅克隆：对象是引用类型值——不能用 var obj2=obj1这样的语法克隆一个对象，var obj2=obj1完全是同一个玩意；使用== 或===原创 2021-08-16 16:42:27 · 108 阅读 · 0 评论 -
BOM特效开发：楼层导航小效果
BOM特效开发：楼层导航小效果BOM特效开发：楼层导航小效果，offsetTop和document.documentElement.scrollTop结合，运用data-新增属性进行比对在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&原创 2021-08-16 11:21:04 · 135 阅读 · 0 评论 -
BOM特效：返回顶部按钮
BOM特效开发：返回顶部按钮制作BOM特效开发：返回顶部按钮制作 ，改变document.documentElement.scrollTop属性，结合定时器逐步改变此值以动画形式返回顶部在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&原创 2021-08-16 11:19:06 · 179 阅读 · 0 评论 -
BOM知识点之对象
BOM:浏览器对象模型window对象window对象：一个窗口一个window，全局对象是window的属性 内置函数都是window的方法窗口尺寸相关属性：inner(内容区域宽高，包括滚动条) outer(外部宽高) 不包含滚动条的窗口宽高：document.documentElement.clientWidth/Heightresize事件：窗口大小改变即触发，window.onresize 或window.addEventListener(‘resize’)window.scro原创 2021-08-15 20:33:11 · 109 阅读 · 0 评论 -
呼吸轮播特效
呼吸轮播特效js和动画结合实现在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2021-08-15 16:00:21 · 177 阅读 · 0 评论 -
跑马灯——轮播图特效
跑马灯——轮播图特效js和动画结合完成延时器处理一些瞬间切换问题在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width原创 2021-08-15 12:30:14 · 969 阅读 · 0 评论 -
无缝滚动特效——定时器实现
无缝滚动特效：定时器实现无缝滚动特效：定时器实现，鼠标进入暂停滚动，鼠标离开继续滚动在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev原创 2021-08-15 11:18:51 · 291 阅读 · 0 评论 -
js和transition实现动画及函数节流
定时器实现动画使盒子左右移动在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2021-08-14 19:34:26 · 303 阅读 · 0 评论 -
定时器setInterval()和延时器setTimeout()
定时器定时器：setInterval(function(a,b){},时间,a,b)——固定时间间隔重复调用函数 清除定时器：clearInterval(定时器名) 使用：在设置定时器之前清除定时器，防止定时器叠加 具名函数：function fun(){} fun:函数 fun():函数执行的结果<...原创 2021-08-14 18:38:13 · 254 阅读 · 0 评论 -
事件委托：子代委托给祖代
事件委托之处理问题在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-08-14 17:54:53 · 73 阅读 · 0 评论 -
事件对象4e:e.stoppropagation()
事件对象4e:e.stoppropagation():阻止事件继续传播 ——制作弹出层：点击指定位置框框弹出，点击其它位置页面关闭简单理解：在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="原创 2021-08-14 13:01:55 · 155 阅读 · 0 评论 -
事件对象之方法e.preventDefault()
事件对象3e: e.preventDefault():阻止某些事 ——表单、鼠标滚轮鼠标滚轮事件：onmousewheel: e.deltaY小例子：鼠标在盒子内部滚动时页面不滚动在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-08-14 12:59:26 · 760 阅读 · 0 评论 -
2021-08-13
事件对象之键盘事件对象e: charcode keycodecharcode用于onkeypresskeycode用于onkeyup/downonkeypress用于字符onkeyup/down用于按键37-40左顺 0-9:48-- a-z:97-- A-Z:65–小例子： 按方向键控制盒子移动在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&原创 2021-08-14 12:56:49 · 59 阅读 · 0 评论 -
事件对象e
文章目录#1.详解#2.代码详解事件对象e：box.事件=function(e){} 鼠标:client——鼠标指针相对于浏览器的坐标page——相对于整个网页offset——相对于事件源，计算的是最内层的盒子代码在这里插入代码片<!DOCTYPE html><html lang="en"><head> <原创 2021-08-13 17:35:25 · 81 阅读 · 0 评论 -
js和css结合实现动画
该知道的都知道了，不知道的代码里都有实现代码1（这个不是最终代码）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init原创 2021-07-05 21:20:53 · 417 阅读 · 0 评论 -
定时器设置动画（js）
该知道的都知道了，不知道的代码里都有<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-07-05 19:50:27 · 515 阅读 · 0 评论 -
js定时器设置计时器
该知道的都知道的，不知道的代码里都有实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-07-05 11:02:46 · 515 阅读 · 0 评论 -
定时器应用还有几秒可以发送
看代码，代码里什么都有<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-07-04 22:34:36 · 95 阅读 · 0 评论 -
js实现搜索框提示
这里主要运用js中dom的事件流来进行处理代码包含详细注释可运行效果图：代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d.原创 2021-07-03 13:57:50 · 544 阅读 · 0 评论 -
Dom事件流详解
具体看代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-07-03 13:10:33 · 157 阅读 · 0 评论 -
js实现导航栏的下拉表单
用js实现鼠标经过时下拉表单显示隐藏代码含详细注释可运行主要思路就是获取下拉表单之后鼠标在就显示，不在就隐藏，js代码比较简单，反而是css比较多，下面给出完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m原创 2021-07-02 23:23:20 · 5548 阅读 · 1 评论 -
js动态生成表格
代码含详细注释和思路可运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-07-02 22:42:25 · 172 阅读 · 0 评论 -
Dom操作：节点的创建克隆添加删除
创建节点： creatElements()克隆节点：cloneNode()添加节点：appendChild() 以及 insertBefore(添加的节点，节点的位置)移除节点：removeChild()以下是一个具体的例子，里面详细介绍了节点的具体运用，包含详细注释。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht.原创 2021-07-02 17:54:25 · 196 阅读 · 0 评论 -
js实现留言板
具体的实现看以下代码，代码包含详细注释。效果图如下输入内容为空发布：删除：完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w原创 2021-07-02 16:55:47 · 2678 阅读 · 0 评论 -
js实现全选和反选
购物车表单什么的用得比较多<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-06-30 18:17:34 · 107 阅读 · 0 评论 -
tab栏创建
主要应用在商品栏 以及页脚的版本信息等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g转载 2021-06-30 10:48:06 · 136 阅读 · 0 评论 -
2021-06-30
自动生成文章目录js实现登录界面1.验证登录2.验证密码3.点击密码图片查看及隐藏密码4.更换当前页面的背景图片js实现登录界面js技术实现登录界面，主要包含四个小知识点。含注释，为了方便，四个点我都写一起了，刚好组成一个登录界面1.验证登录2.验证密码3.点击密码图片查看及隐藏密码4.更换当前页面的背景图片在这里插入代码片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2021-06-30 09:38:20 · 59 阅读 · 0 评论 -
2021-06-20
js正则表达式1——字符匹配原创 2021-06-20 22:43:13 · 91 阅读 · 0 评论 -
2021-06-20
<!-- js数据类型：string number boolean object function --> <!-- js对象类型：object date array --> <!-- 两种不能包含值的数据类型：null undefined --> <!-- Number转换为数值 String()转换为字符串 Boolean()转换为布尔值 -->原创 2021-06-20 19:36:29 · 60 阅读 · 0 评论