- 博客(73)
- 收藏
- 关注
RSS订阅原创 写 SVG 动画必看！SVG系列文章3-动画标签
但是，据我测试，我的Chrome浏览器（版本36）上是没有效果的，FireFox浏览器效果杠杠的！所以，如果您的浏览器没有效果，但是手上有火狐，可以复制下面这个地址去FireFox浏览器下感受下：http://www.zhangxinxu.com/study/201408/horse-accesskey-value.svg。不过上面这个马走得有点假，怎么马儿一直都是水平的啊，这不符合物理学定律，是不科学的。这里轮到第二个动画的时候，路径是从第一个动画路径结束地方开始的，于是，3个动画完美无缝连接起来了。
2023-12-04 21:50:27
1061
原创 写 SVG 动画必看！SVG系列文章2-常见标签
所以在上面的例子里，第二个路径会先做 5 个像素单位的填色，紧接着是 5 个空白单位，然后又是 5 个单位的填色。第一个例子指定了 3 个数字，这种情况下，数字会循环两次，形成一个偶数的虚线模式（奇数个循环两次变偶数个）。所以该路径首先渲染 5 个填色单位，10 个空白单位，5 个填色单位，然后回头以这 3 个数字做一次循环，但是这次是创建 5 个空白单位，10 个填色单位，5 个空白单位。这种坐标系统是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。
2023-11-30 10:35:40
1130
原创 写 SVG 动画必看！SVG系列文章1-简介
但是都没有获得批准。但是 SVG 也有自身的优点，比如它实现了 DOM 接口（比 Canvas 方便），不需要安装第三方扩展 (extensions，原文有误，应该是插件 plugins，类似 flash)。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。viewBox 的 width、height 并不是SVG的实际宽高，而是SVG内的“分辨率”。width、height越大，SVG内的元素越小，反之，元素则越大（不影响SVG的背景图）。
2023-11-26 16:46:18
981
原创 全网最细！Vue3实现路由缓存~
这是最重要的一个函数，因为缓存组件的时候 keep-alive 会根据组件名称进行缓存，假设现在有个。需要在全局状态管理中，或者当前组件中添加数据（本次演示在全局状态管理中，使用的是 pinia）组件（名称为 A，如果不使用选项式写法，Vue3默认将组件名称作为组件的 name）两个路径的时候，会导致访问的都是已缓存的组件，不会重新进行挂挂载渲染。因此需要该函数保证不同路径下，即使组件相同，也能进行重新挂载和缓存。这个是 Vue3 的写法，不适用与 Vue2。在根组件 App.vue 中引入进来。
2023-11-26 14:00:20
3265
原创 使用 html2canvas 和 jspdf 将页面转 pdf，同时解决当页面过长时，页面白屏问题
别人使用标签的方式来显示 base64，但是当页面过长时，base64 大小过大会导致页面解析异常，显示白屏。代码如下，直接粘贴复制即可，代码中 jspdf 是全局引入，你可以自己局部引入。
2023-10-07 15:10:57
2667
19
原创 Vue2.7 封装 Router@4 的 hook
的便捷语法，但是 Vue2 对应的 Vue-router@3 库并没有提供 hook 对应的支持，所以需要我们自行封装 Vue-router@4 提供的两个 hook。在 Vue2.7 中，尤大大是支持大部分 Vue3 的功能，并且支持使用 CompositionAPI 的写法，也支持。Vue2最近优化过，中大型项目支持，内置了 Vue-router 和 Pinia。或者 JS 版本，开箱即用❤️，无需再手动配置。Github 地址点击。，欢迎使用或者提建议，一起优化该脚手架。
2023-09-13 16:29:46
379
原创 解决uniapp手机真机调试时找不到手机问题
3、如果上述都做了还找不到，可以看看开发者选项中的【USB设置】，把模式改为 MIDI 模式。2、检查是否有选择 文件 传输 选项。1、检查 USB 调试是否开启。
2023-09-01 16:57:53
3481
1
原创 2023年最新 Github Pages 使用手册
GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，（可选）通过构建过程运行文件，然后发布网站。可以在GitHub Pages 示例集合中看到 GitHub Pages 站点的示例。可以有两个方式：仓库内创建 404.md，但是开头需要配置 yml 格式------...仓库内创建 404.html
2023-08-24 11:44:46
8486
2
原创 简单高效的npm地址源管理器
这个库的灵感来自于使用时只切换 npm 的问题。此外，你还可以指定单个或多个地址源进行切换。这个库将为您省去切换地址源的许多麻烦！
2023-08-03 11:45:29
265
原创 前端需要知道的三个不常用的函数式编程范式
是把接受多个参数的函数变换成接受一个单一参数的函数**（最初函数的第一个参数）的函数，能夠返回接受余下的参数而且返回结果的新函数**的技术。
2023-07-18 20:42:58
111
原创 四个常用函数式编程，你可能在不知不觉中已经用到...
定义：一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数作用：对于代码的安全性和可用性会更方便实现：2、高阶函数高阶函数（Higher-Order Functions）定义：函数作为其参数或者返回值为函数的函数被称为高阶函数作用：在调用函数的时候不需要考虑内部是如何实现的，十分的灵活实现：数组的 map、filter、find…等等定义：惰性函数，即只在第一次执行，第 n 次执行后再调用得到的结果都是一样的作用：只需要执行一次就缓存值，提升执行效率实现：
2023-07-17 12:34:58
140
原创 快来看看各个大厂响应式方案
哔哩哔哩后续替换成 vmax、vmin 进行响应式布局，因为兼容宽度大于高度的情况更好。知乎为了更好的阅读体验，使用 百分比 和 px 做自适应布局。做响应式布局，无法使用 min-width，因为。不受 width 影响，只受设备宽度影响。查看更多前端知识分享~~编辑 | sishen。
2023-07-07 19:52:21
117
原创 CSS可用的三个全局属性，你知道几个呢？
默认会继承的属性也不在默认继承，而是表现出没有任何设置时候的默认样式。如果元素该属性默认继承属性，该值等同于inherit。如果元素该属性是非继承属性，该值等同于initial。把应用属性初始为它默认的样式，并且排除继承的干扰。查看更多前端知识分享~~编辑 | sishen。
2023-02-26 23:19:41
152
1
原创 小白福利!我开发了一个快速部署库
这是一个可以帮助你快速部署你的静态网站的包，使用Koa框架，你也可以在应用中添加更多的 Koa 前置中间件或者后置中间件。
2023-02-23 23:42:06
117
原创 前端需要知道的JSON.stringify的正确用法
MDN官网简介方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。
2022-11-02 23:41:46
1366
原创 你需要了解的两个很少人知道但是好用ObjectAPI
方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用for...in循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）历史：很早就被许多浏览器支持了，包括IE方法把键值对列表转换为一个对象。历史：ES10 推出（即2019年）
2022-10-31 23:13:05
172
原创 TS：express 中定义 Request 的类型
在根目录或者tsconfig设置的 include 文件夹中，新建一个。才不会报错，并且调用其余函数不会起冲突。2022 年最新方法。
2022-10-07 18:06:04
526
原创 十个关于 html 的面试题（上）
src和href都是用来引用外部的资源srchref表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系不会堵塞，停⽌对当前⽂档的处理告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档标准模式、兼容模式两种模式加了是按标准模式解析解析到脚本时，都是异步执行，它们都不会阻塞页面的解析语义化标签媒体标签表单progress标签DOM查询操作Web存储响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置
2022-07-14 22:59:26
161
原创 scss最新引入全局scss文件方法
1、安装插件npm install sass-resources-loader --save-dev2、创建一个vue.comfig.js配置文件module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/init.scss";` } } }}3、4、
2021-11-12 10:05:16
4840
原创 css文字和数字或者英文对不齐解决方案
由于文字基准线的不同，导致了数字偏上，英文偏下，当与中文一起排序时会有没有居中感，解决方案如下：height: 50px;line-height: 51px; /* 将行高比高度多出1px即可 */
2021-10-26 17:52:11
8271
原创 苹果端部分版本使overflow失效
原因在于苹果端旧版本transform会使overflow失效，只需要在transform里面将**translateZ(0)**添加上去即可transform: translateZ(0);
2021-10-12 10:54:24
1057
原创 解决使用svg时图标对不准
问题可能在于使用svg图标时，如果外围使用一个div包裹起来后，在安卓端可能会多出几px高度出来，原因在于div中留空部分被解析了出来，解决如下（将父盒子的文字大小设置为0）：font-size: 0
2021-07-16 14:43:23
1307
原创 解决div下边距莫名多出4px问题
问题：div下边多出4px主要是div标签内的留空导致的，解决如下：将父盒子的文字大小设置为0即可font-size: 0
2021-07-12 21:41:36
752
1
原创 css解决文字抖动问题
当点击选中时，文字会发生跳动问题坍台，原因是使用了CSS3动画导致高度坍塌计算不准，解决如下：在使用CSS3变化属性，可能涉及该元素3d的变化，而3d又有正反面之分，导致计算高度时，高度在不断变化，才会产生抖动效果。下面属性含义：当元素背面朝向观察者时是否可见。将其设置为隐藏，可将不断变化的高度不显示出来。backface-visibility: hidden;// 兼容写法-webkit-backface-visibility: hidden;父属性：使用了transform变形
2021-07-10 23:59:24
2425
原创 CSS篇1：常见要点复习
1、BFC(Block Formatting Contexts)，块级格式化上下文规则内部的块级box会在垂直方向，一个个地放置属于同一个BFC的两个相邻BOX的上下margin会发生重叠计算BFC的高度时，浮动元素也参与计算盒子中每个块级元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此BFC的区域不会与float重叠触发body根元素浮动元素：float不为none的属性值绝对定位元素：position（absolute、fixed）display为：inli
2021-06-04 12:50:07
105
1
原创 正则也会发生DoS攻击— ReDoS
“Regular Expression Denial of Service (ReDoS)”什么？正则表达式也能发生拒绝服务攻击？搜了一下，这篇文章介绍得十分详细，而且有一个触发这个漏洞的范例：How to eliminate regular expression denial of service有兴趣的朋友可以阅读一下。如果纯粹想体验一下这个漏洞，文中指出的 JavaScript 范例代码如下：let regex = /("[^"]*"|[^@])*@([^@]*)/t = performa
2021-05-27 14:35:41
1422
1
原创 使用gitee部署静态网站缓存问题及解决办法
1-使用gitee部署网站重大缺陷在第一次加载网站后，浏览器会将除 html 外所有文件都缓存起来平常来说，这是好事但是在需要频繁修改的网站时，这反而是一个重大缺陷原因在于使用了 git 重新提交修改后的文件，协商缓存ETag和Last-Modified虽然会改变，但是服务器同时给资源都添加上了强缓存Expires和Cache-Control（一天的时间），且强缓存优先级大于协商缓存这就导致网页更新不了，需要强制刷新或删除缓存，重新加载文件使得每一次改文件提交都是折磨！！！！2-解决：不使
2021-03-13 23:57:48
1885
4
原创 服务器部署vue项目
0- 介绍：使用的服务器：腾讯云使用的系统：centos7.6（centos8坑太多）使用的用户：root1- 先将vue项目打包在项目中执行打包命令，执行完成后文件夹中会出现一个 dist 文件夹npm run build2- 在Windows上安装nginx注意是windows版本的，目的在于测试打包的项目是否能够正常显示（1）将下载的包解压后，进入该文件夹，输入cmd打开命令窗口（2）将 刚刚打包的dist文件夹中的文件复制到 html 文件夹中。（注：需要先将htm
2021-03-01 17:46:15
2579
原创 vscode 保存修复vue文件的eslint语法错误
1.先安装ESlint和Vetur这两个插件2.按照如下步骤打开vscode的配置文件3.将下列代码粘贴进去保存即可使用 // 每次保存的时候将代码按eslint格式进行修复"editor.codeActionsOnSave": { "source.fixAll.eslint": true}, // 保存时格式化"editor.formatOnSave": true, // 格式化vue文件使用vetur"[vue]": { "editor.defaultFo
2020-11-15 15:34:30
2139
原创 chrome安装vue-devtools最简便方法
0-不要再去github下载源码，去install和build了，坑而且容易报错1-随便新建一个名为vue-devtools的文件夹2-使用命令cnpm i vue-devtools3-打开chrome的设置4-选择刚刚安装的模块中node_modules\vue-devtools\vender文件夹5-修改manifest.json的"persistent"为true6-重新启动浏览器再调试vue应用的时候可以看到如下图，即安装成功.........
2020-11-02 15:48:50
263
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人