- 博客(35)
- 收藏
- 关注
RSS订阅原创 css drop-shadow给元素或图片非透明区域添加投影
* 阴影作用于整张图片外轮廓 *//* 阴影作用于图片不透明内容 *//* 阴影作用于整个形状外轮廓 *//* 阴影作用于形状不透明内容 */
2023-02-16 13:48:58
493
原创 px rem em vh vw的区别
绝对长度pxpx是像素值，是一个固定的长度，比如我们的米，厘米一样。相对长度为什么我们需要相对长度rem em等？🤔固定长度已经不能满足我们现在的需求了。🌰举例：比如我们在缩小我们屏幕的时候，我们不仅仅是需要缩小我们的盒子的宽高，我们还想要让我们字体大小也随之缩小，这样用户体验会更好一点。remrem 与 px 的计算关系rem的值是px的倍数默认情况下font-size = 16px,那么1rem = 16pxrem 如何修改与px的相对计算关系我们可以在并且只能在html标签（因
2022-04-12 09:57:38
376
转载 转载-vuex面试题
1.vuex是什么？怎么使用？哪种功能场景使用它？答：vue框架中状态管理。在main.js引入store，注入。新建了一个目录store.js，…… export 。解决的问题：多个视图依赖同一个状态来自不同视图的行为需要变更同一状态适用于中大型的单页面应用2.vuex有哪几种属性？答：有五种，分别是 State、 Getter、Mutation 、Action、 Modulestate：存放公共数据的地方；getter：获取根据业务场景处理返回的数据；mutations：唯一修改stat
2021-11-19 09:58:23
100
1
原创 JavaScript之 for...in 与 for...of 间的较量
for in 循环阔以用来遍历对象的可枚举属性列表（包括[[Prototype]]链）。使用for in遍历对象无法直接获取到值，但是for of能取到值（前提对象本身定义了迭代器）
2021-11-05 14:04:03
80
2
原创 JavaScript之 防抖VS节流
概念函数防抖和函数节流，都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，从而导致出现的延迟、假死和卡顿。防抖：触发高频事件后n秒内函数只会执行最后一次，如果n秒内高频事件再次被触发，则重新计算时间节流：高频事件触发，每隔特定的时间会执行一次，所以节流会稀释函数的执行频率防抖实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法节流实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return总结：函数防抖：将多次操
2021-11-03 17:30:17
76
原创 通用的功能性CSS代码总结
1.清除浮动/* 万能清除法 */ .clearfix:after { // 此处的clearfix是浮动元素的父元素 content: ""; height: 0; clear: both; display: block; overflow: hidden; visibility: hidden; }2.单行文本溢出显示省略号.content { width:
2021-10-20 14:35:26
74
原创 CSS实现子元素在父元素中水平垂直居中的方法总结
运行效果HTML结构<div class="container"> <div class="content"></div></div>实现方式1. 绝对定位 + margin:auto思路：绝对定位使子元素脱离文档流，再将各方向定位值设置为0，由margin自动分配剩余空间，从而实现元素的水平垂直居中.container { width: 200px; height: 200px;
2021-10-12 14:04:49
745
原创 JavaScript手动封装一个深拷贝函数(递归实现)
浅拷贝： 简单的赋值拷贝操作，产生重复释放问题深拷贝： 在堆区重新申请空间，进行拷贝操作，防止重复释放问题<script> const people = { name: '一只不太聪明的燕子', age: 18, address: { city: 'Nanjing' }, hobby: ["吃饭", "睡觉", "写bug", { play: ["排球", "羽毛球"] }].
2021-09-28 14:10:09
680
1
原创 Vue之computed和watch的用法与区别
computedVue的计算属性。计算属性——依赖其它属性，其依赖的属性值发生改变时，会自动计算并更新，其相关dom也会自动更新；它的存在是为了解决模板逻辑过于复杂的问题。methods中使用方法也能达到相同的效果，但是computed的性能更好，它是基于依赖项的变化才会进行变化。watchVue3 监听属性可以通过 watch 来响应数据的变化。如果监听的对象内部属性变化则需要开启深度监听 deep：true两者的区别计算属性computed :支持缓存，只有依赖数据发生改
2021-09-16 16:30:56
205
1
原创 git常用命令总结
git四连命令功能git add .将所有改动放进暂存区git commit -m “描述”提交并附带概要信息git pull从远程仓库拉去代码git push推送代码到远程仓库（master分支）其余常用命令 弹出暂存代码命令功能git log查看提交日志git log -p查看详细历史git log --stat查看简要统计git status查看工作区状
2021-09-14 09:06:52
64
原创 Windows系统解除端口占用
一、查看端口占用情况首先敲下 “win+R” 快捷键 ，弹出如下对话框输入 "cmd"后回车，打开如下窗口二、按需关闭端口
2021-09-13 14:36:58
5249
原创 vue项目中将特定网页内容生成图片(截图)
一、场景和需求最近在做的项目有这样一个需求：APP的打卡分享到微信好友和微信朋友圈的功能。实质就是将网页内容生成一张图片给分享出去(不是抛出一个网页链接啥的)，那么问题来了，如何将网页上的某一块内容转换为图片呢？二、解决方案使用html2canvas插件来实现。html2canvas是一款利用javascript进行屏幕截图的插件，它能够实现在用户浏览器端直接对整个或部分页面进行截屏。三、前期准备1.安装 html2canvasnpm install html2canvas --save
2021-08-27 16:04:09
3881
1
原创 原生JS实现淡入淡出轮播图
不依赖任何插件效果：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淡入淡出轮播图</title> <style> *{
2021-01-19 11:15:56
270
3
原创 formData实现文件上传
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input typ
2020-09-29 22:36:32
378
原创 JavaScript之 正则对象
正则对象正则基础RegExp(正则表达式)正则表达式（RegExp）是Regular Expression缩写，是用于查找符合某些规则的字符串的工具。正则表达式是一个描述字符模式的对象，当检索某个文本时，可以使用一种模式来描述要检索的内容，RegExp 就是这种模式。正则对象的创建构造函数式 new RegExp(pattern,attribute) 参数： pattern:匹配模式 attribute:匹配特征例：var reg = new RegExp("a","g")
2020-07-29 20:47:41
235
原创 原生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> *{
2020-07-19 22:39:03
212
原创 原生JS自定义鼠标右键菜单
效果：总体思路：为document对象绑定右键菜单事件（contextmenu），事件触发后，首先要阻止浏览器的默认行为（浏览器提供的右键菜单）出现。然后把我们自定义的菜单显示在鼠标的当前位置。利用事件委托为菜单项绑定鼠标移入(mouseover)，移出(mouseout)，单击(click)事件。具体实现过程详见代码和注释代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF
2020-07-11 17:40:16
1135
原创 JavaScript内置对象之String
String对象String对象是 JavaScript 原生提供的三个包装对象之一，用来生成字符串对象。String对象也是JS内置对象中使用频率最高的之一。创建字符串的两种方法1，字面量创建2，构造函数式创建字符串的索引与遍历操作字符串本质上其实就是一个字符数组，所以我们 的字符串也是拥有索引的我们看见一通过索引单独访问字符串中的每一个字符正是因为字符串也可以通过索引来单独访问字符，所以字符串也是可以有遍历操作的字符串的比较规则字符串的比较规则叫做****:原地算法***
2020-07-10 23:37:46
194
原创 原生JS实现tab选项卡的切换
效果：总体思路：我是利用动态改变类名来实现的1.提前设计好一个类名用于体现选项卡被选中之后的样式，再设计一个类名用于体现与当前选项卡对应的内容区的状态2.某个选项被点击时，先将所有选项卡恢复默认样式，所有内容区处于隐藏状态。再单独把当前被点击的选项卡赋予特殊样式（绑定类名），让与之对应的内容区显示（绑定类名）。注：详细实现过程，代码中都有注释实现:普通方式<script> // 页面加载完毕后执行 window.onload = function(){
2020-07-09 20:40:14
981
原创 JavaScript中的事件对象(event)
Event事件对象1.事件基础事件是什么？JS中事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。事件三要素事件源（被触发的对象）事件类型（如何触发？）事件处理程序（触发后发生了什么？）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5bTx7p8D-1594209131138)(C:\Users\lhm\AppData\Roaming\Typora\typora-user-images\image-202007072128111
2020-07-08 19:54:50
635
原创 17个常用 JS 数组方法
数组是什么？一个有序的集合本质上也是变量的一种，可以存储一连串的变量/值数组集合的长度可以动态的调整，理论上是无限大的数组中可以存储任意类型的数据添加/删除push(…args):在数组的末尾添加一个或多个元素返回值：添加元素后的数组长度var names = ["孙悟空","猪八戒","沙悟净"];var len = names.**push("lhm")**;console.log(names,len);运行结果：pop():删除数组的最后一个元素返回值：被删除的
2020-07-05 19:07:22
401
原创 html+css 静态表单实例
1.效果2.html+css代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
2020-03-29 16:18:10
740
原创 JavaScript动态显示鼠标移动轨迹
效果图：思路：当鼠标在页面上移动时，动态创建一个小圆点(位置就是鼠标的当前位置)。一秒后，再把该圆点删除掉。仅需要js代码就能实现代码：<script> //鼠标移动时，动态创建div,一秒后删除 window.onmousemove = function(event){ var nDiv = document.crea...
2020-03-27 10:50:04
2361
2
原创 JS动态创建(删除)表格
1.效 果：添加空白表格项，会弹出提示添加完整表格项删除表格项2.源 码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
2020-03-26 09:37:02
461
原创 基于JavaScript 的随机点名程序
效果：录制的gif效果图没那么理想，其实速度是比这个快的思路：1.定义一个数组，存放名单2.启动定时器，设定间隔时间不断调用函数3.Math.random()获取随机下标，根据下标的随机变换取出数组中对应的元素4.逻辑代码完成后，通过DOM对象把变化的结果呈现在页面上JS代码：<script>var arr = ["唐僧", "孙悟空", "猪八戒", "沙悟净",...
2020-03-24 10:47:28
494
1
原创 JavaScript实现简单的数码时钟
效果图：话不多说，代码里都有注释！！！源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
2020-03-23 21:20:20
376
原创 column多列布局
CSS3 新增多列布局适合排版很长的文字内容，让其多列显示。使开发者能够轻松实现报纸版式的布局。colum的相关属性：属性说明column-count属性值是一个数字，规定元素被分为几列column-width列宽column-gap列与列的间隔宽度column-rule列的间隔线，column-rule-color、column-rule-sty...
2020-03-22 23:11:31
357
原创 JavaScript实现简单的进度条效果
效果图：简单说一下思路：主要就是进度条的宽度的动态调整！要用到JS的间隔定时器 setInterval( )setInterval( )功能：每隔指定时间调用一次函数参数：函数，时间间隔返回值：定时器编号（数字）想让它到一定的宽度就停止，那么需要设定它的最大宽度，在它外面套一个有宽度的元素就可以啦！这样的话控制它在父元素里的百分比就行了。在函数里进行判断是否道达指定宽度，没有...
2020-03-22 23:01:02
1361
3
原创 JavaScript的数学对象
Math对象Math 是JS的内置对象,用于执行数学任务。一、属性（常量）1. Math.PI 圆周率返回圆周率 π2.Math.LN2 2 的自然对数返回 2 的自然对数3.Math.LN10 10 的自然对数返回 10 的自然对数二、Math对象的官方函数1.Math.round(x) 四舍五入返回值：四舍五入后的整数2.Math.ceil(x) 向上取...
2020-03-21 16:57:07
2973
2
原创 Web前端学习—如何在网页中插入字体图标详细步骤
iconfont阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
2020-02-29 16:04:16
6452
1
原创 Web前端学习笔记——HTML常用标签
HTML常用标签不同的标签 作用是不一样的！ 文本标题标签： h1 - h6 特点：有默认样式：文本会加粗、字号不一样 h1标签是比较特殊的：具有唯一性，在单独页面里面只能出现一次，一般用来放网站logo h2-h6 : 板块的标题、一段叙述性文本的标题。注： h1 - h6 不能互相嵌套文本的加粗&文本的倾斜 加粗...
2020-02-22 17:47:42
495
原创 Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性：属性描述transition-property检索或设置对象中的参与过渡的属性transition-duration检索或设置对象过渡的持续时间transition-delay检索或设置对象延迟过渡的时间transition-timing-function检索或设置对象中过渡的动画类型简写方法： transition:...
2020-02-22 16:05:15
1114
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人