- 博客(52)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 自定义实现项目进度图
目遇到一个展示项目进度的需求，类似甘特图的效果，不同的是，每一个项目都有计划和实际两种，然后点击可以进行交互等。但是因为我们需要自定义拓展，还是有些受限，干脆用table自己写了一个组件。用到了moment.js，根据所选择的日期区间，所处间隔天数，再根据日期进行当前日期是周几的运算，得出表头数据。选择两个日期，处理日期区间，渲染表头，获取数据后，根据不同的状态进行渲染即可。项目数据的格式如下，因为一个项目分了两条数据，所以两条数据为一组。根据项目的开始结束日期范围，进行单元格合并。
2024-10-12 11:36:38
380
原创 table标签实现甘特图效果
目遇到一个展示项目进度的需求，类似甘特图的效果，不同的是，每一个项目都有计划和实际两种，然后点击可以进行交互等。但是因为我们需要自定义拓展，还是有些受限，干脆用table自己写了一个组件。用到了moment.js，根据所选择的日期区间，所处间隔天数，再根据日期进行当前日期是周几的运算，得出表头数据。选择两个日期，处理日期区间，渲染表头，获取数据后，根据不同的状态进行渲染即可。项目数据的格式如下，因为一个项目分了两条数据，所以两条数据为一组。根据项目的开始结束日期范围，进行单元格合并。
2024-10-12 11:32:41
869
原创 css backdrop-filter 实现背景滤镜
官方给出的定义是：backdrop-filter属性允许您将图形效果（如模糊或颜色偏移）应用于元素后面的区域。的所有内容，所以要查看元素或其背景的效果，需要透明或部分透明。根据上述10种，做了一张汇总图。同样直接贴一下源码吧。
2024-05-09 15:49:41
810
原创 css mix-blend-mode 层叠样式属性各类效果
官方给出的定义是：mix-blend-mode css 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。根据上述16种，做了一张汇总图，设置父级容器背景色为#FFBB00，原图图片资源如下所示。通俗来讲，就是一张图片跟它的父级元素背景色的融合方式。16种混合-混合-模式属性下不同的呈现效果如下所示。
2024-05-09 09:14:00
533
原创 vue 金额组件，输入提示单位：‘千’、‘万’、‘十万’...并用‘，’三个格式化
近期项目中遇到一个需求，金额输入框，输入过程中自动提示‘千’、‘万’、‘十万’、‘百万’......等单位提示，鼠标失去焦点后，并用‘,’三位隔开计数。封装的组件inputCurrency.vue。失去焦点：12,345.99。输入：12345.99。放一张图展示下效果吧。
2024-05-06 15:23:11
993
原创 threejs 大场景下，对小模型进行贴图处理
大概知道这个模型由哪些子模型组成，这个模型没有group的概念，只有简单的mesh组成，根据实际的业务需求，模型名称可能有一定的约束规范，例如id之类。针对已有模型，根据数据状态进行贴图处理，例如：机房内电脑告警状态、电脑开关机状态下的不同状态贴图等。单个模型的情况下，直接对其进行 material 进行赋值即可，亲测有效。第一步加载完模型后，查看下模型的结构，可以打印下object的子模型。模型组的场景，对其进行children遍历，进行材质重新赋值。贴图后，忽略红色丑树干，只是增强演示效果。
2024-02-28 10:26:50
934
原创 threeJS 大模型中对小模型进行删除
大概知道这个模型由哪些子模型组成，这个模型没有group的概念，只有简单的mesh组成，根据实际的业务需求，模型名称可能有一定的约束规范，例如id之类。核心代码就是用的remove()方法，注意的是，需要对其材质和物体进行一个dispose销毁操作。在ThreeJS项目中，拿到一个大场景的模型，可能后续有根据需求进行小模型的删除和调整。第一步加载完模型后，查看下模型的结构，可以打印下object的子模型。最后放一张删除后的效果图吧（对比图一：树已经被删除了）例如，大模型示例图中，我们需要删除树的小模型。
2024-02-28 10:10:26
1164
原创 threeJs 模型单双击点击事件
threeJS的事件是计算射线和模型的交点的方法，其中核心是判断event.detail属性，分别打印下单双击事件下的event。控制台根据鼠标的点击次数进行输出，注意的是双击事件时，先打印单击再双击。threeJS中对模型的点击事件，单击还是双击，先放个简单的例子👇。所以根据event.detail属性进行点击事件判断即可实现。关于threeJS模型的引入方法，可以看这个☞。
2024-02-22 10:10:22
1004
1
原创 fabric.js 组件 图片上传裁剪并进行自定义区域标记
利用fabric组件，实现图片上传、图片”裁剪“、自定义的区域标记一系列操作先放一张效果图吧👇。
2024-01-19 15:57:53
2335
4
原创 vlc播放rtsp视频流
首先使用object标签，关于object标签的介绍，放一张图。简单记录一下项目中用到的浏览器内嵌vlc播放rtsp视频流。
2024-01-16 15:34:51
1199
原创 vue-cal 使用教程
因为使用的是月历，所以把disable-views属性设置成了"['years', 'month']"个人感觉vue-cal 比 v-calendar 更好用呢，可能因为api写的深入我心，资料比较齐全吧。vue3直接可以看本文最下方的API，有详解。vue-cal组件的API地址☞。events数据结构。
2023-11-09 16:30:27
1770
原创 v-calendar 日历组件使用&自定义提示内容
最近项目中用到了日历插件，需要统计每天的任务数量，类似elementui的badge组件，待办任务数量大概最后的效果如下图所示，右上角把代办任务数量展示出来vue的日历相关组件挺多的，选了v-calendar，后期翻API有点难受，中文版不太好找，简单记录下。
2023-11-09 16:10:26
8753
原创 vue 浏览器右侧可拖拽小组件
用vue的自定义指令，做一个v-drag的操作指令，也有许多大佬分享了源码，只不过在此基础上稍加修改下限定，一直保持沿着浏览器右侧上线拖拽而已。很多网页在浏览器右侧有"导航"或者“智能助手”的悬浮小气泡框，比如我们的csdn☞。作为页面友好型的引导标注，某些场景下这些小气泡可以沿着浏览器的右侧进行上下的拖拽。是限制拖拽位置的，共有三处，注释掉放开上一行的代码，即可实现全屏的拖拽。使用非常简单，如上图👆所示，加一个v-drag指令即可。
2023-08-04 09:26:08
1449
1
原创 js 不规则字符串进行字节截取
遇到一个小问题，字符串中包括“汉字”、“数字”、“英文”、“符号”等不确定的内容，但是展示的时候需要超长后进行截取展示，单纯的字符串截取可能不能满足需求，找了一下，有个根据字符串计算字节数量的方法，进而进行字节截取。直接贴代码，可能不是很全面，但是也是一种新的思路吧，随手记录一下，直接贴代码。
2023-05-18 09:21:21
476
原创 threeJS 模型中加载html页面
CSS3DRenderer通过CSS3的transforms属性，将层级的3D变换应用到Dom元素上，将Dom元素和WebGL的内容相结合，操作Dom元素的positionh和rotation属性来创建动画。/*** CSS3DRenderer通过CSS3的transforms属性，将层级的3D变换应用到Dom元素上，将Dom元素和WebGL的内容相结合，Dom => Object3D* 操作Dom元素的positionh和rotation属性来创建动画*///创建控件对象。
2023-04-10 10:24:40
2989
1
原创 video 视频下载，调用浏览器的下载进度方法
简单介绍下需求，跟上次的帖子一样，需要重写video标签的进度栏的样式，当然也包括重写下载方法，调用原生video标签下载视频的时候，浏览器会弹出下载进度条。其实下载常用的可能利用a标签，创建一个请求就可以实现下载，但是这种下载方法死活出不来进度，可能方法使用的不对，如有好的方法可以提示我~展示下自定义下载方法后的效果，点击黄色下载按钮后浏览器的展示效果，除了重新自定义了视频的名称，效果跟原生的下载效果一致。下图为调用原生时候，浏览器的下载进度提示。谷歌可能再底部出现，展示用的是Edge浏览器。
2023-03-23 10:59:18
3152
1
原创 video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载
最近遇到的需求就是重新video标签的控制栏的样式，包括进度条、音量、倍速、全屏等样式，在正常状态下，可以将原生样式隐藏掉自定义新的控制栏元素定位上去，但是全屏后样式失效，出现的还是原生的控制栏。只能曲线救国，说白了就是让video的父级全屏，进而让video也屏，控制栏的自定义组件样式定位上就可以了。具体是f12 可以看出，自定义的组件其实还在原先的位置，全屏后的video新增的伪类和样式无法修改，未全屏状态下自定义控制栏的组件样式。全屏后，发现控制栏已经变成原生的样式。
2023-02-24 10:22:05
4899
原创 Three.js 模型加载及加载简单动画
简单介绍下Three.js吧，Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。因为使用简单，入门比较容易。Three.js的具体介绍和使用有很多教程，可以根据自己需要搜索。它重要的三个属性：场景（scene），相机（camera），渲染器（renderer），组合构成一个三维画面。
2023-01-30 10:14:50
3737
2
原创 浅谈深拷贝 内附超好用的深拷贝方法
浅拷贝：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址 ，所以如果其中一个对象改变了这个地址，就会影响到另一个对象。深拷贝：将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。...
2022-08-15 14:07:54
570
原创 qrcodejs2和vue-qr二维码生成组件使用
npm 中搜索发现好多二维码生成的组件，大概看了下，比较常用的可能是qrcodejs2和vue-qr
2022-07-01 10:56:18
2580
1
原创 css关键词：inherit、initial、overlay、revert、unset解释
写样式好久，这几个属性既陌生又熟悉，可能这几个属性能在关键时刻以四两拨千斤之力解决我们困扰了好久的问题，今天终于腾出时间来系统整理汇总下，如有不对，请多指正~以overflow为例，在控制台样式随机打出overflow时候，浏览器对该属性做了一下提示...
2022-03-04 15:05:36
11581
原创 css 实现div背景上下虚化效果
1. box-shadow属性大部分遇到的场景，边框虚化的话，用box-shadow属性可以轻松解决，例如下面这种效果一行简单的代码即可搞定box-shadow属性设置参数如下：但是如果我只要上下边或者左右需要的效果，使用box-shadow属性有很大的局限了，例如效果图如下（为了演示效果，用了比较显眼的颜色。。。。）2.liner-gradient()函数可能box-shadow使用起来达不到这么理想的效果，我们可以换一个方式，设置div的背景图，利用线性渐变属..
2022-01-21 10:44:01
4048
原创 使用flexible进行可视化大屏适配
关于大屏可视化，大多默认是1920*1080，当然也有更高分辨率，我们做开发适配的时候，可以利用flexible进行屏幕适配工作。针对分辨率，可以进行一个宽高配比，flexible默认将屏幕分割为10份，我们可以自行处理为24份，1920/24=80，所以1rem = 80px，利用rem搭建页面，保证了基本的宽高配比在处理设计图尺寸的时候，以1920*1080举例1920/24=80 1rem = 80px3940/24=80 1rem = 160px ...
2021-12-29 16:52:03
2045
原创 纯css position:sticky 实现表格首行和首列固定
目录1.认识position:sticky2.position:sticky小栗子-实现表格首行和首列固定2.1 效果图2.2 代码1.认识position:sticky我们先来了解一个css属性，position:sticky，粘性布局，粘性布局，下面是MDN的介绍课代表划重点：粘性布局是relation和fixed的结合，必须与top、right、bottom、left的任一属性配合使用才可以。看到这里。感觉功能很强大吧，巴特，然后浏览器的兼容性不是很好。不过..
2021-12-21 09:51:26
2347
原创 css 给一个div设置多张背景图
给div设置背景图，个人习惯用background: url();刚好遇到一个多张背景图，之前没考虑过一个div是不是能设置多张背景图,搜了下，发现background-image就可以，其实后面可以设置多个图片地址，直接放代码吧。.banner{ width: 300px; height: 100px; background-image: url("../img/mobile/banner-bg-right.png"), url(../img/mobile/banner-bg
2021-12-09 15:06:01
3469
原创 js 移动端 日期选择底部弹出插件
先放一张效果图,没用使用框架,H5原生实现插件是我在网上找的,叫Mdate.js这是下载地址https://download.youkuaiyun.com/download/jinse29/43001045使用非常简单,看下面代码<input type="text" id="dateSelectorStart" placeholder="选择日期"><script src="../lib/Mdate/iScroll.js"></script><sc
2021-11-16 14:45:19
2787
1
Unity3D从入门到精通
2018-07-02
JSP技术发展史
2018-05-09
使用Python Scrapy框架编写第一个web爬虫
2018-05-09
Java 科技文献中英文
2018-05-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人