- 博客(73)
- 收藏
- 关注
原创 写 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关注的人