自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(50)
  • 资源 (5)
  • 收藏
  • 关注

原创 css backdrop-filter 实现背景滤镜

官方给出的定义是:backdrop-filter属性允许您将图形效果(如模糊或颜色偏移)应用于元素后面的区域。的所有内容,所以要查看元素或其背景的效果,需要透明或部分透明。根据上述10种,做了一张汇总图。同样直接贴一下源码吧。

2024-05-09 15:49:41 331

原创 css mix-blend-mode 层叠样式属性各类效果

官方给出的定义是:mix-blend-mode css 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。根据上述16种,做了一张汇总图,设置父级容器背景色为#FFBB00,原图图片资源如下所示。通俗来讲,就是一张图片跟它的父级元素背景色的融合方式。16种混合-混合-模式属性下不同的呈现效果如下所示。

2024-05-09 09:14:00 367

原创 js 根据年月获取该月份的最后一天

项目中遇到一个根据年月获取该月份的最后一天。简单一句即可实现获取该月份最后一天。

2024-05-06 15:30:50 139

原创 vue 金额组件,输入提示单位:‘千’、‘万’、‘十万’...并用‘,’三个格式化

近期项目中遇到一个需求,金额输入框,输入过程中自动提示‘千’、‘万’、‘十万’、‘百万’......等单位提示,鼠标失去焦点后,并用‘,’三位隔开计数。封装的组件inputCurrency.vue。失去焦点:12,345.99。输入:12345.99。放一张图展示下效果吧。

2024-05-06 15:23:11 508

原创 threejs 大场景下,对小模型进行贴图处理

大概知道这个模型由哪些子模型组成,这个模型没有group的概念,只有简单的mesh组成,根据实际的业务需求,模型名称可能有一定的约束规范,例如id之类。针对已有模型,根据数据状态进行贴图处理,例如:机房内电脑告警状态、电脑开关机状态下的不同状态贴图等。单个模型的情况下,直接对其进行 material 进行赋值即可,亲测有效。第一步加载完模型后,查看下模型的结构,可以打印下object的子模型。模型组的场景,对其进行children遍历,进行材质重新赋值。贴图后,忽略红色丑树干,只是增强演示效果。

2024-02-28 10:26:50 657

原创 threeJS 大模型中对小模型进行删除

大概知道这个模型由哪些子模型组成,这个模型没有group的概念,只有简单的mesh组成,根据实际的业务需求,模型名称可能有一定的约束规范,例如id之类。核心代码就是用的remove()方法,注意的是,需要对其材质和物体进行一个dispose销毁操作。在ThreeJS项目中,拿到一个大场景的模型,可能后续有根据需求进行小模型的删除和调整。第一步加载完模型后,查看下模型的结构,可以打印下object的子模型。最后放一张删除后的效果图吧(对比图一:树已经被删除了)例如,大模型示例图中,我们需要删除树的小模型。

2024-02-28 10:10:26 666

原创 threeJS 全屏或非全屏状态下鼠标点击获取屏幕位置

threeJS 全屏或非全屏状态下鼠标点击获取屏幕位置

2024-02-22 15:10:31 880

原创 threeJs 模型单双击点击事件

threeJS的事件是计算射线和模型的交点的方法,其中核心是判断event.detail属性,分别打印下单双击事件下的event。控制台根据鼠标的点击次数进行输出,注意的是双击事件时,先打印单击再双击。threeJS中对模型的点击事件,单击还是双击,先放个简单的例子👇。所以根据event.detail属性进行点击事件判断即可实现。关于threeJS模型的引入方法,可以看这个☞。

2024-02-22 10:10:22 502

原创 fabric.js 组件 图片上传裁剪并进行自定义区域标记

利用fabric组件,实现图片上传、图片”裁剪“、自定义的区域标记一系列操作先放一张效果图吧👇。

2024-01-19 15:57:53 1152

原创 vlc播放rtsp视频流

首先使用object标签,关于object标签的介绍,放一张图。简单记录一下项目中用到的浏览器内嵌vlc播放rtsp视频流。

2024-01-16 15:34:51 803

原创 vue 判断是否是360浏览器,检测是否安装某个插件

直接贴代码吧,注释写的比较清晰了。1、需要判断当前访问的浏览器。3、如果未安装则提供。

2024-01-16 15:04:00 716

原创 vue-cal 使用教程

因为使用的是月历,所以把disable-views属性设置成了"['years', 'month']"个人感觉vue-cal 比 v-calendar 更好用呢,可能因为api写的深入我心,资料比较齐全吧。vue3直接可以看本文最下方的API,有详解。vue-cal组件的API地址☞。events数据结构。

2023-11-09 16:30:27 783

原创 v-calendar 日历组件使用&自定义提示内容

最近项目中用到了日历插件,需要统计每天的任务数量,类似elementui的badge组件,待办任务数量大概最后的效果如下图所示,右上角把代办任务数量展示出来vue的日历相关组件挺多的,选了v-calendar,后期翻API有点难受,中文版不太好找,简单记录下。

2023-11-09 16:10:26 4626

原创 ThreeJS 模型中内嵌文字

之前有过模型中内嵌html网页,地址☞这次是纯粹的在模型中嵌入文本信息,进行简单的文字展示展示效果图。

2023-08-29 10:07:57 623

原创 vue 浏览器右侧可拖拽小组件

用vue的自定义指令,做一个v-drag的操作指令,也有许多大佬分享了源码,只不过在此基础上稍加修改下限定,一直保持沿着浏览器右侧上线拖拽而已。很多网页在浏览器右侧有"导航"或者“智能助手”的悬浮小气泡框,比如我们的csdn☞。作为页面友好型的引导标注,某些场景下这些小气泡可以沿着浏览器的右侧进行上下的拖拽。是限制拖拽位置的,共有三处,注释掉放开上一行的代码,即可实现全屏的拖拽。使用非常简单,如上图👆所示,加一个v-drag指令即可。

2023-08-04 09:26:08 1066 1

原创 js 不规则字符串进行字节截取

遇到一个小问题,字符串中包括“汉字”、“数字”、“英文”、“符号”等不确定的内容,但是展示的时候需要超长后进行截取展示,单纯的字符串截取可能不能满足需求,找了一下,有个根据字符串计算字节数量的方法,进而进行字节截取。直接贴代码,可能不是很全面,但是也是一种新的思路吧,随手记录一下,直接贴代码。

2023-05-18 09:21:21 371

原创 input 各类事件汇总&&触发时机&&触发顺序

今天梳理了一下input框的各类事件,简单介绍一下吧。

2023-04-28 10:33:56 8122 1

原创 JavaScript 鼠标事件监听&&触发时机&&触发顺序

先说下触发时机和作用键(左键、右键)

2023-04-25 11:12:23 7125

原创 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 2401 1

原创 video 视频下载,调用浏览器的下载进度方法

简单介绍下需求,跟上次的帖子一样,需要重写video标签的进度栏的样式,当然也包括重写下载方法,调用原生video标签下载视频的时候,浏览器会弹出下载进度条。其实下载常用的可能利用a标签,创建一个请求就可以实现下载,但是这种下载方法死活出不来进度,可能方法使用的不对,如有好的方法可以提示我~展示下自定义下载方法后的效果,点击黄色下载按钮后浏览器的展示效果,除了重新自定义了视频的名称,效果跟原生的下载效果一致。下图为调用原生时候,浏览器的下载进度提示。谷歌可能再底部出现,展示用的是Edge浏览器。

2023-03-23 10:59:18 2394 1

原创 gojs 拓扑图虚线动画效果

先放一张效果图,简单描述下业务场景,有一台设备报错后,边框标红展示,且虚线线段置为灰色不再流动,进行告警展示。

2023-03-22 11:25:33 795

原创 video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载

最近遇到的需求就是重新video标签的控制栏的样式,包括进度条、音量、倍速、全屏等样式,在正常状态下,可以将原生样式隐藏掉自定义新的控制栏元素定位上去,但是全屏后样式失效,出现的还是原生的控制栏。只能曲线救国,说白了就是让video的父级全屏,进而让video也屏,控制栏的自定义组件样式定位上就可以了。具体是f12 可以看出,自定义的组件其实还在原先的位置,全屏后的video新增的伪类和样式无法修改,未全屏状态下自定义控制栏的组件样式。全屏后,发现控制栏已经变成原生的样式。

2023-02-24 10:22:05 3853

原创 Three.js 模型加载及加载简单动画

简单介绍下Three.js吧,Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。因为使用简单,入门比较容易。Three.js的具体介绍和使用有很多教程,可以根据自己需要搜索。它重要的三个属性:场景(scene),相机(camera),渲染器(renderer),组合构成一个三维画面。

2023-01-30 10:14:50 3367 2

原创 循环中设置异步加载

Promise的相关方法

2022-09-23 10:16:07 183

原创 echarts 多柱状图点击事件分别监听效果实现

echarts 多柱状图点击事件分别监听效果实现

2022-09-06 10:56:36 3084 1

原创 jeDate日期控件 时间最大值最小值禁用的bug修改

jeDate日期控件 时间最大值最小值禁用的bug修改

2022-09-02 10:15:44 707

原创 浅谈深拷贝 内附超好用的深拷贝方法

浅拷贝:创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝:将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。...

2022-08-15 14:07:54 510

原创 运算符?? ,?. ,??= 使用方法

运算符?? ,?. ,??= 使用方法

2022-07-07 16:59:36 485

原创 vue 手签面板sign-canvas组件使用

最终效果图用的是sign-canvas组件,将用户手签的内容生成图片并保存,使用非常简单

2022-07-01 14:46:40 980

原创 qrcodejs2和vue-qr二维码生成组件使用

npm 中搜索发现好多二维码生成的组件,大概看了下,比较常用的可能是qrcodejs2和vue-qr

2022-07-01 10:56:18 2428 1

原创 css关键词:inherit、initial、overlay、revert、unset解释

写样式好久,这几个属性既陌生又熟悉,可能这几个属性能在关键时刻以四两拨千斤之力解决我们困扰了好久的问题,今天终于腾出时间来系统整理汇总下,如有不对,请多指正~以overflow为例,在控制台样式随机打出overflow时候,浏览器对该属性做了一下提示...

2022-03-04 15:05:36 10442

原创 vue-dplayer 视频播放组件介绍

年后开工第一帖,加油鸭

2022-02-11 16:03:57 11129 12

原创 css 优化字体抖动问题

两行css样式轻松解决字体抖动问题

2022-01-21 11:28:53 1714 4

原创 css 实现div背景上下虚化效果

1. box-shadow属性大部分遇到的场景,边框虚化的话,用box-shadow属性可以轻松解决,例如下面这种效果一行简单的代码即可搞定box-shadow属性设置参数如下:但是如果我只要上下边或者左右需要的效果,使用box-shadow属性有很大的局限了,例如效果图如下(为了演示效果,用了比较显眼的颜色。。。。)2.liner-gradient()函数可能box-shadow使用起来达不到这么理想的效果,我们可以换一个方式,设置div的背景图,利用线性渐变属..

2022-01-21 10:44:01 3315

原创 使用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 1939

原创 纯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 1596

原创 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 3331

原创 js 移动端 日期选择底部弹出插件

先放一张效果图,没用使用框架,H5原生实现插件是我在网上找的,叫Mdate.js这是下载地址https://download.csdn.net/download/jinse29/43001045使用非常简单,看下面代码<input type="text" id="dateSelectorStart" placeholder="选择日期"><script src="../lib/Mdate/iScroll.js"></script><sc

2021-11-16 14:45:19 2643 1

原创 js实现星星打分

先发那个一张效果图用原生js实现一个类似是淘宝评价打分的效果,比较简单,直接上代码0.用到的素材星星图标,选中和未选中两种状态,放在下面????,可以直接下载1.页面内容// 利用ul标签,设置五颗星星,class=light是选中的效果<ul> <li class='light'></li> <li></li> <li></li> <li>&lt

2021-11-16 11:24:52 1527

原创 canvas 实现圆形加背景图

好久不用canvas,昨天有小妹问怎么给一个圆形设置背景图,发现之前会的都遗忘了,顺带重新学习了下canvas,记录下顺手的小知识点。先上效果图图片原图:直接上代码,注释解释的挺详细的~<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>canvas画圆并追加背景图</title> <style> #canv..

2021-11-05 14:57:29 1944

jeDate日期控件 时间最大值最小值禁用的bug修改

jeDate日期控件 时间最大值最小值禁用的bug修改

2022-09-02

Mdate.zip js 移动端 日期选择底部弹出插件

js 移动端 日期选择底部弹出插件

2021-11-16

Unity3D从入门到精通

Unity3D 作为一款跨平台的游戏开发引擎,可以开发出运行在网页、客户端、安卓手机、 Iphone 手机,Ipad、Xbox360、PS3、Wii 客户端的游戏。其内置的 Mono 和 ShaderLab 程序 语言体系良好的解决了多系统跨平台直接协同作战的问题。可以说是今年一款十分方便易 用的游戏开发引擎,能够开发出次世代风格的网络游戏。作为学习者来说,现在学习 Unity 3D 来说正是恰逢其时,因为 Unity3D 引擎是一家丹麦的游戏引擎运营商 Union 开发的游戏 引擎,一直以来对中国的市场支持度并不是太高,但今年有所不同。随着 ChinaJoy 在上海 的顺利召开,Union 也获得了丰厚的风险投资在上海成立了办事结构,正准备面向中国市场 一展拳脚。

2018-07-02

JSP技术发展史

The Java Server Pages(JSP) is a kind of according to web of the script plait distance technique, similar carries the script language of Java in the server of the Netscape company of server- side JavaScript(SSJS) and the Active Server Pages(ASP) of the Microsoft.JSP compares the SSJS and ASP to have better can expand sex, and it is no more exclusive than any factory or some one particular server of Web.Though the norm of JSP is to be draw up by the Sun company of, any factory can carry out the JSP on own system.

2018-05-09

使用Python Scrapy框架编写第一个web爬虫

Scrapy是当今世界上最为强大的Python爬虫框架之一,通过Scrapy,开发者可以快速构建高效实用的爬虫,本章将带领大家学习使用Scrapy爬虫框架,编写属于自己的第一个网络爬虫。

2018-05-09

Java 科技文献中英文

Java 科技文献翻译 中英文 JSP技术概述与应用框架 1.JSP的好处 JSP页面最终会转换成servler。因而,从根本上,JSP页面能够执行的任何任务都可以用servler来完成。然而,这种底层的等同性并不意味着servler和JSP页面对于所有的情况都等同适用。问题不在于技术的能力,而是二者在便利性、生产率和可维护性上的不同。毕竟,在特定平台上能够用Java编程语言完成的事情,同样可以用汇编语言来完成,但是选择哪种语言依旧十分重要。

2018-05-09

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除