随笔分类 -  js

1
Vue3+ElementPlus 中 el-image 预览大图属性 previewSrcList 和 translateY(-5px) 的冲突
摘要：【前言】 Vue3使用ElementPlus，Vue2使用Element-ui。 【问题描述】 在Vue3+ElementPlus中，使用 el-image 和预览大图功能，点击 el-image 后预览的图片局限在原有图片（小图）内，遮罩也没有充满屏幕。 【注】使用 transform: tran 阅读全文
posted @ 2024-12-13 16:29 sunshine233 阅读(681) 评论(0) 推荐(0)
es6 解构用法：对 object 和 array 解构
摘要：参考文档：《Understanding ECMAScript 6》《深入理解ES6》 https://book.douban.com/subject/26864806/ （英文版+中文版） 解构目的：为了使代码更简单、简洁 解构对象：object 和 array【注意】 针对对象和数组，使用语法不同 阅读全文
posted @ 2024-08-26 14:36 sunshine233 阅读(248) 评论(0) 推荐(0)
扩展运算符...+map+filter 在嵌套对象数组中的使用
摘要：参考文档： 使用基于嵌套值的数组过滤对象数组： https://segmentfault.com/q/1010000042989861 js 扩展运算符(...)的用法 ：https://www.cnblogs.com/caihongmin/p/16395573.html 对象的扩展运算符： htt 阅读全文
posted @ 2024-02-27 15:46 sunshine233 阅读(69) 评论(0) 推荐(0)
微信小程序 mqtt 连接中断原因
摘要：上周开发微信小程序时新加了一个页面，复用了以前页面的逻辑，但是今天发现新加的页面出现了很奇怪的问题： 进入新页面后，点一下查询再退出页面，mqtt连接正常； 进入新页面后，直接返回退出页面，mqtt连接中断。 WebSocket connection to "wss://www.xxxx.com/m 阅读全文
posted @ 2023-10-23 10:37 sunshine233 阅读(646) 评论(0) 推荐(0)
《重构》、《js高级程序设计》一些笔记知识点
摘要：《重构（第2版） : 改善既有代码的设计》 1. 函数命名:以它“做什么”来命名，而不是以它“怎么做”来命名。 一个改进函数名字的好方法：先写一句注释描述这个函数的用途，再把这句注释变成函数的名字； 2. 每当看见一段代码在同时处理两件不同的事，我就想把它拆分成各自独立的模块，因为这样到了需要修改的 阅读全文
posted @ 2022-12-05 10:50 sunshine233 阅读(62) 评论(0) 推荐(0)
Vue2中的 import 和 require区别与使用方法
摘要：import属于 ES6 规范，require 属于 CommonJS 规范。 一、export default & export + import 1、export default function() + import output.js export default function () { 阅读全文
posted @ 2022-11-11 15:32 sunshine233 阅读(3034) 评论(0) 推荐(0)
html中使用mqtt、clientId 使用随机字符
摘要：MQTT.js 是一个开源项目，支持 nodejs 和 Browser js ，这里对比一下 nodejs 和 Browser js 的用法：注：nodejs是运行在webserver的js，Browser js意思是运行在浏览器上的js，也就是H5用到的js注：目前项目方已经提供 CDN，不需要自 阅读全文
posted @ 2022-11-09 13:50 sunshine233 阅读(829) 评论(0) 推荐(0)
使用async、await实现axios请求网络时的同步执行代码
摘要：0. 新建js文件 demo.js（编译器：vscode） axios 的基础使用： 1. 引入 axios： const axios = require('axios'); 2. 测试用接口（来自黑马课程，查询到的是假数据）： var weatherList;//node.js不支持中文，直接写" 阅读全文
posted @ 2022-06-30 17:03 sunshine233 阅读(845) 评论(2) 推荐(0)
for,foreach,forin,forof用法和区别
摘要：demo.js var arrayList = [{ id: 1, name: "zs", scope: 56 }, { id: 2, name: "ls", scope: 86 }, { id: 3, name: "wu", scope: 22 }, { id: 4, name: "cl", sc 阅读全文
posted @ 2022-03-30 17:32 sunshine233 阅读(157) 评论(0) 推荐(0)
vue项目中使用axios请求网络
摘要：参考网址： [1] https://www.freesion.com/article/7191968296/ [2] http://www.axios-js.com/zh-cn/docs/ [3] https://github.com/axios/axios/blob/master/README.m 阅读全文
posted @ 2022-03-15 10:22 sunshine233 阅读(503) 评论(3) 推荐(0)
vue项目中实现上传图片识别二维码-jsQR
摘要：效果图： jsQR 是一个纯 JavaScript 二维码解析库。该库读取原始图像或者是摄像头，并将定位，提取和解析其中的任何QR码。（来源：https://www.oschina.net/p/jsqr?hmsr=aladdin1e1） 1、 安装jsQR ： npm install jsqr -- 阅读全文
posted @ 2021-12-28 14:54 sunshine233 阅读(3314) 评论(0) 推荐(0)
indexedDB 增删改查基本操作
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script sr 阅读全文
posted @ 2021-12-07 10:50 sunshine233 阅读(488) 评论(0) 推荐(0)
新建 indexedDB 数据库并插入数据
摘要：一、什么叫数据库 DB的全名是database，即数据库。 二、数据库的种类 数据库有两种类型，分别是关系型数据库和非关系型数据库。 关系型数据库：Oracle、DB2、MicrosoftSQLServer、MicrosoftAccess、MySQL等。 非关系型数据库：NoSql、Cloudant 阅读全文
posted @ 2021-12-06 11:52 sunshine233 阅读(1254) 评论(0) 推荐(0)
js 使用localStorage本地存储用户名、密码
摘要：效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> #check{ width: 15px; height: 15px; } </style> <body> 阅读全文
posted @ 2021-12-02 15:38 sunshine233 阅读(624) 评论(0) 推荐(0)
js 的本地存储 localStorage、sessionStorage
摘要：本地存储特性 数据存储在用户浏览器中 设置、读取方便，甚至页面刷新也不丢失数据 容量较大，sessionStorage 约5M，localStorage容量约20M 只能存储字符串，可以将对象JSON.stringify()编码后再存储 localStorage：关闭浏览器后数据仍然存在，直到手动删 阅读全文
posted @ 2021-12-02 14:27 sunshine233 阅读(1005) 评论(0) 推荐(0)
html中引入外部js文件，使用外部js文件里的方法
摘要：外部js文件1： /** * 加了window.onload 后，直接引入js文件即可 * 页面资源全部加载完毕后会自动调用window.onload里的回调函数 */ window.addEventListener("load",function(){ console.log("我是外部js te 阅读全文
posted @ 2021-12-02 10:15 sunshine233 阅读(7793) 评论(0) 推荐(1)
js 鼠标放到图片上放大某一部分效果
摘要：动图效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .container, img, . 阅读全文
posted @ 2021-12-01 13:52 sunshine233 阅读(356) 评论(0) 推荐(0)
js offset系列属性
摘要：offsetParent:返回该元素有定位的父级，如果父级都没有定位则返回body offsetTop:返回元素相对父级（带有定位的父级）上方的偏移 offsetLeft:返回元素相对父级（带有定位的父级）左边框的偏移 offsetWidth:返回自身的宽度，包括padding、border、内容区 阅读全文
posted @ 2021-12-01 09:25 sunshine233 阅读(433) 评论(0) 推荐(0)
js BOM操作
摘要：BOM：Browser Object Model, 浏览器对象模型。 window.onload 在html中，通常js代码要放在元素之下，否则会报错。比如在元素之前的script中给一个button绑定onclick事件，会报错：Uncaught TypeError: Cannot set pro 阅读全文
posted @ 2021-11-30 15:08 sunshine233 阅读(61) 评论(0) 推荐(0)
js DOM操作
摘要：DOM操作 获取元素： DOM传统获取元素有三种方式，getElementById、getElementsByTagName、getElementsByClassName。 <div class="box" id="timmer">box1</div> //下面三种方式均可获取到该元素 var ti 阅读全文
posted @ 2021-11-30 14:21 sunshine233 阅读(154) 评论(0) 推荐(0)

1