![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
文章平均质量分 56
我胖虎不答应!!
工作、学习、记录、进步
展开
-
关于通过JS操作Vue组件库的输入框的值,输入框的值不改变问题
在开发使用Vue组件库(如Element UI、Vuetify或Ant Design Vue)时,我们经常需要通过JavaScript直接操作输入框的值。然而,仅仅设置输入框的value属性往往不足以通知Vue更新其数据模型。本文将探讨如何正确地通过JavaScript更新Vue组件库中输入框的值。原创 2024-05-31 11:48:52 · 510 阅读 · 0 评论 -
ThreeJs中场景(scene)、 相机(camera)、渲染器(renderer)等方法类使用
ThreeJs,是一个基于原生WebGL,轻量级,跨平台的Javascript库,可以在浏览器上结合HTML5的canvas,SVG或者WebGL,创建和展示3D模型和动画。允许我们在不依赖任何浏览器插件的情况下,创建一个GPU加速的3D动画场景,这可能得益于WebGL的出现,因为WebGL的底层实现是基于OpenGL。原创 2023-10-10 09:15:49 · 8405 阅读 · 0 评论 -
了解JS三种实时通信方式——Eventsource、websocket与socket.io之间的差异和优缺点
它是 WebSockets 的替代方案,因为它比 WebSockets 更简单,更适合处理服务器向客户端发送数据的情况。是一种在单个 TCP 连接上提供全双工通信的协议,它使得客户端和服务器之间进行实时交互变得更加容易。它是一种标准化的通信协议,客户端和服务器都可以通过它发送消息。和其他实时通信协议,并提供了一组易于使用的 API。它既可以在客户端上使用,也可以在服务器端上使用,它还提供了许多高级功能,例如自动重连、心跳机制和房间等概念。,只有服务器能够发送消息,所以它更安全。原创 2023-05-29 16:45:23 · 9885 阅读 · 0 评论 -
input文件上传根据请求头判断文件类型
javascript文件上传根据请求头判断文件类型。原创 2023-05-05 13:55:38 · 480 阅读 · 0 评论 -
openlayers浅入(了解框架逻辑以及简单使用)
项目需求,使用openlayer替换天地图api开发,记录openlayer的学习原创 2023-01-13 13:49:42 · 4440 阅读 · 0 评论 -
vue3打包部署后,报错解决记录。访问页面index.html空白、页面刷新后nginx404问题
项目情况:使用的createWebHistory创建history达到访问路径不带#的效果,但是发现项目没有配置nginx转发,在vue-router文档中,配合createWebHistory使用需要nginx配置转发到index.html。在webpack配置中(vue.config.js)配置chunks时通过加入[‘chunk-vendors’, ‘chunk-common’]参数来解决预加载问题,如下。提示使用链接预加载的,但在窗口加载事件后的几秒钟内没有使用。值,并且是故意预装的。原创 2022-09-29 11:24:20 · 5308 阅读 · 0 评论 -
优化 cesium 界面广告牌(billboard)数据量大于 10w +时,地图加载缓慢、卡顿、加载完成后浏览器严重卡顿甚至崩溃问题
项目之前的设计,billboard 广告牌是绑在 entityCollection 集合下的,为了能够在获取单个实体(entity)时能够获取更多数据信息(entity 能够注入除了它本身的属性之外的属性信息)entityCollection 集合加上集群聚合功能,数据量临界点在 3w~4w 左右,就会出现界面卡顿。fps 低于 20 并且波动很大,延迟保持在 100ms 左右。数据量低于临界点时,entity 的方式呈现页面还是比较奈斯的。原创 2022-09-19 09:44:52 · 15887 阅读 · 16 评论 -
javascript 学习并梳理正则表达式姿势之字符串匹配( 一)
javascript 学习并梳理正则表达式知识,正则表达式之字符串匹配相关记录,字符串匹配相关案例分析原创 2022-06-29 18:51:20 · 1666 阅读 · 1 评论 -
javascript实现页面目录功能锚点跳转的姿势(操作页面元素滚动、以及监听滚动)记录
javascript实现页面目录功能锚点跳转知识点总结假dom A是滚动条的盒子, B是A的子元素,实现B滚动到A可视范围的顶部的方法(仅记录我是用的两种方法)1、scrollTo方法通过A(滚动条的盒子)的scrollTo方法,设置top为B的offsetTop属性值scrollTo:Element(滚动条的盒子) 的scrollTo() 方法可以使界面滚动到给定元素的指定坐标位置 A.scrollTo({ top: B.offsetTop, behavior: 'sm原创 2022-04-18 18:31:07 · 1882 阅读 · 0 评论 -
leetcode随机刷题系列—— 整数反转
闲时leetcode随机刷题系列——整数反转文章目录闲时leetcode随机刷题系列——整数反转一、题目描述二、题目分析三、解题代码一、题目描述leetcode 7. 整数反转给你一个 32 位的有符号整数 x ,返回将 x 中的数字部分反转后的结果。如果反转后整数超过 32 位的有符号整数的范围 [−2^31, 2^31 − 1] ,就返回 0。假设环境不允许存储 64 位整数(有符号或无符号)。示例 1:输入:x = 123输出:321示例 2:输入:x = -123输出:原创 2022-03-21 10:56:45 · 213 阅读 · 0 评论 -
leetcode随机刷题系列——Z 字形变换
闲时leetcode随机刷题系列——Z 字形变换文章目录闲时leetcode随机刷题系列——Z 字形变换一、题目描述二、题目分析三、解题代码一、题目描述leetcode 6.z字型变换将一个给定字符串 s 根据给定的行数 numRows ,以从上往下、从左到右进行 Z 字形排列。比如输入字符串为 “PAYPALISHIRING” 行数为 3 时,排列如下:P A H NA P L S I I GY I R之后,你的输出需要从左往右逐行读取,产生出一个新的字符串,比原创 2022-03-18 17:47:11 · 232 阅读 · 0 评论 -
SmtpJS 几行代码实现javascript发送邮件(记录)
SmtpJS前言一、SmtpJS是什么?二、使用准备发送邮箱(From 发件人邮箱)导入SmtpJs使用容易出错保护措施解决获取SecureToken时报错bootbox is not defined附上各邮箱的端口及smtp发送服务器地址前言在不考虑安全性的前提下,不通过后台手段使用javascript直接实现发送邮件的功能一、SmtpJS是什么?SmtpJS是一款通过javascript代码发送邮件的插件,导入插件后,只需简单几行代码就能实现邮件发送功能SmtpJS官网二、使用准备发送原创 2022-03-18 14:13:47 · 3264 阅读 · 8 评论 -
掉入parseInt二进制转十进制丢失精度问题 (BigInt数据类型记录)
翻车现场leetcode 1404.将二进制表示减到1的步骤数给你一个以二进制形式表示的数字 s 。请你返回按下述规则将其减少到 1 所需要的步骤数:如果当前数字为偶数,则将其除以 2 。如果当前数字为奇数,则将其加上 1 。题目保证你总是可以按上述规则将测试用例变为 1 。示例 1:输入:s = “1101”输出:6解释:“1101” 表示十进制数 13 。Step 1) 13 是奇数,加 1 得到 14Step 2) 14 是偶数,除 2 得到 7Step 3) 7 是奇数,原创 2022-03-17 16:08:33 · 1326 阅读 · 0 评论 -
javascript浅谈原型与原型链
讲述javascript构造函数、原型 、实例与原型链之间原创 2022-03-14 15:41:37 · 1249 阅读 · 0 评论 -
element-ui下拉框数据过多,导致页面卡顿崩溃问题优化
解决element 下拉选择数据量大时,导致页面卡顿甚至崩溃问题原创 2021-12-09 10:08:42 · 10219 阅读 · 4 评论 -
vue 中echarts 引入bmap 无法获取coordinateSystem的type属性
HeatmapView.js初始化时报错 Cannot read property ‘type’ of undefined问题描述:使用echarts进行绘制百度地图,但无法正常运行,报错是无法获取coordinateSystem的type属性如下错误,可是相同代码在echart的实例网站上可以运行报错行…\node_modules\echarts\lib\chart\heatmap\HeatmapView.js中 var coordSys = seriesModel.coordinate原创 2021-12-02 19:29:03 · 3416 阅读 · 0 评论 -
Cesium 加载在线天地图瓦片和离线瓦片功能(cesium开发记录)
Cesium 加载在线天地图瓦片功能1、未联网状态加载默认本地底图,保证地球有底图显示let viewer = new Cesium.Viewer('cesiumContainer', { // 未联网状态下 默认显示球面地图 imageryProvider: new Cesium.TileMapServiceImageryProvider({ url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')原创 2021-11-25 16:01:11 · 6703 阅读 · 3 评论 -
Vue + Cesium项目中造成cesium界面卡顿问题的罪魁祸首
Vue + Cesium项目中造成cesium界面卡顿问题的罪魁祸首(优化记录)千万不要将cesium里的对象如下图entity,保存在vue的data结构树中!!!千万不要将cesium里的对象如下图entity,保存在vue的data结构树中!!!千万不要将cesium里的对象如下图entity,保存在vue的data结构树中!!!一般在cesium注册的事件中处理业务逻辑时会出现这种情况这种数据保存在vue中属实很愚蠢!!!...原创 2021-11-24 16:57:03 · 7239 阅读 · 10 评论 -
前端处理文件流(blob方式)下载文件
前端处理文件流(blob方式)下载文件// 处理文件流 exportDocment(data, title) { //data 文件流、title 导出名 let a = document.createElement('a'); a.download = title; a.style.display = 'none'; let blob = new Blob([data],{ty转载 2021-10-29 15:59:52 · 1275 阅读 · 0 评论 -
cesium 根据SampledPositionProperty与timeline实现轨迹回放功能(跟随视角、上帝视角) 详细代码与理解记录
cesium 根据SampledPositionProperty与timeline实现轨迹回放功能(跟随视角、上帝视角) 详细代码与理解,文末附完整代码最终类似效果展示大致原理摘要 引用出处这个主要是用entity的orientation方向属性实现的,问题就在于怎么获取到实时的四元素,我们知道VelocityOrientationProperty这个是根据当前位置实时计算方向的,但是这个方向在转角时是瞬间转的,达不到均匀的转动效果,所以我们需要两个插值模型SampledPositionProper原创 2021-10-09 18:17:09 · 13232 阅读 · 41 评论 -
cesium 世界坐标与经纬度转换,四元素与方位角转换
参考文档与技术博客记录cesium api文档1、世界坐标与经纬度相互转换(参考技术博客)// 世界坐标转经纬度let cartesian3=new Cesium.cartesian3('经度','纬度','高度');let ellipsoid = viewer.scene.globe.ellipsoidlet cartographic = ellipsoid.cartesianToCartographic(cartesian3);let lat = Cesium.Math.toDegrees原创 2021-10-09 17:25:13 · 3067 阅读 · 0 评论 -
vue + echarts(line)大数据重写区域缩放代码记录与处理大量数据时页面卡顿情况echarts属性优化记录
vue + echarts大数据重写区域缩放代码记录与处理大量数据时页面卡顿情况echarts属性优化记录1、重写区域缩放代码svg标签<svg :width="svgw" height="555" :style="svgStyle" version="1.1"> <rect width="100%" height="100%" style="fill:gray;opacity:0.3;stroke-width:0;stroke:rgb(0,0,0)" /&g原创 2021-09-28 11:17:10 · 861 阅读 · 0 评论 -
javascript判断H5页面是微信端打开或安卓手机、苹果手机打开(记录)
javascript判断是H5页面是微信端打开或安卓手机、苹果手机打开的方法参考原文let ua = navigator.userAgent;let isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Linux") > -1;let isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端let isWeixin = ua.indexOf("MicroMesseng原创 2021-09-17 11:08:35 · 818 阅读 · 0 评论 -
cesium SceneModePicker工具切换哥伦布视图 2D 3D时摄像机定位指定位置
cesium SceneModePicker工具切换哥伦布视图 2D 3D时摄像机定位指定位置1.设置动画延时viewer.sceneModePicker.viewModel.duration = 0;Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.1; // 摄像机到地图的距离放大倍数viewer.c原创 2021-09-07 18:24:38 · 2085 阅读 · 0 评论 -
vue 解决跨域时报错 Cannot read property ‘split‘ of null
vue 解决跨域时报错 Cannot read property ‘split’ of null具体错误TypeError: Cannot read property 'split' of null at required (C:\Users\杨韬锦\Desktop\cdwx-spring-cloud\beam-model-web\node_modules\requires-port\index.js:13:23) at Object.common.setupOutgoing (C:\U原创 2021-08-20 09:50:35 · 10519 阅读 · 4 评论 -
javascript blob与base64互转(转载记录)
javascript blob与base64互转(转载记录)/** * base64 to blob二进制 */ function dataURItoBlob(dataURI) { var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型 var byteString = atob(dataURI.split(',')[1]); //base64转载 2021-08-16 15:14:17 · 3337 阅读 · 4 评论 -
javascript制作gif动图----gif.js
Javascript制作gif动图gif.js 官网软件简介 出自开源软件gif.js 是一个可直接在浏览器上运行的 JavaScript GIF 编码器。支持的浏览器包括:Google ChromeFirefox 17Safari 6Internet Explorer 10Mobile Safari iOS 6使用方法:var gif = new GIF({workers: 2,quality: 10});// add an image elementgif.addFr原创 2021-08-16 15:07:27 · 5623 阅读 · 11 评论 -
libgif.js javascript拆分gif动图并导出保存为json格式文件(记录纯代码)
libgif.js接上文Cesium添加GIF图 libgif.js+Cesium.CallbackProperty扩展libgif.js的使用let gifimg = document.getElementById('one')// gif动图 domlet superGif = new SuperGif({ gif: gifimg});let is = falsesuperGif.load(function () { let arr = [] // let material =原创 2021-08-16 14:54:09 · 1966 阅读 · 0 评论 -
Cesium添加GIF图 libgif.js+Cesium.CallbackProperty
Cesium添加GIF图cesium是canvas画出来的界面,如果直接写入gif图的话,cesium只会识别到一帧的动图并显示一帧的的画面通过libgif.js加上cesium实现动画的Cesium.CallbackProperty来实现gif在cesium中动态展示效果1.libgif.js(libgif项目地址--------------------或github仓库)使用目的:通过libgif工具js将gif图拆解成一帧一帧的图片2.Cesium.CallbackPropertyC原创 2021-08-16 14:38:17 · 1551 阅读 · 5 评论 -
vue利用directives 输入框el-input添加自定义指令限制只能输入数字
vue+element 输入框el-input添加自定义指令限制只能输入数字import Vue from 'vue';// 限制input框只能输入数字Vue.directive('inputNumber', function (el, binding, vnode, oldVnode) { let _v = eval(`vnode.context.${vnode.data.model.expression}`) if (!_v) return if (isNaN(Num原创 2021-08-05 19:13:39 · 933 阅读 · 0 评论 -
h5移动端 rem适配 设置根元素字体大小的js方法
h5移动端 rem适配 设置根元素字体大小scale 的值表示px与rem之间的比例,例如 scale = 10 时 1rem = 10px 、scale = 100 时 1rem = 100px!function (window) { console.log(414) /* 设计图文档宽度 */ var scale = 10 var docWidth = 414; var doc = window.document, docEl = doc.documentElement,原创 2021-07-30 15:26:51 · 1076 阅读 · 0 评论 -
javascript 请求时需要将对象转为formdata格式传参
将对象转为formdata格式传参function objectToFormData(obj) { let formData = new FormData(); Object.keys(obj).forEach((key) => { if (obj[key] instanceof Array) { obj[key].forEach((item) => { formData.append(key, item); });原创 2021-06-25 17:35:33 · 1647 阅读 · 0 评论 -
又遇 if(a==1且a==2且a==3),有没有可能为true?----前端开发javascript
一.利用不同数据类型之间的比较时隐式转换 (对象类型转换)例一var a = { i:1, valueOf:function(){ // toString效果一样 return a.i++; }}console.log(a==1,a==2,a==3)// true true true原理:复杂数据类型([],{})在与number进行运算时 隐式转换会先转成String,然后再转成Number运算。如:[].valueOf().toString() =原创 2021-06-03 16:16:14 · 301 阅读 · 0 评论 -
javascript 实现一个定时遍历数组,每隔一段相同的时间取出数组中的一项进行操作
javascript 实现一个定时遍历数组的方法,每隔一段相同的时间取出数组中的一项进行操作如果使用频繁建议 可以利用原型链,方法挂在在Array的prototype上面setTimeInLoop方法Array.prototype.setTimeInLoop= function(fn, time) { let _self = this, timer = null, index = 0; function setTimeGetValue(i) {原创 2021-04-09 17:41:41 · 5416 阅读 · 1 评论 -
javascript 时间与时间戳之间的转换
date相关方法Date() 返回当日的日期和时间。getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。getMonth() 从 Date 对象返回月份 (0 ~ 11)。getFullYear() 从 Date 对象以四位数字返回年份。getYear() 请使用 getFullYear() 方法代替。getHours() 返回 Date 对象的小时 (0 ~ 23)。getMinutes()原创 2021-04-06 11:50:24 · 266 阅读 · 0 评论 -
npm 依赖与开发依赖 (--save-dev、-D)
转载至node教程当使用 npm install 安装 npm 软件包时,是将其安装为依赖项。该软件包会被自动地列出在 package.json 文件中的 dependencies 列表下(在 npm 5 之前:必须手动指定 --save)。当添加了 -D 或 --save-dev 标志时,则会将其安装为开发依赖项(会被添加到 devDependencies 列表)。开发依赖是仅用于开发的程序包,在生产环境中并不需要。 例如测试的软件包、webpack 或 Babel。当投入生产环境时,如果输原创 2021-02-23 15:24:25 · 1580 阅读 · 0 评论 -
javascript 前端面试之隐式转换 js隐式转换
注复杂数据类型([],{})在隐式转换时会先转成String,然后再转成Number运算基本类型隐式转换无特殊0、-0、NaN、’’、null、undefined、document.all在Boolean转换为false值,其余任何值都会被转换为true1、转String类型+(字符串连接符)一方为string类型则直接进行字符串拼接,优先级高于number//+(字符串连接符)console.log(1+'abc') // '1abc'console.log(true + 'abc').原创 2021-02-22 17:31:43 · 302 阅读 · 0 评论 -
Vue VueX状态管理库
Vuex 状态管理Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex5大核心state、Getters、Mutations、Actions、Modules#mermaid-svg-TN2ZEKIIkJMbNiYp .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-famil原创 2021-01-26 14:45:53 · 174 阅读 · 0 评论 -
JS try catch throw finally (记录1)
JS 的try catch运用记录try 测试代码块中的错误。catch 处理错误。throw 创建自定义错误。finally 在 try 和 catch 之后,无论结果如何,始终执行在回答csdn问题是,用到forEach循环,需要在满足条件是结束循环。当时不想换写法了,就去找了一下,果真有嘻嘻嘻嘻try catch 抛出异常throw 打断forEachlet arr = [1,2,3,4,5,6]arr.forEach(item=>{ try{ console.log原创 2020-12-09 17:03:47 · 178 阅读 · 0 评论