![](https://img-blog.csdnimg.cn/direct/ebbbf2ae1c1f4825acd2b7431db75d5a.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
工作随记
文章平均质量分 57
工作随记
一颗不甘坠落的流星
前端专栏博主,目标是归纳前端所需要各种技术的使用,不是在补充、就是在重写博客的路上,一步步完善中。
展开
-
【React】使用 antd 加载组件实现 iframe 的加载效果
使用 antd 加载组件实现 iframe 的加载效果原创 2024-07-19 17:18:14 · 408 阅读 · 0 评论 -
【React】监听浏览器返回事件
React 监听浏览器返回事件。原创 2024-07-11 14:52:41 · 402 阅读 · 0 评论 -
【JS】获取接口返回 EventStream 结构的数据(即接收读取 stream 流)
前端获取接口返回 EventStream 结构的数据(即接收读取 stream 流)原创 2024-04-12 17:27:57 · 2358 阅读 · 1 评论 -
【JS】转换多个json结构的字符串为数组
js 转换多个json结构的字符串为数组原创 2024-04-12 17:05:13 · 626 阅读 · 0 评论 -
【ProComponents】解决 ProTable 中 params 参数改变,request 函数未触发问题
Antd ProComponents 解决 ProTable 中 params 参数改变,request 函数未触发问题原创 2024-03-28 13:42:14 · 626 阅读 · 0 评论 -
【Antd】给 DatePicker 设置快捷时间选项
Antd 给 DatePicker 组件设置快捷时间选项原创 2024-03-12 17:15:50 · 786 阅读 · 0 评论 -
【Antd】Form 表单获取不到 Input 的值
Form 表单获取不到表单值问题分析及解决方法原创 2024-02-22 15:19:34 · 921 阅读 · 0 评论 -
【Echarts】解决Y轴内容太长被截断导致显示不全
解决Y轴内容太长被截断导致显示不全原创 2023-12-26 10:31:48 · 1869 阅读 · 0 评论 -
【CSS】实现跳动文字·教程
CSS 简单实现跳动文字案例原创 2023-07-08 18:32:03 · 3131 阅读 · 2 评论 -
【前端】手写轮播图·教程1
文章目录需求分析:效果图:源代码:所用图片:需求分析:根据图片的数量生成相同的小圆点,类名是slider-ctrl-con显示第一个图片,同时第一个小圆点高亮,类名是:slider-ctrl-con current;点击prev显示上一张图片,同时对应小圆点高亮点击next显示下一张图片,同时对应小圆点高亮点击小圆点,切换到对应的图片,同时小圆点高亮可以自动轮播(每隔3000ms自动切换到下一张)鼠标移入slider盒子,停止轮播鼠标移出slider盒子,继续轮播效果图:源代码原创 2021-02-03 10:33:23 · 388 阅读 · 1 评论 -
【前端】手写轮播图·教程2
文章目录效果图:需求分析:源代码:所用图片:效果图:需求分析:根据图片数量生成对应的小圆点克隆第一个li,放到ul的最后面最开始显示第一个li,点亮第一个小圆点点击left按钮,看上一张,点亮小圆点点击right按钮,看下一张,点亮小圆点点击小圆点,看相应图片,点亮小圆点可以自动轮播鼠标移入,停止轮播鼠标移出,开始轮播源代码:HTML部分<div class="all" id='all'> <div class="screen" id="sc原创 2021-02-03 19:46:34 · 338 阅读 · 0 评论 -
【前端】手写打字游戏·教程
文章目录效果图:需求分析:源代码:效果图:需求分析:在char这个div里面显示要输入的字母,大写在result这个div里面时时显示正确率,比如98%给文档绑定按键事件如果输入的内容和char里面一致,显示正确动画:animated zoomIn,并更换输入的字母如果输入的内容和char里面不一致,显示错误动画:animated shake error不管是正确还是错误都时时更新result里面的正确率源代码:HTML部分<mian> <div原创 2021-02-04 17:41:22 · 590 阅读 · 1 评论 -
【Vue】实现搜索内容变红·教程
文章目录效果图源代码效果图未搜索前搜索内容后源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s原创 2021-03-26 19:07:52 · 884 阅读 · 0 评论 -
【前端】手写星级评分·教程
文章目录需求分析:效果图:源代码:所用图片:需求分析:鼠标移入哪个星星,哪个星星及其前面的星星都高亮同时显示相应文字鼠标点击哪个星星,哪个星星及其前面的星星都高亮鼠标移出 ul ,上次点击的星星及其前面的星星都高亮鼠标移出 ul ,如果没有点击过,则所有星星都暗效果图:源代码:HTML部分<!-- ul 里面设置5个 li li 用来放置星星div 用来放置显示的文字--><ul id="ul1" ><li class="defaul原创 2021-02-02 19:12:08 · 899 阅读 · 3 评论 -
【系统】实现简单注册登录功能
文件夹路径图code(总文件夹)public(HTML文件夹)cart.html(登录成功所跳转的页面)login.html(登录页面)register.html(组成页面)login.php(实现登录功能)register.php(实现注册功能)connect.php(封装需要反复用到的信息)HTML文件cart.html 文件代码<!DOCTYPE html><html lang="en"><head> <m原创 2021-02-23 17:43:25 · 6741 阅读 · 0 评论 -
【前端】手写手风琴·教程
文章目录效果图:源代码:效果图:未展开时的效果鼠标悬浮在其上的效果源代码:HTML部分:<!-- 1.创建一个div盒子容器 2.div盒子里面创建ul,设置id名box 3.ul里面li用来放置图片使用--><div> <ul id="box"> <li></li> <li></li> <li></li> <li&g原创 2021-02-02 11:52:45 · 825 阅读 · 2 评论 -
【前端】实现放大镜效果·教程
文章目录效果图:需求分析:源代码:所用图片:效果图:需求分析:鼠标移入小盒子里面,大盒子显示,mask显示鼠标移出小盒子,大盒子隐藏,mask隐藏鼠标在小盒子里面移动,mask跟随鼠标移动,鼠标在mask中间mask不能超出小盒子范围鼠标在小盒子里面移动,大盒子显示大图的相应部分源代码:HTML部分<div id="box" > <div id="small"><!-- 小图片所在的盒子 --> <img src="001.jpg原创 2021-02-04 11:07:36 · 411 阅读 · 2 评论 -
【前端】实现图片轮播·教程
文章目录效果图:需求分析:源代码:所用图片:效果图:需求分析:页面打开的时候,img中显示第一福图,order里面显示第一幅图的进度,info显示第一幅图的信息初始时顺序点击播放点击自动轮播按钮,变成循环播放模式,未开始播放点击prev按钮,向左自动循环播放点击next按钮,向右自动循环播放点击顺序点击按钮,变成顺序播放模式点击prev按钮,img里面变成前一张图点击next按钮,img里面变成后一张图源代码:HTML部分<div id="controls">原创 2021-02-04 15:52:33 · 501 阅读 · 1 评论 -
【前端】实现图片无缝滚动·教程
文章目录效果图:需求分析:源代码:所用图片:效果图:需求分析:实现无缝滚动源代码:HTML部分<div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l原创 2021-02-04 09:30:26 · 597 阅读 · 1 评论 -
【前端】手写数字时钟·教程
文章目录效果图:需求分析:源代码:所用图片:效果图:需求分析:通过date获取时间通过间隔定时器setInterval动态获取时间间隔定时器setInterval间隔设置为1000毫秒(1秒)获取一次时间为了样式好看,我们这是用数字图片来代替数字的源代码:HTML部分 <div id="div"> <img src="img/0.png" /> <img src="img/0.png" /> 时 <img src="img原创 2021-02-04 19:40:35 · 1404 阅读 · 3 评论 -
【前端】实现旋转木马轮播图·教程
文章目录效果图:需求分析:源代码:所用图片:效果图:需求分析:页面打开的时候,每个li缓动到相应位置鼠标移入slide,箭头显示鼠标点击prev按钮,显示上一张鼠标点击next按钮,显示下一张源代码:HTML部分<div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#">原创 2021-02-03 21:17:03 · 537 阅读 · 0 评论 -
【Vue】实现简易待办事项表·教程
文章目录效果图源代码效果图无事项时:有事项时:源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2021-04-09 22:03:13 · 592 阅读 · 0 评论 -
【Vue】实现点击单行变色·教程
文章目录效果图源代码效果图打开页面时:点击第二行源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal原创 2021-04-09 20:12:04 · 366 阅读 · 0 评论 -
【AJAX】实现登录验证·教程
效果图:HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-02-24 18:58:57 · 1724 阅读 · 0 评论 -
【CSS】手写 Tooltip 提示组件
css 手写 Tooltip 提示组件,实用于定制化场景原创 2023-07-26 11:24:59 · 845 阅读 · 0 评论 -
【CSS】悬浮动画
css 悬浮动画原创 2023-07-08 18:07:52 · 855 阅读 · 0 评论 -
【JS】数组降维
在项目中,我们常常要处理比较复制的数据结构,而又找不到现成的方法,这时候就需要我们手动用 js 原生去封装一个了,这里介绍的是将多维数组降一层结构的方法,比如三维数组转二维数组、二维数组转一维数组,...原创 2022-07-04 15:22:32 · 478 阅读 · 0 评论 -
【JS】在字符串某个位置插入子字符串
在字符串某个位置插入子字符串示例 1:/* str:原字符串 index:指定插入的索引文字 insertStr:要插入的字符串*/function insertStr (str, index, insertStr) { const ary = str.split(''); // 转化为数组 ary.splice(index, 0, insertStr); // 使用数组方法插入字符串 return ary.join(''); // 拼接成字符串后输出}con原创 2021-12-20 15:18:51 · 10263 阅读 · 0 评论 -
【JS】敏感信息转换
文章目录字符串转 codefunction strToCode (str) { return str.split('').map(i => i.charCodeAt(0)).join(',')}code 转字符串function codeToStr (code) { return code.split(',').map(i => String.fromCharCode(0)).join('')}原创 2021-12-21 15:47:04 · 137 阅读 · 0 评论 -
【JS】不用第三方变量,交换两个变量的值
不用第三方变量,如何交换两个变量的值原创 2022-08-23 10:34:08 · 175 阅读 · 0 评论 -
【JS】获取URL的查询参数(包括hash和browser模式)
获取 hash 模式或者 browser 模式下URL的搜索查询参数原创 2023-07-05 17:05:33 · 933 阅读 · 0 评论 -
【JS】数组去重
一、浅去重(基本数据类型)1.1、Set 实现(常用)1.2、for 实现1.3、indexOf 实现1.4、includes 实现1.5、filter 实现二、深去重(复杂数据类型)原创 2022-06-06 16:53:09 · 123 阅读 · 0 评论 -
【JS】对象字面量 代替 switch 方法
对象字面量 代替 switch 方法原创 2022-11-08 18:05:53 · 378 阅读 · 0 评论 -
【JS】数组排序(六大方法)
四、for 和 for in 循环因为数组的索引就可以获取数组中的内容数组的索引又是按照0-n顺序排列我们就可以使用for循环来循环数组,因为for循环我们也可以设置成0-n顺序增加我们把这个行为叫做遍历var arr = [1,2,3,4,5];// 使用 for 循环遍历数组for (var i = 0; i < arr.length, i++){ console.log(arr[i]);}//会在控制台依次打印出1,2,3,4,5i < arr.lengt原创 2021-04-10 11:04:55 · 5564 阅读 · 2 评论 -
【JS】伪数组转数组
伪数组是不能使用数组方法的,那如果我们需要使用数据方法,就得先将伪数组转换成真数组。那js 中如果将伪数组转换成数组呢?这里列举几个常用的方法。原创 2022-06-07 14:58:27 · 591 阅读 · 0 评论 -
【JS】获取hash模式下URL的搜索参数
获取hash模式下URL的搜索参数原创 2022-07-01 11:55:55 · 4152 阅读 · 0 评论 -
【JS】阿拉伯数字转成中文数字(包括亿单位长数字)
JS 将阿拉伯数字转成中文数字,比如:111 = 一百一十一原创 2023-09-25 15:09:48 · 519 阅读 · 0 评论 -
【JS】处理多层嵌套的数据结构方法(工作常用)
介绍一些基本的递归使用方法,处理多层嵌套的数据结构,以便获取自己想要的数据原创 2023-06-19 16:36:51 · 1627 阅读 · 0 评论 -
【JS】正则表达式取反(不能以...结尾)
示例需求:不能以"local"作为结尾第一种方案:单个字符/[^local]$/ // 实际效果:不能以字符串"local"其中一个字母作为结尾第二种方案:整体字符串/(?<!local)$/ // 实际效果:不能以字符串"local"整体作为结尾...原创 2021-09-17 15:34:08 · 3693 阅读 · 0 评论 -
【Vue】在项目中使用阿里图标库
在 vue 项目中使用阿里图标库,包括 element-ui 和 ant-design-vue 组件库用法原创 2024-02-01 11:12:58 · 1651 阅读 · 0 评论