JS
关注
分享
扫一扫
CaseyWei
感激每个遇见的人
展开
-
vue中html转义解决提交表单问题
在项目开发过程中会有textarea文本框输入提交后台，在特殊字符和脚本防注入的处理上，采用html转义的简单方法来解决这个问题。这种能解决一般的脚本注入和表单提交解析问题，复杂验证还需自定义增加转义正则来实现。2、使用htmlDecode来解析后台返回回显的转义后的字符。原创 2023-05-12 15:03:21 · 665 阅读 · 0 评论 -
echarts饼图只显示数据为前五的标签提示
数据展示模块，饼图展示数据过多，标签提示遮挡，优化记录一下 ~原创 2023-04-26 11:26:55 · 1942 阅读 · 0 评论 -
Vue获取URL图片的宽高
Vue获取URL图片的宽高原创 2023-01-30 15:21:30 · 1925 阅读 · 0 评论 -
vue获取富文本中的图片链接
vue获取富文本中的图片链接原创 2023-01-30 15:13:43 · 496 阅读 · 0 评论 -
JavaScript去除字符串中所有的标点符号，只保留中文、英文和数字
JavaScript去除字符串中所有的标点符号，只保留中文、英文和数字。原创 2022-12-29 18:04:37 · 3344 阅读 · 0 评论 -
Vue中封装WebViewJavascriptBridge实现与app原生交互
原生app里边一些需要页面需要h5来实现，涉及到app原生与h5交互，记录一下。原创 2022-12-06 21:49:09 · 3296 阅读 · 0 评论 -
new Date() 方法在iOS设备上时间显示无效的问题的解决方法
在开发h5嵌套app，发现 Android 设备可以正常的显示时间，而 iOS 设备无法正确的显示。原创 2022-11-29 11:56:42 · 2465 阅读 · 0 评论 -
H5判断是否安装app和唤起APP
首先判断安卓还是苹果,接着利用schema链接打开app,如果没有打开则执行setTimeout跳转下载页。原创 2022-11-29 11:51:03 · 5124 阅读 · 1 评论 -
Vue2 中哪些地方不能使用箭头函数
this 将会指向 undefined，经常导致 `Uncaught TypeError: Cannot read property of undefined` 或 `Uncaught TypeError: this.myMethod is not a function` 之类的错误。3.不应该使用箭头函数来定义 `计算属性 (computed)` 里面的函数。5.不应该使用箭头函数来定义 `过滤器 (filters)` 里面的函数。4.不应该使用箭头函数来定义 `监听器 (watch)` 里面的函数。原创 2022-08-22 15:48:57 · 612 阅读 · 0 评论 -
html5实现移动端抢红包雨
html5实现移动端抢红包雨原创 2022-07-29 15:12:47 · 1333 阅读 · 0 评论 -
JS——事件代理和应用场景
click，mousedown，mouseup，keydown，keyup，keypress从上面应用场景中，我们就可以看到使用事件委托存在两大优点减少整个页面所需的内存，提升整体性能动态绑定，减少重复工作focus、blur这些事件没有事件冒泡机制，所以无法进行委托绑定事件mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的https。......原创 2022-07-21 17:19:55 · 344 阅读 · 1 评论 -
js——reduce函数详解
reduce 逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加（上一步的计算结果是当前元素之前所有元素的总和）——直到没有更多的元素被相加。语法：参数：一个 “reducer” 函数，包含四个参数：输出结果:原文链接：https://blog.csdn.net/weixin_44374280/article/details/123561555......原创 2022-07-13 10:18:53 · 1502 阅读 · 0 评论 -
js——实现点击复制功能
选中复制<template> <el-button type="primary" plain @click="onCopy">复制</el-button></template><script>export default { methods:{ onCopy(){ document.execCommand("Copy"); // 执行浏览器复制命令 this.$message({...原创 2022-04-21 21:10:25 · 2124 阅读 · 0 评论 -
JS——new Date()实例
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取当前星期X(0-6,0代表星期天)myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数.原创 2022-04-19 20:26:51 · 160 阅读 · 0 评论 -
Document.createDocumentFragment()介绍
1.语法let fragment = document.createDocumentFragment();fragment 是一个指向空DocumentFragment对象的引用。2.描述DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元原创 2022-04-17 10:15:10 · 3054 阅读 · 0 评论 -
jquery实现下拉加载更多
实现思路：只要滚动条拉到的某个位置距离底部距离大于边框的高度立即加载新数据。代码如下：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滚动加载更多</title> <style type="text/css"> body,div{ margin:0;原创 2021-08-19 17:55:43 · 1768 阅读 · 1 评论 -
通过cookie控制首页弹框一天只显示一次
具体代码如下：<div id='mask' style="display: none">mask</div> <Script> function setCookie(name, value, expire) { window.document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : (";原创 2021-08-19 17:35:06 · 630 阅读 · 6 评论 -
（转）Chrome浏览器解决本地文件跨域（加载失败）问题及Access to XMLHttpRequest at ‘file:报错解决办法
1.右击桌面的谷歌快捷方式选择‘新建快捷方式’，创建一个新的2.右击谷歌快捷方式选择属性，打开属性窗口3.在目标中的原有地址后面加上+ 空格+‘--user-data-dir="c:\ChromeDebug" --test-type --disable-web-security’4.因为启动参数中增加了--user-data-dir="c:\ChromeDebug"，表示Chrome会从c:\ChromeDebug中存取用户数据，因该目录可能为空...原创 2021-08-09 11:33:03 · 5865 阅读 · 0 评论 -
CSS实现抽奖大转盘
1.转盘效果：2.代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>幸运大转盘</title> <style> * { /* 重置默认样式 */ margin: 0; padding: 0; border: none; outlin..原创 2021-08-05 15:01:26 · 1620 阅读 · 1 评论 -
（转）JS——一维数组转二维数组
使用场景举例：接口返回一个数组对象，展示时每行固定显示n个，则可将返回的数组转成二维数组[[...n], [...n]...]的形式循环展示。a.数组元素为基本类型： let baseArray = [1, 2, 3, 4, 5, 6, 7, 8]; len len = baseArray.length; let n = 4; //假设每行显示4个 let lineNum = len % 4 === 0 ? len / 4 : Math.floor( (len / 4) + 1 );原创 2021-04-01 09:01:09 · 450 阅读 · 0 评论 -
（转）maptalks+vue——初始化地图
前言maptalks配合VUE开发地图服务一、maptalks是什么？一个用于集成2D / 3D地图的开源javascript库。maptalks官网maptalks官方实例二、使用步骤1.引入css和js在VUE根目录的index.html引入代码如下（示例）：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css"><script type原创 2021-03-23 18:17:50 · 650 阅读 · 0 评论 -
js递归方式遍历寻找树形结构数据中的节点
实现思路就是通过递归函数判断当前节点是否等于要找的节点id，如果不是再判断是否有children节点，再通过递归的方式将children节点传值到函数里面去调用这样就可以通过递归的方式遍历所有树形结构数据找到对应的节点。...原创 2020-12-08 08:32:53 · 8561 阅读 · 3 评论 -
遍历 JSON 的所有节点值
const json = { a: { b: { c: 1 } }, d: [1, 2]}const dfs = (n, path) => { console.log(n, path); Object.keys(n).forEach(k => { dfs(n[k], path.concat(k)); })}dfs(json, []);原创 2020-11-23 09:59:10 · 855 阅读 · 0 评论 -
VUE在浏览器全屏下监听Esc键盘事件
说明： 实测可以在谷歌、火狐、360 浏览器使用 解决了在浏览器全屏下监听不到键盘Esc事件 解决了取消全屏和全屏的同步问题，ESC按键下可以同步 实例：<!--html--><!-- 全屏显示 --> <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="da.原创 2020-10-14 09:11:38 · 2544 阅读 · 2 评论 -
momentJS时间加减处理
实例： console.log(moment().format("YYYY-MM-DD HH:mm:ss")); //当前时间 console.log(moment().subtract(10, "days").format("YYYY-MM-DD")); //当前时间的前10天时间 console.log(moment().subtract(1, "years").format("YYYY-MM-DD")); //当前时间的前1年时间 .原创 2020-09-29 10:12:47 · 1709 阅读 · 0 评论 -
（转）Moment.js常见用法总结
Moment.js常见用法总结Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。 日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。接下来，我将按照这些操作对Moment.js中的Doc进行整理分类，方便学习和日后的查阅。官网地址：http://momentjs.cn/获取时间 Start of Time moment().startOf(String) 获取今原创 2020-09-24 11:19:29 · 960 阅读 · 0 评论 -
剑指 Offer 03. 数组中重复的数字（JavaScript版）
找出数组中重复的数字。在一个长度为 n 的数组 nums 里的所有数字都在 0～n-1 的范围内。数组中某些数字是重复的，但不知道有几个数字重复了，也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。示例 1：输入：[2, 3, 1, 0, 2, 5, 3]输出：2 或 3解：var findRepeatNumber = function(nums) { const arr = new Array(nums.length) for(let n of nu.原创 2020-09-09 10:10:13 · 189 阅读 · 0 评论 -
Proxy相比于defineProperty的优势
vue3.0 -- 摒弃Object.defineProperty，基于 Proxy 的观察者机制探索写在前面：11月16日早上，Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了Vue.js 3.0的一些新特性，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。我相信许多同学深有体会，许多面试中Object.defineProperty是vue这个框架一个出现率很高的考察点，一开始大家对这个..原创 2020-09-08 15:49:15 · 660 阅读 · 0 评论 -
（转）JS事件循环和宏任务和微任务
一 进程与线程进程和线程的概念用较为官方的术语描述来说是这样的1.进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）2.线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）用LOL来比喻的话（举例子可能不太贴切，因为本人比较喜欢玩lol 所以用这个举例子让自己来加深印象）一个进程就是一局游戏，每一局游戏都要有野怪小兵这些资源；每局游戏都相互独立互不干涉；一个线程就是一个英雄；一局游戏里有多个英雄（一个进程..原创 2020-09-03 17:50:02 · 416 阅读 · 1 评论 -
（转）浏览器中的事件循环机制
网上一搜事件循环, 很多文章标题的前面会加上 JavaScript, 但是我觉得事件循环机制跟 JavaScript 没什么关系, JavaScript 只是一门解释型语言, 方便开发和理解的, 由V8 JIT将 JavaScript 编译成机器语言来调用底层, 至于浏览器怎么执行 JavaScript 代码, JavaScript 管不着也不关心. 因此, “JavaScript事件循环机制”这种说法是不合理的. 事件循环机制是由运行时环境实现的, 具体来说有浏览器、Node等. 这篇文章就先来说说浏览器原创 2020-09-03 17:48:58 · 238 阅读 · 0 评论 -
（转） ＜script＞ 标签以及其加载顺序问题，包含 defer & async
谈谈<script>标签加载顺序的问题这篇文章比较长，如果你耐心读完了，我会感谢你愿意在这篇文章上花费时间，也希望你有收获。其实说起<script>，几乎搞前端的都知道他的作用：引入JavaScrit代码。没错，这就是<script>被创建的最初原因。<script>标签出现的很早，这个元素是由 Netscape 创造，并在 Netscape Navigator 2中首先实现。后来，这个元素被加入到正式的 HTML 规范中。JavaScri...原创 2020-08-28 09:44:56 · 569 阅读 · 0 评论 -
（转）理解JS执行上下文
执行上下文(Execution Context): 函数执行前进行的准备工作（也称执行上下文环境）运行JavaScript代码时，当代码执行进入一个环境时，就会为该环境创建一个执行上下文，它会在你运行代码前做一些准备工作，如确定作用域，创建局部变量对象等。具体做了什么先按下不表，先来看下JavaScript执行环境有哪些？JavaScript中执行环境全局环境 函数环境 eval函数环境 （已不推荐使用）那么与之对应的执行上下文类型同样有3种：执行上下文的类型全局执行...原创 2020-08-28 09:15:31 · 200 阅读 · 0 评论 -
(转)JavaScript为什么console.log ([] == ![]) 结果为true?
首先，纠正一个大部人的误区究竟这个比的机制是怎么样的呢， 不应该是 ![]为false , 就变成了 [] == false,那么[]不应该隐式转换为true吗？ 这样不就变成了 true == false 结果应该为false啊？==趋向于把类型不同的指转换为 number 类型进行比较，而不是 boolean 类型对于[]==![]先将等号右边化简[] == ![] //=> [] == !Boolean([])//=> [] == !true//=&.原创 2020-08-18 16:04:22 · 1077 阅读 · 0 评论 -
javascript获取对象数组每个对象某个属性value相等的个数
实例：var arr = [ { IACCESSEQUIPID: 1 }, { IACCESSEQUIPID: 1 }, { IACCESSEQUIPID: 2 }, { IACCESSEQUIPID: 1 }, { IACCESSEQUIPID: 3 }, { IACCESSEQUIPID: 2 }, { IACCESSEQUIPID: 1 }, { IACCESSEQUIPID: 2 }, { IACCESSEQUIPID: 1 }, { IACCESSEQ原创 2020-08-17 08:42:13 · 1473 阅读 · 0 评论 -
（转）Web开发应了解的5种设计模式
什么是设计模式？设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论，而不是现成的代码，当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题，毕竟这是前人无数经验总结成的最佳实践，而代码实现则是对加深理解的辅助。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。在本文中，我将介绍其中常见的四种设计模式在JavaScript中实际使用场景：单例设计模式定义单例模式仅允许类或对象原创 2020-08-14 11:51:18 · 245 阅读 · 0 评论 -
vue使用element组件库中日期选择器实现以月份为刻度，只能选择上个月份之前的月份
最近新版本有个需求是日期选择器以月份为刻度，只能选择上个月份之前的月份，平时这种业务需求不多，于是实现后记录下～<el-date-picker v-model="declareYearMonth" type="month" placeholder="请选择计佣年月" format="yyyy 年 MM 月" value-format="yyyy-MM" :picker-options="pickerOptions"></el-date-picker>expo...原创 2020-08-11 10:42:28 · 2011 阅读 · 0 评论 -
JS——将一维数组拆分为指定长度二维数组
1,将数组array分成长度为subGroupLength的小数组并返回新数组function group(array, subGroupLength) { let index = 0; let newArray = []; while(index < array.length) { newArray.push(array.slice(index, index += subGroupLength)); } ret.原创 2020-07-25 18:30:35 · 3887 阅读 · 2 评论 -
Uncaught RangeError: Invalid array length 问题原因
使用Vue的v-for的时候出现了错误Uncaught RangeError: Invalid array length问题出在v-for的的数据上，由于提供的数据小于0所致。<tr v-for="n in emptyCount"></tr>在这里我计算了空的tr的数量，将数量控制在12条数据。this.emptyCount = 12 - projectList.length然而我忽略了一个问题，那就是projectList的长度大于12的时候长.原创 2020-07-25 18:26:56 · 5001 阅读 · 0 评论 -
（转）理解 es6 class 中 constructor 方法 和 super 的作用
首先，ES6 的 class 属于一种“语法糖”，所以只是写法更加优雅，更加像面对对象的编程，其思想和 ES5 是一致的。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function() { return '(' + this.x + ',' + this.y + ')';}等同于class Point { constructor(x, y) { ..原创 2020-07-02 18:14:47 · 442 阅读 · 0 评论 -
(转)ES6——super的理解
ES6 中的继承和 super 的用法大家都不会陌生，可是一问到 super 到底是什么，估计很对人都会回答不上来。在 ES6 中，super 是一个特殊的语法，而且它比 this 还要特殊，有很多用法上的限制。super类似于ES5语法中的call继承class A{ constructor(n){ console.log(n); //=>100; this.x = 100; } getX(){ console..原创 2020-07-02 16:31:14 · 326 阅读 · 0 评论