Wrj6811-CSDN博客

原创前端预览文件总结（表格、图片、文本、视频）

最近有个需求要在浏览器上能够查看文件。就是拿到文件的链接，实现文件在线预览的功能，在经过不断地查资料，试错后终于完成了下列文件格式的在线预览功能，暂时没有做大文件的处理（不知道咋做）。这两种是最简单的，直接使用标签就可以。图片类使用 img，视频类使用 video。，特别要注意的是 csv 文件会有中文乱码问题，需要特殊处理，代码中有提到。先列举这么多，后续有其他类型的文件需要在线预览会接着更新。表格类的预览采用了两个第三方的库，文本类有两种方法在线预览，xlsxOptions中的。

2023-04-09 23:47:05 3311 3

原创在对象数组中，根据某个属性，删除树形结构中的某一项数据

在对象数组中，根据某个属性，删除树形结构中的某一项数据

2022-04-07 23:30:40 912

原创使用JavaScript 实现 Array.flat()方法

Array.flat()介绍flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。使用 Array.flat(depth)可以实现数组的扁平化参数depth可选（指定要提取嵌套数组的结构深度，默认值为 1）返回值一个包含将数组与子数组中所有元素的新数组。（所有和原数组没有关系，不会影响到原数组）下面看代码实现：首先：不看depth，不考虑深度问题。将实现方法加到 Arr...

2021-07-12 23:56:52 1015 2

原创防抖与节流实现

本文借鉴于https://segmentfault.com/a/1190000018428170防抖和节流是开发中经常遇到的需求，先看下定义：一、防抖对于短时间内连续触发的事件（比如页面滚动事件），防抖的含义就是让某个时间期限（如1000毫秒）内，事件处理函数只执行一次function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ .

2021-07-07 00:22:32 1317

原创使用JavaScript 实现 split方法

/** * 将输入的字符串以逗号分割，忽略为空的情况只保留数组，返回一个数字组成的新数组 * 禁止使用 String.split * 提示：可以使用 String.chatAt 来取 String 的第 n 位字符，如 '012'.charAt(1) === 1 * @param {string} str 输入的字符串 * @param {string} tag 分割符 * @return {string[]} */ const str1 = ',1,2,3,,44,555,6,78,.

2021-07-03 23:20:46 1748 3

原创 js实现深拷贝

const deepClone = function(obj, cache = new WeakMap()) { // 判断是否是引用数据类型，基础数据类型本身就是地址拷贝 if (obj === null || typeof obj !== "object") return obj; if (obj instanceof Date) return new Date(obj); // 处理时间函数 if (obj instanceof RegExp) return new RegExp(o.

2020-12-21 14:48:51 195

原创浅谈ES6中Promise

promise是ES6中新增的一个用于处理异步请求的一个方法。上面的图片展示了promise的基本的方法和状态。那么如何使用 promise呢？1. 创建一个 Promise实例 const promise = new Promise((resolve, reject) => { if (/* fulfilled */){ return resolve(value) } else { // rejected r

2020-12-20 17:22:45 190

原创传入一个数组如[‘a‘,‘b‘,‘a‘,‘c‘],把数组变成[‘a‘,‘b‘,‘a-2‘,‘c‘]的形式

代码function changeArr(arr) { var obj = {}; var temp = []; for (var i = 0; i < arr.length; i++) { var dt = arr[i]; if (obj[dt]) { obj[dt]++; temp.push(dt + "-" + obj[dt]); } else { obj[dt] = 1; temp.push(dt);

2020-11-23 15:09:37 441

原创统计字符串里面或数组中出现相同的字母个数

2020-11-23 14:57:29 1021

原创在react中使用 antd 做按需加载以及遇到的错误

第一：下载 antd 的包yarn add antd常规操作是直接引入包然后使用：import { Button } from 'antd'import 'antd/dist/antd.css';但是这样就把所有的样式都引用进去了，这就不完美了呀。于是开始做按需加载的部分首先，做按需加载配置：下载包yarn add react-app-rewired customize-cra babel-plugin-import然后配置文件，在根目录下新建一个 conf..

2020-09-10 00:09:15 638

原创圆形加载动画

页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>圆形加载动画</title> <link rel="stylesheet" type="text/css" href="../lib/css/loding.css"/> </head> <body> <input type="checkbo

2020-08-01 22:47:53 252

原创网页动画气泡效果

打开网页，从网页底部生成一个一个的气泡，然后气泡上升到页面顶部消失。利用 setinterval定时器定时，每50毫秒生成一个气泡，然后设置他的样式，出现效果效果图：页面布局代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>网页动画气泡效果</title> <link rel="stylesheet" type="te.

2020-07-30 00:28:43 994 1

原创在一段时间里面，生成随机数

应用场景：设置一个范围，然后随机显示出这个范围里面的数字。在一定的时间里面这个随机数不断的变化，直到时间结束，最终显示出最后的数字。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>随机数生成</title> <style type="text/css"> .box{ margin: 0; pa.

2020-07-25 23:15:02 457

原创使用css实现手风琴菜单

效果图：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>手风琴菜单</title> <link rel="stylesheet" type="text/css" href="../lib/css/accordion.css"/> </head> <body> <di.

2020-07-24 22:35:31 326

原创 CSS实现简单的 hinge 动画

效果如下图所示：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HINGE</title> <link rel="stylesheet" type="text/css" href="../lib/css/hinge.css"/> </head> <body> <div .

2020-07-24 21:36:12 303

原创火箭飞行动画效果实现

使用css动画实现火箭飞行的动画页面布局代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>火箭飞行动画</title> <link rel="stylesheet" type="text/css" href="../lib/css/rocket.css"/> </head> <body> <

2020-07-17 00:23:07 654

原创 404页面实现

页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>页面丢失了</title> <link rel="stylesheet" type="text/css" href="lib/css/404plane.css"/> </head> <body> <div class="error"&gt.

2020-07-15 23:42:20 416

原创 git 常见的指令

Git的工作流程从远程仓库中克隆 Git 资源作为本地仓库从本地仓库中checkout 代码然后进行代码修改在提交前先将代码提交到暂存区提交修改。提交到本地仓库。本地仓库中保存修改的各个历史版本在修改完成后，需要和团队成员共享代码时，可以将代码push到远程仓库工作区和暂存区的概念：工作区就是你在电脑里能看到的目录，比如我创建一个项目 study01 ，这个study01 文件夹就是一个工作区。在这个目录下面的 “.git”隐藏文件夹就是版本库。...

2020-05-18 23:58:19 208

原创使用webpack打包HTML时报错：Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

在学习webpack打包的时候，发现打包HTML设定HtmlWebpackPlugin部分出现错误。Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'原因是我之前只全局安装了 webpack ，而这个还需要局部安装。解决方法: npm i webpack -D npm i webpack-cli -D...

2020-05-13 19:50:43 585

原创 vue中使用mint-ui的导入方法（步骤）

在使用mint-ui的时候发现没有效果（因为我只是单纯的下载了mint-ui，然后就开始使用了），经过查阅mint-ui使用方法后才发现还需要配置babel-plugin-component。配置完以后就能使用了。还有就是百度出来的mint-ui的官网打不开，只需要把http改成HTTPS就可以了。链接为：https://mint-ui.github.io/#!/zh-cn下面的使用方法来自：https://mint-ui.github.io/docs/#/zh-cn2/quickstart ...

2020-05-09 11:28:44 711

原创移动端项目要配置的东西

1.视口（viewport） <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scaleable=no"> 2.点击响应延迟 3 毫秒原因：为了检查用户是否在做双击。为了能够立即响应用户的点击事件...

2020-05-04 18:42:38 241

原创实现一个动态的按钮，边框可以移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...

2020-04-27 22:18:16 561

原创实现一个漂亮简单的登录界面

方法一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="st...

2020-04-27 22:00:17 31131 17

原创使用原生 js 实现轮播图的效果

页面布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...

2020-04-19 23:41:02 197 1

原创使用js实现鼠标拖动一个盒子移动的实例

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...

2020-04-11 17:43:02 2468

原创输入一个时间，然后开始倒计时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...

2020-04-07 15:03:49 1400 1

原创使用js完成一个60秒倒计时，点击停止时就显示倒计时三个字

废话不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...

2020-04-02 20:54:08 1832

原创实现旋转木马的效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { perspective: 1500px; } section { ...

2020-03-23 16:58:07 764

原创使用transform实现搜索框里面的三角形而不用字体图标

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input { outline: none; width: 200px; ...

2020-03-20 16:36:58 308

原创使用css实现一个小三角形

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .right{ height: 0; width: 0; border-style:...

2020-03-19 17:12:18 352

原创使用async和await得到异步操作的数据

代码如下var asyncFunc = function (sql) { return new Promise(function (resolve) { mysql.query(sql, result1 => { resolve(result1) }) }) } const asyncDeal ...

2020-03-13 21:47:07 621

原创微信小程序console.log出来的是object的问题解决方法

在开发微信小程序的时候，从后台传过来的数据没有问题，但是在开发的过程中，console.log出来的结果为object。把console.log()里面的东西去掉，直接是 res.data就可以了或者是把 ‘+’改为‘，’也能输出数据 ...

2020-02-02 16:41:31 4266 2

原创 elementUI中遇到的一些问题（不知道是不是bug）

在使用Cascader级联选择器的时候，遇到了一些小问题第一个问题：从后台读取完数据后，使用级联选择器，但是那个级联的弹框非常大，和官方文档中的形状完全不一样，搞得我十分难受，于是就想着，改一下css样式不就完了嘛，打开控制台找到了最顶上的那个类，搞一下他，最开始我是在vue组件中的style中修改.el-cascader-panel { width: 360px; he...

2019-11-24 23:37:32 1964 1

原创简单的日历实现

index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>简单日历实现</title> <link rel="stylesheet" type="text/css" href="index.css"/> &lt...

2019-11-20 15:26:53 266

原创遇到的跨域问题（使用fetchAPI的时候）

代码如下： fetch('http://localhost:3000/books', { method: 'post', body: JSON.stringify({ uname: '张三', pwd: '456' }), heade...

2019-11-14 23:51:57 535

转载理解 js中同步操作和异步操作

字面误区：1、js同步操作任务，并非一起操作之意；2、js异步操作任务，也并非是指在不同线程里做不同的事情。本质理解：首先js的语言执行环境是单线程的，也就是一次只能完成一个任务，多个任务就必须按照时间先后排队，前面完成后才能完成后一个任务。这个是js的常规模式，也就也是同步操作任务。弊端：同步操作任务带来的问题是，只要一个任务执行时间过程，后面的任务都会排队等待，拖延整个程序的执行，如：...

2019-11-09 00:10:01 360

原创实现搜索框功能（将搜索关键字标红，点击就加入到文本框中）

类似于百度的搜索框，当输入一个字或词的时候，自动检索有没有该内容，有的话把输入的关键字标红代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>百度搜索框设置</title> <style&...

2019-11-06 11:22:51 4548

原创 v-model制作简易计算器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...

2019-11-04 15:30:31 467

原创 animation 中的 steps() 的使用做一个时钟

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ position: absolute; left: 50%; top: 1...

2019-10-16 23:19:59 298

原创选择框批量选择

点击一个选择框，其他选择框全选或全不选。当下面的选择框全选上时，上面的选择框也选上，下面的选择框没有全选上时，上面的取消选择。代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> &lt...

2019-10-08 23:08:49 834

日历制作，实现一个日历的基本功能 .rar

空空如也