賀崽-CSDN博客

原创插入几万个 dom ，如何实现页面不卡顿？

让创建插入节点的工作分批进行： setTimeout(() => { // 插入十万条数据 const total = 100000; // 一次插入 20 条，如果觉得性能不好就减少 const once = 20; // 渲染数据总共需要几次 const loopCount = total / once; let countOfRender = 0 let ul = document.querySelector("ul");

2022-03-16 15:51:26 351

原创 vue组件传值方式

vue父组件向子组件传值组件间数据不能共享因为vue组件不支持组件间的数据共享父组件向子组件传值 1 在子组件的配置对象中写上props { props:[‘自定义名’] } 2 直接把props里边自定义的名字当做data来进行使用 3 在父组件中找到子组件的标签在子组件标签上添加 v-bind:props自定义名字=“父组件要传递的data属性名” <子组件标签 :props自定义名=“父组件data中

2021-05-18 15:04:45 91

原创 react组件之间传值

react组件之间传值父组件向子组件传值在父组件上边找到子组件标签在子组件标签上写自定义名字={要发送的数据} <子组件标签自定义名字={要发送的数据}></子组件标签> 在子组件的模板中直接使用{this.props.自定义名字} 来获取父组件向子组件传递数据 <p>{this.props.自定义名字}</p> 子组件向父组件传值在子组件上绑定事件通过this.props.自定义属性名(要发送的数据) <butto

2021-05-18 15:02:45 195

原创 this不同场景指向

this的不同应用场景，如何取值？ this取什么样的值是在函数执行的时候被确定的不是在函数定义的时候被确定的作为普通函数被调用 this指向window 使用 call apply bind call 一调用就执行 bind 会返回一个新的函数去执行再重新执行这个函数作为对象方法被调用返回当前对象在 class 方法中调用 this指的是当前创建的实例箭头函数 setTimout(function(){ // 普通函数 // this

2021-05-16 22:41:04 103

转载面试题有关CSS查缺补漏

面试题有关CSS查缺补漏前言：这是一篇有关CSS面试复盘，在面试过程中紧张是难免的，但也要发挥出自己应该有的水平，把自己知道的都有条不紊的讲出来。所以面试总结是非常重要的。 1. Img background 区别 Img ：是HTML标签。 background ：是css标签。 1.1从解析机制来看按照浏览器解析机制，HTML标签优先解析。虽然Link标签会放在头部，但并不意味着会立即执行，HTML执行完毕后才会执行。如果仅仅是显示一张图片，例如banner 广告图，则可以使用 backg

2021-04-17 10:49:02 256

原创 tab切换vue

tab切换vue 实现联动效果 <!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-04-02 16:44:46 116

原创 tab切换

tab切换原生JavaScript封装tab选项卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JavaScript封装选项卡插件</title> <style> * { margin: 0; padding: 0;

2021-04-02 15:18:21 64

原创机器猫/蓝胖子编程(svg)

机器猫/蓝胖子编程(svg) <!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-03-16 18:54:23 947

原创 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: 0;

2021-01-07 19:20:42 170

原创原生ajax

原生ajax ajax依赖XMLHttpRequest对象 var xhr = new XMLHttpRequest(); xhr 有两个方法 open(‘GET’,url,ture) 请求初始化参数说明: 第一个参数:请求方式(比如get post) 第二个参数: url地址第三个参数: 默认true send() 发送请求 xhr 有两个状态 readyState 0 请求未初始化还未调用open方

2021-01-06 18:21:49 1148 5

原创验证一个日期是否合法 2021-01-05 / 2021/01/05 / 2021.01.05

验证一个日期是否合法规则: 年份为四位,月份(01-12),日(01-30) 日期的格式为: 2021-01-05 / 2021/01/05 / 2021.01.05 <script> var reg = /^(?:(?:([0-9]{4}(.|-|\/)(?:(?:0?[1,3-9]|1[0-2])(.|-|\/)(?:29|30)|((?:0?[13578]|1[02])(.|-|\/)31)))|([0-9]{4}(.|-|\/)(?:0?[1-9]|1[0-2])(.|-|\/)(

2021-01-05 19:45:55 586

原创验证一个十六进制的颜色是否合法合法的字符: #000 #fff #FFF #000000 #ffffff #FFFFFF

#判断颜色是否合法的正则表达式 "^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$"; 意思是：以#开头，后面是数字和a-f的字符（大写或小写），这个值是6位或3位。要匹配一个3为是为了符合css颜色的简写规则： "#abc"=="#aabbcc" ...

2021-01-05 18:54:17 1082 1

原创前端面试题

1. 列举10个以上的h5事件不是 HTML5 onblur 当失去焦点时运行脚本 onchange 当元素改变时,并失去焦点运行脚本 onclick 当点击鼠标时运行脚本 ondrop 当被拖动元素正在被拖放时运行脚本 onended 当媒体已抵达结尾时运行脚本 onerror 当在元素加载期间发生错误时运行脚本 onfocus 当获得焦点时运行脚本 oninput 当元素获得用户输入时运行脚本 onkeydown 当按下按键时运行脚本(还没松开时就触发) onkeypress 当按下并松开时运行脚本

2021-01-03 10:58:52 277 1

原创 web前端基础面试题

1. 用css画一条长100px, 宽0.5px的细线;(移动端) <!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&gt

2021-01-02 16:39:03 130

原创 js练习题

js练习题获取1-100之间的所有偶数 <script> for(var i = 1;i <= 100;i++){ if(i % 2 == 0){ console.log(i); } } for(var a = 2;a <= 100;a+=2){ console.log(a); } </script> 计

2020-12-28 19:53:10 2082

Z_qing_he的博客