- 博客(23)
- 收藏
- 关注
RSS订阅原创 关于element组件dialog无法获取里面元素的问题
关于element组件dialog无法获取里面元素的问题 直接上代码 <template> <div> <el-button @click="qqq" type="primary">111</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"> <span id="qqq">这是一段信息</span&g
2020-11-20 12:03:12
2868
原创 js继承
js实现继承 许多oo语言都支持两种继承方式：接口继承和实现继承，接口继承只继承方法签名，而实现继承则继承实际的方法，如前所述，由于函数没有签名，在ECMAScript中无法实现接口继承，只支持实现继承（JavaScript高级程序设计） 结合网上大家的理解，总结了七种方法 1、通过原型链继承（子类的prototype为父类的实例） 写的时候一直不明白原型链继承的第二个问题，为什么不能传递参数，后来百度，结合两位大哥的解释，明白多了，直接上图 直接上代码有注释 <!DOCTYPE html>
2020-09-03 10:15:33
248
原创 防抖和节流
防抖和节流 时刻记住防抖是控制次数，节流是控制频率 根据网上的结论自己总结，参考文档 https://www.jianshu.com/p/c8b86b09daf0 直接上代码，有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
2020-09-01 14:51:44
242
原创 双向数据绑定原理ES6
双向数据绑定原理ES6 结合上一篇的原理用ES6的语法再次实现了双向数据绑定，比上一篇更加精简，同时还增加了一层数据代理，代码与代理进行交互，而不是直接访问目标对象 有注释，注释不多的地方，上一篇绝对有，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
2020-08-31 17:45:20
345
原创 双向数据绑定原理
双向数据绑定原理 直接实现了双向数据绑定，有注释，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>双向数据绑定原理</title> </head>
2020-08-31 17:39:07
294
原创 轮播图demo左右滑动-移动端
轮播图demo左右滑动-移动端 1、和前三篇的素材都差不多，这里实现的是移动端的图片轮播，使用的是targetTouches获取到点击的位置和移动到的位置，相减就为移动的距离 2、在轮播的时候，很多代码重复了，可以加一个方法优化，这里为了更加直观就不加了 有注释，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport
2020-08-31 11:15:29
725
原创 轮播图demo左右滑动-pc端-translate
轮播图demo左右滑动-pc端-translate 外部像前面两篇一样，引入了四张图片 1、对比第一篇左右滑动的轮播图，使用translate更简便，效果也很好，但是没有实现节流，连续点击会播放的很快，如果有什么好方法和建议，欢迎提出 2、写的时候遇到了一个问题，百度了很久才解决，就是在播放超出限制，通过一些方法让它快速回到初始位置的时候，要去掉过渡，但是一直没有效果，这里必须自己触发重绘，代码中也标注了，想了解更多重绘与回流的知识，可以访问 https://blog.youkuaiyun.com/qq_4236454
2020-08-28 17:06:45
570
原创 轮播图demo淡入淡出-pc端
轮播图demo淡入淡出-pc端 1、实现了淡入淡出效果的轮播图，由于是直接修改透明度，所以没有像上一篇实现节流，但是因为使用的是过渡效果，所以实际效果没多大影响，而且这个方法最简便，最容易实现，做出来的效果也很好 2、因为是使用绝对定位在用一个位置放置了多张图片，在图片数量变多的时候，可能会影响性能。如果有什么其它的好方法，请不吝赐教 外部引入四张图片，和上一篇一样 有注释，直接上代码 <!DOCTYPE html> <html lang="en"> <head>
2020-08-28 16:51:35
457
原创 轮播图demo左右滑动-pc端
轮播图demo左右滑动-pc端 这里使用的是自己封装的动画，最完整，但是有点繁琐，还实现了节流的功能 外面只引入了四张图片的地址 有注释，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
2020-08-28 16:38:00
625
原创 数组去重
数组去重 这里总结了六种常用的方法 更多的方法可以参考https://segmentfault.com/a/1190000016418021?utm_source=tag-newest 直接上代码，有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init
2020-08-28 09:01:51
220
原创 字符串中出现最多的字符
出现最多的字符 比较简单，直接上代码，有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>出现最多的字符</title> </head> <body
2020-08-27 17:36:34
335
原创 获取URL的key和value
获取URL的key和value 有注释，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取URL的key和value</title> </head&g
2020-08-27 16:56:23
2246
原创 快速排序
快速排序 结合网上的，总结了两个方法，但是有三种写法 直接上代码，有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>快速排序</title> </head&g
2020-08-27 14:25:31
188
原创 选择排序
快速排序 直接上代码，有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>快速排序</title> </head> <body> &l
2020-08-26 15:34:46
184
原创 冒泡排序
冒泡排序 根据网上自己写了差不多的两种实现方法，如果另外一种不是，忘指出 直接上代码，有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>冒泡排序</title> &
2020-08-26 14:59:28
228
原创 写一个能遍历对象和数组的通用forEach函数
写一个能遍历对象和数组的通用forEach函数 有注释，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>写一个能遍历对象和数组的通用forEach函数</title
2020-08-26 11:47:14
526
原创 实现一个简单的深拷贝
实现一个简单的深拷贝 结合网上大家的方法，总结了三个方法，欢迎补充 直接上代码有注释 引入了jQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现一个简单的深拷贝<
2020-08-26 10:54:37
448
原创 点击a标签弹出相应的序号
点击a标签弹出相应的序号 总结了三种方法，欢迎补充 直接上代码，有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击a标签弹出相应的序号</title>
2020-08-26 09:14:54
400
原创 使用js仿写一个原生下拉列表框
使用js仿写一个原生下拉列表框 直接上代码，有注释 这里在选择那里额外加了一个小图片 目录截图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用js仿写一个原生下拉列表框<
2020-08-25 17:13:57
335
原创 实现一个倒计时效果
实现一个倒计时效果 直接上代码，有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现一个倒计时效果</title> <style>
2020-08-25 14:26:48
344
原创 实现可以拖动的悬浮框
实现可以拖动的悬浮框 直接上代码，有注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现可以拖动的悬浮框</title> <style>
2020-08-25 11:32:02
1080
原创 实现一个可持续的动画
实现一个可持续的动画 1、使用css动画属性 直接上代码，具体里面有注释 2、使用js，这里有两种方法 参考了网上的文档自己做的总结，有什么问题欢迎指出
2020-08-24 17:49:27
232
原创 module.exports，exports和export default，export的区别
Node使用CommonJS规范，定义每个模块的内部，module变量代表当前模块，exports是module的属性，表示对外的接口。加载某个模块，实际上是加载该模块的module.exports属性。 Node为每隔模块提供了一个exports变量，指向module.exports，这等同于每个模块头部有这样的一行代码：varexports=module.exports ES6使用export和import来导出/导入模块。 3.1export与exportdefault均可用于导出常量/函数...
2020-08-03 14:12:30
333
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人