![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 79
不归少年
自律即自由
向阳生长
展开
-
前端性能优化
一、css优化 关于css性能优化的好文章1、尽量不要使用通配符选择器,因为CSS选择器是从右到左进行规则匹配,* 就会遍历匹配所有的标签,在标签比较多的时候会影响性能2、避免使用行内样式或者内联样式,建议使用外部样式表,并将文件以 link 方式引入放在head标签中,但是可以把关键的样式写在内联样式中,避免使用 @important1)@import是CSS提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载CSS文件,还可以定义href,rel连接属性等;2)加载原创 2020-07-30 10:50:19 · 214 阅读 · 0 评论 -
js总结二(有目录)
—————————————————————————————————call/apply/bind 实现数组去重js事件循环机制深入浅出浏览器渲染原理promise.all 实现—————————————————————————————————1、 call/apply/bind 实现applyFunction.prototype.apply = function(base, args) { // 拓展Function原型 base = base || window; //原创 2020-07-24 23:12:41 · 161 阅读 · 0 评论 -
js总结一(有目录)
之前的一篇文章~组合继承、检测数据类型的几种方法、检测对象的属性是否在原型对象上等问题、页面出现空白问题产生的原因虽然typeof对于null,对象,数组,正则都不能很好的判断,除了上篇文章检测数组的方法,还可以检测出null,通过 typeof 结合 ! 就可以判断,具体代码如图!...原创 2020-07-18 16:39:11 · 169 阅读 · 0 评论 -
排序算法
一、稳定性官方定义: 假定在待排序的记录序列中,存在多个具有相同的关键字的记录,若经过排序,这些记录的相对次序保持不变,即在原序列中,r[i]=r[j],且r[i]在r[j]之前,而在排序后的序列中,r[i]仍在r[j]之前,则称这种排序算法是稳定的;否则称为不稳定的。白话: 指的是排序之后,相同元素的相对位置有没有发生变化,如果变化了,就不稳定,如果没有变化,则相对稳定举个例子就是:比如:[12,3,15,12,35,34,6],使用冒泡排序的话,从大到小排序后为[35,34,15,12,1原创 2020-07-12 11:10:35 · 352 阅读 · 0 评论 -
js数据类型转换、js变量提升与函数提升的详细过程
菜鸟说的很详细,主要注意以下这几个就好了原创 2020-07-11 11:18:07 · 209 阅读 · 0 评论 -
forEach,for..in,for..of,Object.keys(),Object.values(),Object.assign(),Object.create()
写在前面JS对象的可枚举属性和不可枚举属性见此博客1、forEach()这个是遍历数组的方法,无返回值,不可以遍历对象语法:array.forEach(function(currentValue, index, arr), thisValue)第一个是value,第二个是index,第三个是数组体缺点:不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据,方法不能使用break,continue语句跳出循环,或者使用return从函数体返回,对于空数组不会执行回调函数优点:便利的时候原创 2020-07-11 10:52:46 · 467 阅读 · 0 评论 -
组合继承、检测数据类型的几种方法、检测对象的属性是否在原型对象上等问题、页面出现空白问题产生的原因
一、组合继承 //父类 function Father(name,sex){ this.name=name; this.sex=sex; this.sleep=function(){ return this.other+"在睡觉"; } } //子类 function Son(name,sex,age){ //构造函数继承 Father.c原创 2020-07-10 13:13:11 · 265 阅读 · 0 评论 -
入坑----关于this调用位置和指向问题
本文参考了https://segmentfault.com/a/1190000009393621、https://blog.csdn.net/joyvonlee/article/details/94360946两篇文章,大家也都可以去看看一、调用位置如何查看函数调用的位置可以使用debugger来查看函数的调用栈以及this指向function foo(a){ debugg...原创 2020-02-23 16:01:52 · 338 阅读 · 0 评论 -
天气预报部分
一、代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-10-11 23:40:12 · 272 阅读 · 0 评论 -
计时器、倒计时、打点计时器
计时器<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> input{ width:400px; bor...原创 2019-08-12 13:04:45 · 307 阅读 · 0 评论 -
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-U...原创 2019-08-22 00:08:37 · 565 阅读 · 0 评论 -
随机验证码
一、点击切换验证码,无输入验证二、输入图片中内容进行验证三、输入错误内容进行验证四、字母大小写不一致,进行验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...原创 2019-08-27 22:21:52 · 169 阅读 · 0 评论 -
利用canvas、对象知识做弹跳小球
loop函数中的相关说明1、 requestAnimationFrame(loop); 让函数每隔一段时间运行一次2、如何让小球避免长蛇轨迹,并稍微有一点之前的运动轨迹?可以在下一次小球出现的时候重绘画布,让他变为黑色,再给一点透明度,就可以显示之前的一点运动轨迹了<!DOCTYPE html><html lang="en"><head> ...原创 2020-02-17 14:45:12 · 236 阅读 · 0 评论 -
canvas画雪花
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas画雪花</title> <style> * { padding: 0; margin: 0; ...原创 2019-10-10 12:19:18 · 469 阅读 · 0 评论 -
localStorage,sessionStorage和cookie的区别与使用
1、定义sessionStorage 和 localStorage 是HTML5 Web StorageAPI提供的,可以方便的在web请求之间保存数据,cookie是用于存储 web 页面的用户信息,是浏览器固有的2、异同相同之处:sessionStorage、localStorage、cookie都是在浏览器端存储的数据,且是同源的(同源:域名、协议、端口号相同)不同之处:...原创 2020-02-14 23:17:15 · 370 阅读 · 0 评论 -
飞机大战
html部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,in...原创 2019-09-12 23:49:53 · 176 阅读 · 0 评论 -
js继承
一、原型链继承优点:直观继承,子类的实例既是自身,也是父类缺点:原型prototype 属性共享(多个同类对象),给子类原型追加方法或者属性必须在原型继承之后,原型继承不能进行多继承 父类1: function Animal(name, sex) { this.name = name || "动物"; this....原创 2020-02-14 20:45:58 · 159 阅读 · 0 评论 -
js原型和原型链
一、从图理解js原型于与原型链图解:红色部分1、所有函数都有一个prototype指针,指向原型对象,prototype指针的意义是:当我们使用这个构造函数new出新对象的时候,新对象的原型是谁。2、构造函数的prototype所指向的原型对象有一个constructor指针,指回构造函数constructor指针有助于我们找到一个对象的构造函数是谁3、__proto__每个对象都有,...原创 2020-02-14 15:12:08 · 328 阅读 · 0 评论 -
js设计模式
一、工厂模式在函数中实例化一个Object对象,定义该对象的属性或方法,并在函数中返回该对象,即返回一个单体对象优缺点:解决了创建多个对象的问题,但输出的都是Object对象,没有办法区分对象类型 function student(name,sex){ const stu=new Object(); stu.name=name; stu....原创 2020-02-14 11:56:05 · 276 阅读 · 0 评论 -
分页
一、简单分页鼠标点击到对应页数上时,字体为白色,背景色为蓝色,点击上/下一页时,页数格里边的内容-10/+10,页数最小值为1,无上限<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>数据分页1</title> ...原创 2019-08-27 22:10:04 · 153 阅读 · 0 评论 -
自动式三级联动
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0;...原创 2019-08-27 22:28:48 · 235 阅读 · 0 评论 -
三级联动
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-08-27 21:59:35 · 845 阅读 · 0 评论 -
轮播图之横向滚动
轮播图之横向滚动代码html+css<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-08-18 23:57:10 · 2366 阅读 · 0 评论 -
轮播图之淡入淡出
轮播图之淡入淡出代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-08-19 13:49:25 · 3729 阅读 · 0 评论 -
js无缝滚动、图片轮播
无缝滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-08-14 13:31:34 · 199 阅读 · 0 评论 -
js实现钟表
代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>钟表</title> <style> .content { width: 400px; ...原创 2019-08-19 00:11:07 · 347 阅读 · 0 评论 -
排序算法
冒泡排序 var arr = [3, 2, 0, 1, 7, 5, 4, 6, 9, 8]; function maopao(array) { if (array.length == 1) { return array; } var temp; for (var i = 0; i < arra...转载 2019-08-09 17:39:18 · 145 阅读 · 0 评论 -
字符串面试练习题
一、找字符串里面的最长的单词将字符串转化为数组,比较数组中的长度大小/* * 找字符串里面的最长的单词 * */ var st = "The quick brown fox jumped bcaked jumped abscefg over the lazy dog 15625765675276"; function showDanci(str) { ...原创 2019-08-09 17:15:26 · 229 阅读 · 0 评论 -
字符串的常规用法
字符串的常规用法方法解释concat()拼接字符串search()检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串indexOf()查找字符索引,字符索引从0开始,从左向右,一个参数的时候,如果参数是多个字符组成,返回第一个字符所在的索引,如果没有查找到,则返回-1,两个参数的时候,第一个参数是查找的字符,第二个参数是查找的起始索引。不执行全局...原创 2019-08-09 14:01:08 · 283 阅读 · 0 评论 -
数组Array常用方法
数组基本语法 //实例化对象 //length 属性 代表数组的长度 var arr=new Array({}); console.log(arr);//[{…}] var a=new Array([1,2,3,4]); console.log(a);//[Array(4)]//数组的简化声明 var a=[1,2,3,4];...原创 2019-08-09 15:33:00 · 259 阅读 · 0 评论 -
js实现计算器
效果代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>计算器</title> <style> *{ padding: 0; ma...原创 2019-08-07 21:03:39 · 730 阅读 · 0 评论 -
js实现图片懒加载,屏幕自适应
效果图屏幕小于1000px时代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-08-11 13:34:42 · 1035 阅读 · 0 评论 -
js放大镜效果
html部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>京东商城放大镜效果</title> <!-- 链接css--> <link rel="stylesheet" href="j...原创 2019-08-04 19:33:35 · 454 阅读 · 0 评论 -
js实现淘宝购物车
效果图实现功能1、点击全选、反选、单选按钮相应内容的背景色发生变化,选项发生变化2、可以点击加减按钮或者手动输入来选择购买的数量,并且设置了购买下限3、当数量区的内容改变时,小计内容同时变化4、选中购物商品后,随着商品数量的变化,小计与总计同时变化5、点击删除按钮,该商品一栏消失,总计发生变化代码<!DOCTYPE html><html><he...原创 2019-08-11 16:23:09 · 2295 阅读 · 0 评论 -
js对象
一、js对象整体的思维导图二、详谈对象1、ECMAScript 对象分为三大类,本地对象;内置对象;宿主对象①本地对象 :基本的引用类型, “独立于宿主环境的 ECMAScript 实现提供的对象”②内置对象:“由 ECMAScript 实现提供的、独立于宿主环境的所有对象,在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象,它已被实例化了。内置对象也...原创 2019-11-11 01:38:06 · 186 阅读 · 0 评论 -
js事件、事件流
关于事件可以查看这篇文章~一、事件分类1、键盘事件onkeydown,onkeyup,onkeypress(相当于前面两个事件)2、表单事件onfocus,onblur,onselected,onchange3、鼠标事件1)、onmouseover,onmousemove,onmouseout,onmouseleave,onmouseenter,onmousedown,on...原创 2020-03-01 20:31:55 · 319 阅读 · 0 评论 -
js作用域以及闭包
一、变量作用域变量作用域即变量的作用范围局部变量: 在js中如果用var来定义一个变量,如果该变量被定义在function或者其他循环体内,则变量为局部变量,并且该变量不会受到同名全局变量的影响,也不会影响同名的全局变量。全局变量: 如果不用var来定义变量而直接拿一个变量来使用则该变量会被自己定义为全局变量,无论该变量被定义在任何位置,如果在function或者循环体内用这种方式来定义变...原创 2020-03-01 12:57:31 · 154 阅读 · 0 评论 -
严格模式
一、严格模式 "use strict";通过严格模式,可以在函数内部存在的错误,及时进行较为严格的全局或局部的错误条件检测,可以提前知道代码中存在的错误,及时捕获一些可能导致编程错误的 ECMAScript 行为 <script> "use strict"; </script>下面从以下几点说一下严格模式与标准模式的区别变量对象函数eval(...原创 2019-11-27 23:29:02 · 416 阅读 · 0 评论