- 博客(32)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面：这是纯前端导出，导出的表格是二级表头，内容是四级单元格（单元格内有四小格），这几个点学会之后应该能适应大部分导出excel的需求了。对于之前没接触过导出excel需求的小伙伴可能会有一点点的难度，希望各位能静下心来阅读和学习。有什么问题请在下方留言，我会尽力解答~导出excel的前提是我们需要加载以下框架or文件vue + elementui（表格是用这个ui框架写的）Export2Excel.jsBlob.js我先附上效果图，各位看一下是否符合自己的需求......
2022-04-15 18:54:01
10335
24
原创 javascript 两种方法输出斐波那契数列的索引值
斐波那契数列（Fibonacci sequence），又称 黄金分割 数列，因数学家莱昂纳多·斐波那契（Leonardoda Fibonacci）以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：0、1、1、2、3、5、8、13、21、34、……在数学上，斐波那契数列以如下被以递推的方法定义： F (0)=0， F (1)=1, F (n)= F (n - 1)+ F (n - 2)（ n ≥ 2， n ∈ N*）在现代物理、准 晶体结构 、化学等领域，斐波纳契数列都有直接的应用，为此，美.
2021-10-23 11:56:44
300
原创 javascript 数组扁平化的几种方式
var a = [1,2,[3,4, [5,6,7]]]//es6封装好的方法 console.log('flat ', a.flat(Infinity))//toString方法console.log('toString ', a.toString().split(',').map(item => parseFloat(item)))//JSON的stringify方法console.log('stringify ', JSON.stringify(a).replace(/(\[
2021-10-22 19:02:45
205
原创 javascript 快速排序（递归）
function quickSort(arr) { if(arr.length <= 1) { return arr } var middleIndex = Math.floor(arr.length/2) var middleValue = arr.splice(middleIndex, 1)[0] var leftArr = [] var rightArr = [] for(var i=0; i<arr.length; i++) { middleValue > a
2021-10-22 18:07:01
105
原创 javascript 插入排序
function insertSort(arr) { var array = [arr[0]] for(var i=1; i<arr.length; i++) { for(var j=array.length-1; j>=0; j--) { if(arr[i] > array[j]) { array.splice(j+1, 0, arr[i]) break; } if(j === 0) { array.unshift(arr[i])
2021-10-22 17:48:59
52
原创 javascript 冒泡排序
function bubSort(arr) { for(var i=0;i<arr.length-1;i++){//确定轮数 for(var j=0;j<arr.length-i-1;j++){//确定每次比较的次数 if(arr[j]>arr[j+1]){ tem = arr[j]; arr[j] = arr[j+1]; arr[j+1] = tem; } } } return arr}...
2021-10-22 17:08:39
50
原创 javascript es6数组去重和手写递归数组去重，以及两种去重的耗时对比
let a1 = [1,2,3,2,3,undefined, NaN, new Object(), 8,8, new Date(), new Date(), new RegExp()]let a2 = [] console.time('time2')console.log([...new Set(a1)])console.timeEnd('time2') function unique(array) { if(array.length === 0) { return a2 } l
2021-10-22 12:18:47
91
原创 javascript 深拷贝
该方法创建一个新的存储空间（地址），用来存储新的对象，防止被旧地址的数据改变而污染新的数据function deepClone(obj) { if(obj === null) { return null } if(typeof obj !== 'object' ) { return obj } if(obj instanceof RegExp) { return new RegExp(obj) } if(obj instanceof Date) { return new .
2021-10-21 12:06:55
68
原创 javascript 利用hash值实现单页面刷新
当地址栏的hash值变化后，触发hashchange事件，从而改变页面数据init: 初始化，window对象绑定hashchange监听reloadPage: hashchange触发后的回调事件map: hash值的配置与回调事件/** * 监听hash值实现单页面刷新 * init: 初始化，window对象绑定hashchange监听 * reloadPage: hashchange触发后的回调事件 * map: hash值的配置与回调事件 * ** * time: 2021.
2021-10-11 15:02:48
600
原创 javascript 发布订阅模式
listen: 订阅者订阅事项时传入唯一的key和事项trigger: 发布者查找唯一的key并触发内部的事项remove: 传入唯一key和事项，匹配之后移除该事项/** * 发布订阅模式 * listen: 订阅者 * trigger: 发布者 * remove: 移除订阅事项 * ** * time: 2021/10 * sub: private * version: 1.0 */var Event = (function () { var list = {}, ..
2021-10-10 16:10:17
71
原创 javascript 利用栈操作将十进制转二进制
前言：栈是一种高效的数据结构。特点：先进后出，且只能从一端入栈与出栈。此图是栈的结构图，图中可以看到，E方块最后入栈，所以最先出栈，而A方块只能最后出栈。十进制转二进制，以10为例，二进制是1010。一直除2取整，当被除数<=0，得到所有余数后倒着排序，就是该数的二进制。取数顺序: 二进制的取数顺序和栈的顺序相似，都是从后排往前取，利用这个共同点，我们尝试用栈的思想，将十进制转二进制。首先封装一个Stack类，里面包含栈的基本操作 function Stack() .
2021-05-29 14:13:20
681
1
原创 JavaScript 元素Position
元素的宽高dom.offsetWidthdom.offsetHeight元素离窗口的距离dom.offsetTopdom.offsetLeft窗口的宽高window.innerWidthwindow.innerHeight鼠标离窗口的距离event.clientXevent.clientY鼠标离元素边框的距离event.clientX - dom.offsetLeftevent.clientY - dom.offsetTop...
2021-05-14 19:18:08
224
原创 微信浏览器video标签高度不正常
如果不需要适配其他屏幕则直接设置video标签的高度就好了。自适应的话则动态设置高度$(function () { $(".video").css("height", $(".video").width() / 2);})$(window).resize(function () { $(".video").css("height", $(".video").width() / 2);})...
2021-03-15 10:09:16
373
原创 javascript 日期
获取年份 new Date().getFullYear()月份0-11, 0代表1月获取月 new Date().getMonth()获取号 new Date().getDate()字符串格式时间转换成毫秒 “2021/03/03” 字符串中不能是"-"new Date(“2021/03/03”).getTime()...
2021-03-03 09:53:57
66
原创 微信小程序 this.setData({}) 对象的属性赋值问题
Page({ data: { QueryParams: { catId: '', pageNum: 1, pageSize: 10 } }, onLoad: function() { // 第一种 this.setData({ ['QueryParams.pageNum']: 2 }) // 第二种 this.setData({ QueryParams: { pageNum:
2021-02-05 10:10:56
3419
2
原创 javascript 转码和解码
转码encodeURI("深圳") //"%E6%B7%B1%E5%9C%B3"解码decodeURI("%E6%B7%B1%E5%9C%B3") //深圳
2021-01-21 16:32:55
362
原创 javascript splice()方法
splice() 方法：从数组中添加/删除元素，然后以数组的形式返回被删除的元素。splice(index, howmany, item)index(必需): 从该索引值开始增加或删除元素howmany(必需): 要删除的元素数量item(可选): 要添加的元素<script> var arr = [1, 2, 3]; console.log(arr); console.log(arr.splice(1, 1));</script>...
2021-01-06 15:39:06
91
原创 javascript中的every方法
数组方法，检测数组元素是否满足条件，全部满足则返回true，否则返回false，如果是空数组则必定返回truevar cart = [ { checked: true, goods_id: 324 }, { checked: true, goods_id: 43985 }, { checked: true, goods_id: 123 } ] //数组元素checked的值全部满足.
2020-12-18 16:18:53
156
1
原创 javascript中的findIndex方法
判断一个数组中是否存在某个元素符合条件，符合则返回数组中的该元素的索引，不符合则返回-1var goodsInfo = { goods_name: '海信(Hisense)LED50MU8600UC 50英寸 4K超高清智能电视 HDR超薄曲面', goods_price: 6809, goods_id: 43985, cat_id: 5, cat_one_id: 1, cat_three_id: 5, cat_two_id: 3, delete_time: null,.
2020-12-17 10:38:45
4814
原创 javascript数组元素累加的方法
var arr = [1,2,3];var sum = arr.reduce((pre, cur) => { return pre + cur;})console.log(sum) //输出6reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。注意： reduce() 对于空数组是不会执行回调函数的。...
2020-11-30 10:29:59
5512
原创 Promise的两种写法
第一种 //参数 -> 函数(resolve, reject) //resolve, reject本身也是函数 new Promise(resolve => { setTimeout(() => { resolve("aaa") }, 3000) }).then(res => { console.log(res, '第一次请求的结果') return new Promise(resolve => { .
2020-10-29 11:47:31
2808
原创 Vue实现底部导航
知识点总结：vue-router、slot插槽，练习封装思想Home.vue<template> <h2>首页</h2></template><script></script><style></style>Classify.vue<template> <h2>分类</h2></template><script&g.
2020-10-28 17:24:42
496
2
原创 Vue Router
components_Home<template> <div> <h2>is Home</h2> </div></template><script> export default { name: 'Home' }</script><style></style>components_User<template> <div>.
2020-10-14 15:27:43
82
原创 记录一下vue组件的使用，以及组件中data为一个函数的作用
前言：为了减少代码冗余，增加代码复用性，避免重复造轮子等问题，vue.js中引入了组件化开发的模式。当一段代码需要重复使用，并且还存在不同页面复用的情况，我们就可以把这段代码封装在组件中。先上代码html<div id="app"> <my-com></my-com> <my-com></my-com> <my-com></my-com></div> <template id=".
2020-09-11 15:37:08
470
原创 js阻止子元素继承父元素的事件
css.poster-dialog { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;} .poster-img { width: 6rem; height: 10rem;}html<div class="poster-dialog" id="poster-di.
2020-07-18 10:52:17
952
转载 html标签的类名规范
常见class关键词：布局类：header, footer, container, main, content, aside, page, section包裹类：wrap, inner区块类：region, block, box结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid,span列表类：list, item, field主次类：primary, secondary, sub, mino
2020-06-30 15:33:23
2602
原创 前端记录一下图片的懒加载
前言：当一个页面需要加载很多张图片，这无疑会降低浏览器的性能，造成页面卡顿的情况。使用懒加载的方式，只显示当前视口所需要的图片，其他所需要的图片，等待用户下拉到该视口后再进行加载。废话不多说，上代码。css body { display: flex; justify-content: center; align-items: center; background: #75878a; height: 3000px; } img { width: 200px
2020-06-29 17:27:50
101
原创 关于Ajax请求的数据进行分页处理，以及数据缓存池的具体操作和讲解
前言：前端工作的一个部分就是异步请求，通过对接后端提供的接口，进行数据获取以及渲染。那么在数据渲染过程中，具体的页面样式就要根据设计稿或者甲方的需求进行开发了。可能页面会有 分页、上拉加载、下拉刷新等各种需求。今天记录一下我对数据分页的处理，以及对数据存储的操作。...
2020-06-18 21:53:30
526
原创 记录一下js节流操作
节流：所谓节流，就是控制某个调用事件的频率，使其较稳定的触发。本次使用的是Date()方法，获得时间差，在特定的时间连续触发事件。设置body高度，使其大于浏览器高度，显示滚动条body { height: 5000px; }监听窗口的滚动，同时比较相隔时间是否大于100毫秒（最后记得更新last时间戳）let last = new Date();window.onscroll = function() { let now = new
2020-06-17 20:19:26
112
原创 今天记录一下js防抖的操作
概述：在一段时间内，多次触发同一个事件，该事件只执行最后一次。原理：添加setTimeout延时处理该事件，在设定的时间内如果再次触发事件，则clearTimeout清除延时器，并重新定时执行事件。这样的话就能在设定的时间内只执行一次该事件了。首先，将body的高度设置成大于浏览器的高度，为了显示滚动条。body { height: 5000px; }当页面滑动的时候进行监听，返回滑动后距离顶部的长度。window.onscroll = function() { con
2020-06-17 18:48:15
196
原创 js数组小题目(push方法的返回值)
function addToList(item, list) { return list.push(item);}const res = addToList("aa", ["bb"]);console.log(res);这道题，push方法返回的是数组的长度，所以res的值是2
2020-06-13 11:36:06
3255
2
原创 css缩减样式代码小案例
给导航栏的全部子元素加上右边框。并且最后一个子元素去除右边框，以保持美观.nav li { border-right: 1px solid black;}.nav li:last-child { border-right: none;}想要缩减代码量，可以这样简写.nav li:not(:last-child) { border-right: 1px solid black;}Well, you’ve finished reading this blog and you can
2020-06-12 11:50:03
145
空空如也
Antd Vue 穿梭框如何保留左侧数据不消失
2021-12-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人