前端
前端技术知识分享
Roc-xb
坚持最初的梦想,扬帆起航,乘风破浪,永不言败。
展开
-
Error: spawn xdg-open ENOENT
报错:The CJS build of Vite’s Node API is deprecated. Seethrow er;如果你的系统没有apt-get命令,可能是因为你使用的不是Debian系的Linux发行版(如Ubuntu),而是其他类型的Linux发行版,或者是Windows或macOS系统。原创 2024-06-11 03:48:28 · 304 阅读 · 0 评论 -
node设置镜像源详细教程
在Node.js环境中,你可以通过设置npm或yarn的镜像源来加速依赖包的下载。原创 2024-06-11 03:17:26 · 1164 阅读 · 0 评论 -
HTML+CSS+JS实现2048经典小游戏(附完整源码)
2048 小游戏的目标是通过合并数字单元格,最终在 4x4 的棋盘上创建一个值为 2048 的单元格。原创 2024-06-05 15:19:23 · 1178 阅读 · 0 评论 -
小白也能看得懂的基于HTML+CSS+JS实现的五子棋小游戏
五子棋是一种起源于中国的传统棋类游戏,具有悠久的历史。原创 2024-06-02 15:46:49 · 502 阅读 · 0 评论 -
JS 使用正在匹配出现e.match is not a function.
在JS中使用正则表达式match()函数遇到:一、报错分析这个问题,经过测试,并不是在所有客户端都会出现,在老版本的JS库,貌似不会报错。原创 2024-04-01 12:30:47 · 333 阅读 · 0 评论 -
JS实现正则匹配文本中的URL地址
如何利用JS正则表达式,提取文本中的URL地址呢?原创 2024-04-01 04:40:20 · 457 阅读 · 0 评论 -
利用JS实现指定范围内【m,n】的随机整数
参数来决定是否允许生成的数字重复,最终将结果存在数组中并作为函数的返回值。利用JS实现指定范围内【m,n】的随机整数,并且可以根据。原创 2024-03-15 07:12:37 · 417 阅读 · 0 评论 -
HTML如何设置多图片上传,并限制格式类型
上面这行代码,只支持单个文件上传,且不支持文件类型过滤,在实际开发过程中,我们经常遇到会上传多张图片,并且有时候对上传的图片后缀格式有一定限制要求。那么我们可以用下面这行代码实现多图片文件上传,并限制格式为jpg和png格式。最后我们应该如何获取上传图片信息呢?我们可以用JavaScript来获取上传的图片信息。在HTML如何设置多图片上传,并限制格式类型为jpg和png格式。原创 2024-01-04 19:02:05 · 762 阅读 · 0 评论 -
支付宝生僻字选择器
本文的数据来源于支付宝网页版本生僻字选择器。原创 2023-11-22 07:27:10 · 462 阅读 · 0 评论 -
用HTML+CSS+JS实现一个简单的弹幕滚动留言板
【代码】用HTML+CSS+JS实现一个弹幕滚动留言板。原创 2023-10-28 07:47:11 · 818 阅读 · 0 评论 -
学习Vue3你需要知道的47个实用开源组件
官网:https://sortablejs.github.io/vue.draggable.next/#/simple。官网:https://varlet.gitee.io/varlet-ui/#/zh-CN/home。官网:https://www.antdv.com/docs/vue/introduce-cn。官网:https://better-scroll.github.io/docs/zh-CN/官网:https://vant-contrib.gitee.io/vant/#/zh-CN。原创 2023-10-27 01:05:43 · 1728 阅读 · 1 评论 -
alova.js快速入门教程
alova 是一个轻量级的请求策略库,针对不同请求场景使用对应的请求模块,让开发者使用非常少量的代码就可以实现高可用性和高流畅性的请求功能,这意味着,你再也不需要自己绞尽脑汁编写请求优化代码,再也不需要自己维护请求数据和相关状态,你只需要选择并使用请求模块,设置参数后,alova 帮你搞定。tips:alova 结合 UI 框架,让请求变得更简单,你可以使用 alova 提供的。等多个请求相关的状态化数据,并在 alova 中自动管理它们,而无需自己维护。发起请求,它将返回例如。Svelte: 任意。原创 2023-09-19 20:04:36 · 712 阅读 · 0 评论 -
利用html+css+js实现回到顶部小功能
本章教程,主要是实现一个网站中比较常见的小功能,这个功能就是回到顶部。功能描述:当浏览器右侧的滚动条,滑动到某个位置的时候,显示回到顶部图标,回到顶部之后,图标作隐藏处理,本文直接给出具体的实现代码,仅供参考,大佬绕道。原创 2023-09-16 14:43:02 · 641 阅读 · 0 评论 -
百度统计代码失效怎么办?
当你百度统计失效时,如果网站meta使用了,如果是在统计脚本之前执行,那么此时需要先执行统计脚本,然后再设置metajs会阻塞dom tree解析,css不会阻塞dom tree解析,css只会影响dom tree的绘制css的加载是会阻塞js的运行的,css体积越小影响越小外部资源的最佳方式,header引入外链cssbody结束标签引入script脚本。原创 2023-07-26 08:39:40 · 938 阅读 · 0 评论 -
JS实现检查密码强度函数
编写一个JS函数,基于如下规则确定给定密码的强度。原创 2023-06-20 11:17:35 · 1163 阅读 · 0 评论 -
ECharts快速入门教程
Apache ECharts(incubating)是一款由百度开源的基于JavaScript的开源可视化图表库。它提供了丰富的图表类型,包括折线图、柱状图、散点图、饼图、雷达图、热力图等,并支持动态数据、数据区间选择、数据缩放等交互功能。同时,Apache ECharts还提供了多种主题、动画效果、导出图片等功能,方便用户在不同场景下定制自己的图表。Apache ECharts支持多种数据源,包括JSON、CSV、XML等,同时也提供了API接口、事件监听等高级功能,方便用户进行二次开发和定制。原创 2023-06-03 10:03:35 · 318 阅读 · 0 评论 -
利用zoom插件实现点击图片放大效果
一个简单的图像缩放jQuery插件;支持浏览器版本(ie9+)原创 2023-05-17 03:14:48 · 656 阅读 · 0 评论 -
2023年了,快去给你的博客加上一个主题吧~
最近闲逛github,发现了一个不错的博客主题,分享给大家。这个主题主要是用于博客园的个人主页美化用的。原创 2023-05-15 06:45:46 · 646 阅读 · 12 评论 -
网页如何实现一键切换繁体字或简体字呢?
网页如何实现一键切换繁体字或简体字呢?JS文件代码来源于:https://github.com/hustlzp/jquery-s2t。原创 2023-05-02 19:33:46 · 1199 阅读 · 0 评论 -
基于Layui的登录注册页面模板
在layui 版本2.8+中,提供了好看的登录注册模板。原创 2023-05-01 08:32:17 · 4659 阅读 · 1 评论 -
Layui 2.8.1 正式发布,朴实归来
Layui 是一套开源免费的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,拿来即用。其风格简约轻盈,而内在雅致丰盈,甚至包括文档在内的每一处细节都经过精心雕琢,非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架,却并非逆道而行,而是信奉返璞归真之道。确切地说,它更多是面向于追求简单的务实主义者,即无需涉足各类构建工具,只需面向浏览器本身,便可将页面所需呈现的元素与交互信手拈来。原创 2023-04-28 03:16:44 · 1440 阅读 · 0 评论 -
用JS手写一个深拷贝函数
深拷贝函数用于实现将一个对象/数组完全克隆一份,新克隆出来的对象与原对象完全独立,二者互不影响。原创 2023-04-16 01:09:51 · 107 阅读 · 0 评论 -
JavaScript正则表达式实现货币数字千分位分割
样例输入1:num1 = "20010320.888888888"样例输入2:num2="20010320"样例输出1:20,010,320.888888888样例输出2:20,010,320题目解释:整数部分用千分位分割,小数部分不需要分割,需要考虑值是负数的情况。限制条件:请使用正则表达式来解决这个问题。原创 2023-03-31 13:18:50 · 447 阅读 · 1 评论 -
利用JS正则表达式实现手机号脱敏处理
前端脱敏是不可取的,要想做到真正的数据安全,还需要在后端进行脱敏处理才行。只有符合正则表达式的手机号才会进行脱密显示,否则会显示原mobile。本文简单介绍一下,如何利用JS正则表达式实现手机号脱敏处理。2、不符合条件的输出。原创 2023-03-13 07:30:59 · 2301 阅读 · 0 评论 -
Vue3视频播放器组件Vue3-video-play入门教程
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。1、支持快捷键操作2、支持倍速播放设置3、支持镜像画面设置4、支持关灯模式设置5、支持画中画模式播放6、支持全屏/网页全屏播放7、支持从固定时间开始播放8、支持移动端,移动端会自动调用自带视频播放器9、支持hls视频流播放,支持直播10、hls播放支持清晰度切换。原创 2023-03-11 20:35:47 · 18230 阅读 · 23 评论 -
最新版本chrome浏览器出现的跨域问题及解决方案
最近将chrome浏览器更新到了最新版本 ,在个别网站上出现了跨域访问问题。原创 2023-03-06 12:19:18 · 3000 阅读 · 1 评论 -
如何让网站一键变成全局灰色?
这几天大家可以看到很多网站包括主页和内容也都已经变成了灰色,比如CSDN、百度、B 站、爱奇艺、阿里云,腾讯云等众多网站。那么他们是如何实现的呢?其实,实现起来很简单,只需要在通用样式文件中加入以下css代码即可实现。加入css代码之后的网站效果。原创 2022-12-02 05:48:15 · 335 阅读 · 1 评论 -
最新axios快速入门教程
Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。想要使用异步/等待?在外部函数/方法中添加'async'关键字。这里以get请求方式举例说明,其它请求方式类似。将请求参数放到params中。将请求参数拼接到url中。......原创 2022-07-26 03:23:55 · 933 阅读 · 0 评论 -
基于html+jquery实现的网站打赏组件
基于html+jquery实现的网站打赏组件原创 2022-07-11 08:04:17 · 790 阅读 · 0 评论 -
thymeleaf如何取url中请求参数值?
或者二、 JS取值原创 2022-06-22 03:42:15 · 1438 阅读 · 0 评论 -
thymeleaf中如何给onclick事件传值的方法
方法一:方法二:原创 2022-06-22 03:12:35 · 1917 阅读 · 0 评论 -
thymeleaf如何格式化日期?
Thymeleaf主要使用org.thymeleaf.expression.Dates这个类来处理日期,在thymeleaf模板中使用"#dates来表示这个对象。1、格式化日期[[${#dates.format(date)}]] 或 th:text="${#dates.format(date)}[[${#dates.formatISO(date)}]] 或 th:text="${#dates.formatISO(date)}[[${#dates.format(date, 'yyyy-MM.原创 2022-05-30 10:01:03 · 8616 阅读 · 0 评论 -
仿百度浏览器控制台打印信息
在百度搜索页面打开浏览器控制台(F12),看到这么一段提示文字信息。感觉挺有趣的,它是如何实现的呢?一起动手实践一下吧。目录一、预览效果二、程序代码一、预览效果二、程序代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge".原创 2022-05-27 10:07:44 · 303 阅读 · 0 评论 -
This request has been blocked; the content must be served over HTTPS.
Mixed Content: The page at 'xxxxxx' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxxxxx'. This request has been blocked; the content must be served over HTTPS.解决办法:在HTML中的head标签中添加下面代码,即可解决此问题。<meta http-e...原创 2022-05-27 06:21:13 · 888 阅读 · 0 评论 -
jquery实现ul列表中点击li选择radio
如何利用jquery实现ul列表中点击li选择radio呢?目录1、HTML代码2、JS代码3、效果预览1、HTML代码<ul class="list-group"> <li class="list-group-item"> <input name="money" value="1" type="radio"> <span>1元=1金币&l..原创 2022-05-25 12:23:57 · 1079 阅读 · 0 评论 -
thymeleaf保留2位小数
使用thymeleaf保留2位小数的方法。目录(1)第1种写法(每隔3位有逗号)(2)第2种写法(每隔3位有逗号)(3)第3种写法(每隔3位没有逗号)(1)第1种写法(每隔3位有逗号) [[${ #numbers.formatDecimal(1234.5601,1,'COMMA',2,'POINT')}]](2)第2种写法(每隔3位有逗号)<strong style="color: gold" th:text="${ #numbers.for.原创 2022-05-25 06:45:24 · 2304 阅读 · 0 评论 -
This is probably not a problem with npm. There is likely additional logging output above.
使用node打包命令npm run build:prod 时报这个错误。This is probably not a problem with npm. There is likely additional logging output above.(1)删除目录下的node_modules目录(2)删除目录下的 package-lock.json文件(3)清理npm缓存(4)重新安装依赖(1)删除目录下的node_modules目录rd /s /q node_module.原创 2022-05-23 11:31:20 · 4131 阅读 · 0 评论 -
JavaScript 保留两位小数的三种实现方法
1、利用toFixed () 方法var num =3.1415926; num = num.toFixed(2); console.log(num); // 输出结果:3.142、利用Math.floor () 方法var num = 3.1415926;num = Math.floor(num * 100) / 100;console.log(num); //输出结果:3.143、利用正则表达式方法var num=3.1415926;num=Number(n.原创 2022-05-23 09:58:54 · 10822 阅读 · 0 评论 -
利用JS实现短信验证码倒计时案例
本章教程利用JS实现发送短信倒计时案例,这个需求在实际开发过程很常见。目录一、程序代码二、预览展示一、程序代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发送短信验证码倒计时案例</title> <style type="text/css"> #demo { .原创 2022-05-15 01:47:35 · 1033 阅读 · 0 评论 -
给网站加上雪花特效
如果你想给你的网站上加上的雪花特效,你可以这样做。HTML代码在使用这个代码的时候,因为代码JS中用到了jquery语法。所以需要额外引入jquery。2<script src="https://www.wenytao.com/zb_users/upload/winter/xue1/js/snowy.js"></script><style type="text/css">.snow-container { position: fixed; .原创 2022-05-14 00:54:32 · 568 阅读 · 0 评论