javaScript
新时代农民工Top
不想做产品经理的 UI 不是一个好的程序员
展开
-
前端将当前页面或者页面中某一部分区域保存成 pdf 文件
前端页面保存成 pdf 文件转载 2024-05-15 15:10:09 · 96 阅读 · 0 评论 -
vue+elementui 项目 table表格自定义排序规则
在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序,需将 sortable 设置为 custom,同时在 Table 上监听 sort-change 事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。原创 2022-09-30 15:32:44 · 5734 阅读 · 2 评论 -
vue+element-ui 表格/列表的拖拽排序 --- sortablejs 包
简介:Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。在做公司新项目的时候,提的新需求,原本定义的是点击箭头对列表进行排序,后来更改UI式样的时候要求做成拖拽排序…中文文档:https://www.itxst.com/sortablejs/f7nqyvbn.html。接下来简单介绍一个拖拽排序的包。原创 2022-09-03 22:31:18 · 792 阅读 · 2 评论 -
纯前端下载 csv 格式文件
代码】纯前端下载csv格式文件。原创 2022-07-22 16:20:45 · 2105 阅读 · 0 评论 -
input 框只允许输入正整数数字
原生js – input在项目中有些时候我们希望 input 框之能输入数字,比如 购物车里的商品数量等等<body> <input type="text" class="inp" maxlength="5"> <script> let inp = document.querySelector('.inp') inp.addEventListener('input', (e) => { in原创 2022-02-25 16:45:00 · 3567 阅读 · 0 评论 -
封装一个函数,输出2-n(任意数字)之间的素数
封装一个函数,输出2-n(任意数字)之间的素数function fn(n) { let arr = [] for (let i = 2; i <= n; i++) { for (let j = 2; j <= i; j++) { if (i % j === 0) { arr.push(i) } } if (arr.length === 1) {原创 2022-02-21 17:22:54 · 341 阅读 · 0 评论 -
vue 自定义多选框组件
自定义多选框组件<template> <div class="checkBox"> <input v-model="isInherit" @click="handlerChecked" :style="`width: ${width}px; height: ${height}px;`" type="checkbox" id="inp" /> <label for="inp"> <span :style="`font-原创 2022-02-17 16:28:16 · 1674 阅读 · 0 评论 -
HTML5 file对象和blob对象的互相转换
file 对象格式转换原创 2022-02-12 19:44:12 · 6299 阅读 · 0 评论 -
vue 中通过添加原生 input 实现文件上传
文件上传是通过 input 框 且 type = 'file' 来实现的文件上传功能,在页面标签合适位置添加<input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none" @change="changeImage($event)" ref="avatarInput" /><!-- 在点原创 2021-12-30 17:45:00 · 4849 阅读 · 2 评论 -
JS 判断数组的五种方法
JS 判断数组的五种方法Array.isArray()let arr = []console.log(Array.isArray(arr)) // trueinstanceoflet arr = []console.log(arr instanceof Array) // trueObject.prototype.toString.call()let arr = []console.log(Object.prototype.toString.call(arr) === '[原创 2021-11-29 15:00:00 · 302 阅读 · 0 评论 -
js如何判断两个数组是否相等
先从最基本的长度判断长度不同的两个数组肯定不会相等,在两个数组长度相等的时候再去判断里面的所对应的每一项是否相等原创 2021-11-11 20:14:18 · 1504 阅读 · 0 评论 -
定义一个方法获取一段携带参数的 url 中 key 对应的 value
给定一段 url 地址,取出后面的参数转换成参数对象,然后再通过 key 找到对应的 value原创 2021-11-04 09:44:17 · 588 阅读 · 0 评论 -
new 操作符在执行的时候做了些什么
new 操作符在执行的时候做了些什么new 操作符在 js 中一直就存在,当创建一个实例对象的时候就会想到 new ,经常开玩笑说程序员没有对象别急那就 new 一个出来加下来我们就看看 new 操作符具体都做了些什么1. 创建了一个空对象,作为要返回的实例对象首先,new 操作符肯定返回了一个对象,而且这个对象是按照其构造函数要求的样子进行构造的function Fn(name) { this.name = name}let obj = new Fn('zs')console.l原创 2021-10-15 10:29:07 · 311 阅读 · 0 评论 -
vue3 -- 自己封装类似京东商品详情页放大镜效果组件
vue3 – 自己封装类似京东商品详情页放大镜效果组件原创 2021-09-19 20:02:54 · 635 阅读 · 0 评论 -
vue项目优化--图片懒加载--封装自定义指令
项目优化–图片懒加载–封装自定义指令目的对于一些图片多的网站,图片懒加载是必不可少的一项性能优化,在图片进入可视区域再加载,这样可以避免不必要的性能损耗,增加网页的加载速度,在加载的时候处理一下加载失败web API IntersectionObserver原生 web API IntersectionObserver 简单介绍// 创建观察对象实例const observer = new IntersectionObserver(callback[, options])const obs.原创 2021-09-16 14:24:34 · 185 阅读 · 0 评论 -
给定一串数字转成 RGB 形式
把数字处理成字符串,然后用字符串方法分割成数组,反转数组定义一个空数组循环反转数组把反转数组中的每一项添加到定义的新数组中由于每三个字符添加一个逗号,所以通过判断索引值对 3 取余为 0 并且索引值不等于反转数组的长度最后把新数组反转并合并成字符串let num = 1234567845// 封装一个数字转 RMB 的方法function toRMB(num) { // 把数字处理成字符串,然后用字符串方法分割成数组,反转数组 let arr = num.toString().s.原创 2021-09-15 17:50:21 · 285 阅读 · 0 评论 -
给定一段 URL 地址截取后面的参数转成对象(key-value形式)
http://xxxxrerr.htm?a=1&b=2&c=&d=xxx&e ==> {a: "1", b: "2", c: "", d: "xxx", e: undefined}原创 2021-09-15 16:30:21 · 908 阅读 · 0 评论 -
JavaScript防抖与节流
为什么要有防抖与节流如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕,此时我们可以采用 debounce(防抖)和 throttle(节流)的方式来减少调用频率,同时又不影响实际效果一、防抖当持续触发事件时,一定时间段内没有再触发事件,事件处理函数 才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时如下:输入事件在输入时,2000毫秒之内不触发事件才会输出,而且2000毫秒之内再次出发 input 事件就会重新计时<div> <.原创 2021-09-12 13:31:23 · 85 阅读 · 0 评论 -
vuex利用第三方包实现数据持久化
Vuex–持久化目的:让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储。如果有别的模块也需要持久化,也存储在本地1)首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。npm i vuex-persistedstate2)然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js 和 c.原创 2021-09-11 19:27:39 · 704 阅读 · 1 评论 -
JavaScript 闭包
JavaScript 变量属于本地或全局作用域。全局变量能够通过闭包实现局部使用(私有)结论: 闭包概念:一个作用域有权访问另外一个作用域的局部变量 闭包作用:让一个变量的作用范围延伸,能够避免变量污染,让外部访问函数内部变量成为可能例1function father(){ let num = 1 return function son(){ console.log(num) }}let er = father()//console.原创 2021-09-07 18:37:34 · 96 阅读 · 0 评论 -
JavaScript 的数据类型有哪些?null,undefined 的区别
数据类型基本数据类型:number、string、boolean、null、undefined、bigint引用数据类型:function、object、Array区别null 表示一个对象被定义了,值为“空值”undefined 表示不存在这个值typeof undefined //"undefined" undefined 是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但还没有定义。当尝试读取时会返回 undefined原创 2021-09-06 15:48:34 · 327 阅读 · 0 评论 -
JavaScript 中什么情况下会返回 undefined
1、访问声明,但是没有初始化的变量2、访问不存在的属性3、访问函数的参数没有被显式的传递值4、访问任何被设置为 undefined 值的变量原创 2021-09-05 09:02:16 · 1371 阅读 · 0 评论 -
js 实现色色的九九乘法表
js 实现色色的九九乘法表玩转九九乘法表 新花样方法:使用双重 for 实现九九乘法表js 代码如下: for (let i = 1; i <= 9; i++) { for (let j = 1; j <= i; j++) { document.write(`<span style="background:${getBackgroundcolor()}">${j}x${i}=${j*i}</span>`) }原创 2021-08-15 19:21:25 · 9767 阅读 · 0 评论 -
JavaScript中原型以及原型链
js中原型以及原型链每个函数身上都有一个原型,我们称之为 原型对象函数的 prototype 属性指向原型对象,原型对象上的 constructor 指回构造函数function Person() { this.uname = '张三', this.age = 22}// 原型对象Person.prototype.sex = '男'Person.prototype.head = 1Person.prototype.sayName = function () { console.原创 2021-08-14 22:10:36 · 961 阅读 · 2 评论 -
哈喽大家好!昨天发布了一点数组的API ,那今天就来说说string字符串中比较常见的几种的API方法吧
string字符串的API方法str.length:字符串的length属性,可以返回字符串的长度let str = 'qwejisngushvau'console.log(str.length) // 14str.toLowerCase():可以让字符串里面的字母大写转成小写let str = 'QWEISADNGANV'console.log(str.toLowerCase()) // 'qweisadnganv'str.toUpperCase():可以让字符串里面的字母小写转成.原创 2021-08-09 22:04:05 · 102 阅读 · 0 评论 -
javascript中数组的API方法
javascript中数组的API方法数组.concat():合并数组let arr1 = [1, 2, 3]let arr2 = [4, 5, 6]let arr = arr1.concat(arr2) console.log(arr) // [1, 2, 3, 4, 5, 6]数组.indexOf():查找数组中的元素找到返回索引值,找不到返回 -1let arr1 = [1, 2, 3]let arr = arr1.indexOf(1) console.log(arr) // 0.原创 2021-08-08 20:51:34 · 472 阅读 · 1 评论 -
JavaScript寄生式组合继承
组合继承(通过改变this指向进行继承)组合继承也被称为伪经典继承,它综合了我们昨天说的原型链和盗用构造函数,将两者的优点结合在了一起。它的基本思想是使用原型链继承原型上的属性和方法,通过盗用构造函数继承实例属性,这样的好处就是可以把方法定义在原型上复用,每个实例又有自己的属性。 // 先声明一个构造函数 SuperType ,并且给它定义属性 function SuperType (name) { this.name = name; this.color.原创 2021-08-07 18:06:42 · 252 阅读 · 0 评论 -
跨域问题以及解决方案
首先先了解一下什么是跨域:当浏览器的url地址的协议,域名,端口号和ajax的地址的协议,域名,端口号有一个对应不上就会发生跨域问题。跨域有几种解决方案呢?(jsonp、cros、代理转发)1. jsonp需要前端和后端同时支持前端用script+src属性, 发送函数名给后台, 同时准备好同名的函数, 准备接收数据后端返回的字符串一定用方法名(数据字符串)格式返回, 到script标签中执行调用函数名, 并传递数据<script> function callBackFn(原创 2021-08-06 13:25:13 · 116 阅读 · 1 评论 -
js数组转换tree树状结构
数组转成对象const arr = [ { label: '男', value: 0 }, { label: '女', value: 1 } ]转换为: {0: '男', 1:'女'}具体代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-原创 2021-08-04 20:19:21 · 1103 阅读 · 0 评论 -
什么是对象的深浅拷贝?怎么实现深浅拷贝?
首先,先了解深浅拷贝的含义:浅拷贝就是通过简单地赋值的方式进行拷贝,那为什么说这是浅拷贝呢?就是因为赋值的方式只会把对象的表层赋值给一个新的对象,如果里面有属性值为数组或者对象的属性,那么就只会拷贝到该属性在栈空间的指针地址,新对象的这些属性数据就会跟旧对象公用一份,也就是说两个地址指向同一份数据,一个改变就会都改变。深拷贝则不会出现上述问题,引用数据类型,它就会地址跟数据都会拷贝出来。那么实现深拷贝就要会使用方法来实现:1.通过递归函数来实现深拷贝function myCopy(ne原创 2021-07-06 20:30:27 · 427 阅读 · 0 评论