JavaScript
关注
分享
扫一扫
JavaScript常用技术文章整理
卡尔特斯
联系方式：dengzemiao
GitHub: https://github.com/dengzemiao
掘金：https://juejin.im/user/4450440831840909
展开
-
JS 关闭浏览器或关闭该网页所有相关的Tab页，再次访问则需要重新登录，刷新不影响
/ // 可能会刷新页面失败导致没有进入登录页面，所以异步或延迟刷新页面达到进入登录页的效果。最近有个安全需求，当关闭浏览器的时候，再次访问网页需要重新登录，如果当前浏览器中没有一个。标签页存在访问该网页的情况下，进行访问也需要重新登录，但是刷新则不受影响不需要重新登录，// // 退出登录。原创 2024-10-15 13:54:54 · 438 阅读 · 0 评论 -
JS 选色器 colorpicker.js 使用与下载
js 选色器源码，支持取得hexrgb色值。原创 2024-02-23 18:28:01 · 1730 阅读 · 0 评论 -
JS 将 json 对象转成字符串并保留格式 - JSON.stringify()
如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的。，则意味着没有空格；如果该参数为字符串(字符串的前十个字母)，该字符串将被作为空格；如果该参数没有提供（或为。如果参数是个数字，它代表有多少的空格；或者未提供，则对象所有的属性都会被序列化。：指定缩进用的空白字符串，用于美化输出。原创 2023-08-15 10:31:04 · 4280 阅读 · 0 评论 -
如何直接运行 .js 文件
1、安装 环境，推荐通过 nvm 安装 来管理 版本。2、安装完 之后，新建一个 文件3、通过 运行 文件原创 2022-06-14 09:48:20 · 2363 阅读 · 0 评论 -
JS 函数节流和函数防抖的区别（JS 与 Vue 用法）
一、区别防抖与节流的相同点: 为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。函数防抖(debounce): 短时间内连续触发事件后 n 秒内函数只会执行一次，如果 n 秒内事件再次被触发，则重新计算时间，所以短时间内的连续动作永远只会触发一次。函数节流(throttle): 短时间内连续触发事件，但在 n 秒内只会执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，所以节流会原创 2022-05-30 11:58:18 · 398 阅读 · 1 评论 -
JS 数组与字典(JSON)通过字符串快捷取值
有的情况下，需要通过一个字符串快捷获取到 Json 或 数组Json 中指定对象的值，比如：<script> // -------------------------- Json 测试 // 数据 const json = { a: 'a', b: { c: 'c', d: [{ e: 'e' }], f: [[{ g: 'g' }]] } } // ..原创 2022-03-02 18:03:56 · 2621 阅读 · 0 评论 -
JS 数字每三位加逗号的方法
三种方式的分割耗时，并不是代码越少效率越高，推荐 递归 的方式。正则递归slice 截取分割1.3720.0940.108正则// 正则表达式function formatNumber(num) { return num.toString().replace(/\d+/, function (n) { return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') })}console.log(formatNu..原创 2022-01-05 17:41:16 · 8202 阅读 · 0 评论 -
JS 生成绝对唯一标识符（ID、字符串）
<script> // 唯一标识符 function GetUniqueID () { // 当前时间转成 36 进制字符串 var time = Date.now().toString(36) // 当前随机数转成 36 进制字符串 var random = Math.random().toString(36) // 去除随机数的 0. 字符串 random = random.substring(2, random.length) .原创 2022-01-04 17:03:49 · 2396 阅读 · 0 评论 -
前端 HTML5 Svg 画板（支持视频、图片上涂鸦，支持缩放、修改、颜色、复选...）
GitHub 地址支持 视频、图片 上涂鸦，做标记画板功能支持 矩形、圆形、椭圆、箭头、直线、文本，支持 缩放、修改、调整字号颜色、移动位置....，画板数据支持上传保存，后续传入重新复原。...原创 2021-11-23 11:43:01 · 5781 阅读 · 24 评论 -
输入框贴贴去除样式并插入到指定光标位置（contenteditable=“true“ 实现的输入框也支持）
方式一 效果：方式二 效果：<!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"> <ti原创 2021-11-22 18:32:56 · 674 阅读 · 0 评论 -
使用 contenteditable=“true“ 实现的文本框全选内容
<!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"> <title>Document&l.原创 2021-11-22 17:21:54 · 2073 阅读 · 1 评论 -
JS 获取当前浏览器类型（IE、Chrome、Edge、Firefox、Opera、UC、QQ）
IE 11 版本区分方式与之前版本不同。有时候需要单独针对 不同浏览器做不同的处理，就需要获取浏览器类型：// 获取浏览器类型function getBrowserType() { // 获取浏览器 userAgent var ua = navigator.userAgent // 是否为 Opera var isOpera = ua.indexOf('Opera') > -1 // 返回结果 if (isOpera) { return 'Opera' }..原创 2021-11-19 11:20:00 · 8131 阅读 · 0 评论 -
JS 支持 replaceAll 方法（部分浏览器不自带）
字符串有 replace() 单次替换方法，也有 replaceAll() 多次全部替换方法，但是 replaceAll() 方法不是所有浏览器都支持。所以为了 解决兼容问题，需要在 使用之前 或 公共 JS 文件中实现一下字符串扩展，这样就能通过字符串直接进行调用 replaceAll()String.prototype.replaceAll = function (s1, s2) { return this.replace(new RegExp(s1, "gm"), s2)}使..原创 2021-11-19 10:03:34 · 1859 阅读 · 1 评论 -
textarea 动态宽高（根据内容动态撑开宽高）
重点：计算的 span 标签属性需要与 输入框 的字体属性保持一致，这样才能算的精准。案例代码，标签虽然有默认属性，但是为了能够通过 JS 取到值，所以必须手动写一遍样式属性，html 一样带上 style 即可。<script> // 文本输入框(必备属性，主要是字体相关属性) // var inputEl = document.createElement('textarea') // inputEl.rows = 1 // inputEl.style.width...原创 2021-11-11 15:40:59 · 2953 阅读 · 0 评论 -
JS 解决移动端浏览器(Safari、Alook...)无法禁止缩放问题
移动端 web 缩放有两种：双击缩放、双指手势缩放。在 iOS 10 之前，iOS 和 Android 都可以通过一行 meta 标签来禁止页面缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">但 iOS 10 开始，meta 设置在 Safari 内无效了，在 iOS 的其..原创 2021-09-09 12:04:54 · 1745 阅读 · 3 评论 -
前端动画(动态)图标库收集
Titanic：Titanic 提供一系列的动画图标，以及以 JavaScript 的调用图标动画的方法后续在补充…原创 2021-09-06 10:33:33 · 1077 阅读 · 1 评论 -
前端全屏（轮播）滚动插件
全屏滚动1、fullpage.jsfullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。fullPage.js 的主要功能有：支持鼠标滚动、支持前进后退和键盘控制、多个回调函数、支持手机、平板触摸事件、支持 CSS3 动画、支持窗口缩放、窗口缩放时原创 2021-09-02 15:06:07 · 2444 阅读 · 0 评论 -
Nuxt.js 使用 fullPage.js 支持 SSR
一、简介fullpage.js 与 vue-fullpage.js 优先用前者，后者会因为用到 window 对象而报错 window is not defined 错误，但是 fullpage.js 可以通过本地导入的方式很方便的避开这个错误。Error：Fullpage.js version 3 has changed its license to GPLv3 and it requires a licenseKey option. Read about it here 解决方案。附带原创 2021-08-31 15:11:37 · 1417 阅读 · 7 评论 -
Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option ...
控制台报错 Fullpage.js version 3 has changed its license to GPLv3 and it requires a licenseKey option. Read about it here:Fullpage.js version 3 has changed its license to GPLv3 and it requires a `licenseKey` option. Read about it here若引用的是 fullPage.js，就..原创 2021-08-30 17:07:36 · 1690 阅读 · 0 评论 -
解决 Failed to read the ‘localStorage‘ property from ‘Window‘: Access is denied...
报错这个，一般是在浏览器 隐身模式 下使用 localStorage、cookie 存储操作导致的，或者是浏览器正常模式下开启了 阻止第三方 Cookie 权限。打开浏览器 设置 -> 隐私设置和安全性 -> Cookie及其他网站数据 -> 允许所有Cookie，关闭其他阻止选项（针对 Chrome 浏览器，其他浏览器 Cookie 设置的位置可能有所不同）...原创 2021-08-09 16:48:57 · 16994 阅读 · 2 评论 -
JS 解决 removeEventListener 不生效问题
在使用 addEventListener 添加监听后，需要通过 removeEventListener 移除通知，但是不生效，所以需要注意： 添加 跟 移除 的监听方法要一致，也就是监听绑定的是哪个 function，移除也得一致。无法移除的写法// 添加消息监听window.addEventListener('message', function (msg) { // 输出 console.log(msg) // 移除消息监听 window.removeEventListen..原创 2021-08-09 16:32:28 · 5238 阅读 · 5 评论 -
解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame
这是内嵌 iframe 页面使用 window.parent 或 top.xxxx 导致的，在 子页面，想传递给 父页面的参数，但是原因两个的域名不一样，所以会出现跨域问题。解决办法1、父页面监听 message，写法固定window.addEventListener('message', function (e) { console.log(e)})2、子页面发送 message 消息，并附带参数// window.parent 是 iframe 子页面获取父页面的 window..原创 2021-08-09 15:44:38 · 13483 阅读 · 0 评论 -
JS console.log、console.dir、console.dirxml 区别
console.log：用于在控制台输出信息。console.dir：可以显示一个对象所有的属性和方法。console.dirxml：用来显示网页的某个节点（node）所包含的 html/xml 代码。<body> <!-- 测试 div --> <div id="my-div">dzm</div> <script> // 获取 div const div = document.getElementBy..原创 2021-06-10 14:06:19 · 593 阅读 · 0 评论 -
FaceApi 人脸识别技术点
FaceApi GitHubB站教程技术博客模型文件加载存放需要注意：方式一：模型文件放到服务器，通过 URL 进行加载，走代理方式二：如果直接加载本地文件，需要通过 服务器 进行访问！否则会报错： URL scheme must be "http" or "https" for CORS request小程序集成失败1、错误：TypeError: Cannot read property ‘mark’ of undefined，勾上 增强编译2、错误：getEnv..原创 2021-05-27 10:39:54 · 870 阅读 · 0 评论 -
JS 计算两个时间之间的间隔（天、时、分、秒）
function fun () { let startTime = new Date('2015-12-20'); // 开始时间 let endTime = new Date(); // 结束时间 let usedTime = endTime - startTime; // 相差的毫秒数 let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数 let leavel = usedTime % (24原创 2021-05-08 15:36:15 · 9435 阅读 · 0 评论 -
JS 读取 excel 数据后的时间格式转换
使用 xlsx.full.min.js 获取 excel 的日期数据为：42358拿到的整数值是日期距离 1900年1月1日 的天数，这时需要写一个函数转换：function formatDate (numb, format) { let time = new Date((numb - 1) * 24 * 3600000 + 1) time.setYear(time.getFullYear() - 70) let year = time.getFullYear() + '' l..原创 2021-05-08 15:17:53 · 1208 阅读 · 0 评论 -
Vue axios 发送 FormData 请求
一、简介axios 默认是 Payload 格式数据请求，但有时候后端接收参数要求必须是 Form Data 格式的，所以我们就得进行转换。Payload 和 Form Data 的主要设置是根据请求头的 Content-Type 的值来的：Payload：Content-Type: 'application/json; charset=utf-8'Form Data：Content-Type: 'application/x-www-form-urlencoded'Conten原创 2021-02-22 12:08:47 · 22613 阅读 · 6 评论 -
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
.vue 文件// 点击下载touchDowload (item) { // 将当前链接换成本地代理的方式 var baseUrl = '/ProxyDownload' + item.url.replace('https://file.hp.video', '') // 创建一个a节点插入的document var a = document.createElement('a') // 模拟鼠标click点击事件 var event = new MouseEvent('clic..原创 2021-02-18 15:18:07 · 5600 阅读 · 0 评论 -
vuex、localStorage、sessionStorage 存储区别
vuexvue 自带数据储存插件，Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。可以引入 vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。localStorage生命周期是永久，这意味着除非用原创 2020-10-22 09:46:02 · 549 阅读 · 0 评论 -
Vue 自定义全局UI组件
在Vue开发中经常使用第三方插件，通过在 main.js 文件中 使用 Vue.use() 导入后就可以随意在任何 vue 页面进行使用这个组件，那么如果自己做一个呢？一、在当前Vue项目中任意位置建一个组件文件夹custom.vue：是自定义的组件UI，文件名随意，可以多个index.js：文件名推荐固定写法，后期只需要链接到文件夹，默认读取 index.js 文件custom.vue ：<template> <div class="custom-view">.原创 2020-10-22 09:45:17 · 961 阅读 · 0 评论 -
Vue 全局导入 JS 方式以及对 ClassName 进行增删扩展
通过在 Vue 项目中的 main.js 文件中进行导入：// 节点操作JSimport node from '@/utils/node.js'// 注意这行代码需要放到所有的 import 代码之后，否则会报错，Vue 无法允许在任何 import 之前使用 Vue 对象// $ 符号主要就是为了区分属性，可用可不用，但是Vue所有的自带属性都有 $，主要就是为了区别自带与普通属性的区别，相当于Vue内定的默认书写规则，这样写更清晰明了。Vue.prototype.$node = node错原创 2020-10-22 09:45:27 · 555 阅读 · 0 评论 -
JS 数组（详细介绍使用）
数组数组:数据的有序列表，可以存放任意类型的数据，数组的大小可以动态调整。伪数组不属于Array，无法数组长度，允许修改值，例如：Arguments。通过 document.getElementsBy… 获得的数组都是伪数组。伪数组不能使用数组的部分方法或属性。创建数组的两种方式伪数组可以转成真数组，百度即可。○ 数组字面量var arr1 = []; // 创建一个空数组，数组字面量var arr2=[1, 3, 4]; // 创建一个包含3个数值的数组，多个数组项以逗号隔开..原创 2020-10-21 10:08:06 · 229 阅读 · 0 评论 -
JS 将数据保存为 Excel（xls、xlsx）文件，支持单元格样式，合并单元格
最简单的XML格式Excel表格文件csv、xls、xlsx、文件通过 JavaScript 解析成为 JSON 数据 - DZMFormJson拷贝放入 JS 文件即可使用方法/* 需要传入的 data（XMLSheets） 数据格式： [ // ---> sheet(表) 数据 { name: 'Sheet名称', rows: [ // ---> row(行) 数据 [ //..原创 2020-10-21 10:15:47 · 4405 阅读 · 0 评论 -
JS 最简单的XML格式Excel表格文件
JS 将数据生成Excel(XML) 并保存为.xls文件，已封装可以直接使用简单写法：<?xml version="1.0" encoding="UTF-8"?><?mso-application progid="Excel.Sheet"?><Workbookxmlns="urn:schemas-microsoft-com:office:spreadsheet"xmlns:o="urn:schemas-microsoft-com:office:office..原创 2020-10-21 10:15:38 · 1158 阅读 · 0 评论 -
JS 解析CSV字符串，其中包含数据中的逗号
别人的博客文章，收藏一下，有需要的点过去看看，亲测有效！！如何使用Javascript解析CSV字符串，其中包含数据中的逗号原创 2020-10-21 10:15:28 · 1064 阅读 · 0 评论 -
JS Class 使用以及静态方法的调用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> //原创 2020-10-21 10:15:55 · 4141 阅读 · 0 评论 -
JS Promise 使用详细介绍
Promise 简介，自己看一下吧，不想写了。Promise 使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head>.原创 2020-10-21 10:14:22 · 233 阅读 · 0 评论 -
JS eval() 动态执行函数
<script> // 动态执行计算公式 try { const formula = '(1)/(1))' eval(formula) } catch (error) { console.log(error); } // 动态监测函数是否存在 const funcType = typeof(eval('func')) console.log(funcType) // function // 动态执行函数 eval('func()'原创 2020-10-21 10:14:09 · 2567 阅读 · 0 评论 -
JS calc() 动态计算长度函数
CSS calc() 函数calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 “+”, “-”, “*”, “/” 运算；calc()函数使用标准的数学运算优先级规则；#div1 { position: absolute; left: 50px; width: calc(100% - 100px); borde..原创 2020-10-21 10:13:59 · 3880 阅读 · 1 评论 -
axios 请求数据（Post，Get）细节
axios安装以及使用使用 axios 请求数据的时候，我们通常都会传参到服务器，但是 axios 在传参的时候 post 与 get 传参方式会不一样。我现在使用的版本是："axios": {"version": "0.19.0","resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz","integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1.原创 2020-10-21 10:13:49 · 544 阅读 · 0 评论