- 博客(78)
- 问答 (1)
- 收藏
- 关注
原创 记一次空字符串判断的大坑
发现了问题,空字符串的布尔值应该是false,但是这个玩意儿是true。如图我肉眼看到的是 " " 于是我做了如下判断。发现他是个U+200b的不可见字符!我发现在往控制台粘贴数据时,是个红色的小点。把这个红色小点粘贴到vscode中。直接把它转为 '' ,再去判断就行了。结果竟然是false 我做了修改。
2023-08-29 10:16:08
265
1
原创 【一文带你cesium入门】
引言: Cesium是一个强大的JavaScript库,用于创建交互式的地理空间应用。它提供了丰富的功能和工具,使开发者能够构建令人惊叹的地球模型、地图可视化和地理数据分析。本文将带你逐步了解Cesium的基本概念和用法,并通过代码示例展示其强大的功能。
2023-05-17 16:04:20
1156
2
原创 webGIS 的几种技术路径以及区别对比
根据项目需求、学习曲线和社区支持等因素权衡利弊,选择最适合的JavaScript地图库,将帮助我们构建出强大、灵活且易于维护的WebGIS应用程序。OpenLayers提供了丰富的地图操作和分析功能,如地图视图的变换、空间查询和矢量绘制。Mapbox: Mapbox是一个基于矢量地图的平台,提供了一整套地图相关的工具和服务。功能和复杂性: Leaflet是一个轻量级的地图库,简单易用,适合构建小型到中型规模的应用。社区和生态系统: Leaflet拥有庞大的社区和插件生态系统,提供了丰富的资源和支持。
2023-05-17 15:41:15
1287
原创 【一文搞懂webGIS】
这些实现WebGIS的方式各有特点,适用于不同的应用场景。JavaScript地图库提供了简单易用的接口和灵活的可视化选项,适合快速搭建交互性强的WebGIS应用。WebGIS作为GIS的延伸和拓展,为我们提供了一个强大的工具,用于在互联网上共享、分析和可视化地理空间数据。通过使用WebGL库(如Three.js),可以加载和渲染复杂的地理空间数据,实现逼真的地球模型和交互性的地图效果。WebGIS是基于互联网的地理信息系统,通过使用Web技术和互联网的优势,使地理空间数据能够以在线方式被广泛访问和利用。
2023-05-17 15:35:34
1093
原创 环形加载动画
提示:以下是本篇文章的代码内容,供大家参考,相互学习使用通配符选择器来设置全局样式,这里用来取消页面内外边距(margin和padding)。使用函数来设置渐变背景,可以设置渐变方向和颜色。使用弹性布局(flexbox)来使元素水平垂直居中,可以通过和以及来实现。使用绝对定位()和相对定位()来控制元素的位置。使用属性设置圆角,可以使用百分比值来创建不同的圆角效果。使用box-sizing属性来设置盒模型的大小,可以设置为border-box或,这里设置为border-box。使用。
2023-05-04 16:12:25
284
原创 文字流光效果
提示:以下是本篇文章的代码内容,供大家参考,相互学习通用选择器 * 重置了所有 HTML 元素的内外边距为 0。flexbox 实现了水平、垂直居中布局。设置了渐变背景,其中使用了线性渐变、八个颜色值以及 to right 表示从左到右渐变。::after 伪元素为 h1 元素添加了一个 helloworld 文本。text-transform 属性将文本转换为大写。position:relative 属性为 h1 元素创建了相对定位,为 ::after 伪元素的绝对定位提供依据。
2023-05-04 16:07:44
2188
原创 鼠标悬停发光按钮,流转边框
提示:以下是本篇文章的代码内容,供大家参考,相互学习使用“*”通配符选择器取消页面元素的内外边距。使用flex布局实现容器内的水平、垂直居中,让子元素垂直排列。使用vw和vh单位设置容器的宽和高为100%。使用径向渐变实现容器的背景效果。使用相对定位和伪元素实现按钮边框效果。使用filter中的hue-rotate属性实现按钮颜色的变化效果。使用calc()和var()函数实现不同按钮颜色的计算。使用:hover伪类实现按钮鼠标悬浮时的效果。
2023-04-21 16:08:17
867
原创 粘性小球动画效果
提示:以下是本篇文章的代码内容,供大家参考,相互学习重置默认的 margin 和 padding让页面主体元素 body 垂直居中,并设置了渐变背景色.effect 元素,设置了它的样式,包括大小、位置、圆角和背景色,并使用了 filter 属性设置了对比度效果创建两个小球 .bigball 和 .smallball,使用了绝对定位,居中位置并且设置了圆角和模糊度效果ball 动画,设置了 7 个关键帧,控制小球的位置和大小。
2023-04-21 16:03:44
372
原创 炫彩爱心加载特效
提示:以下是本篇文章的代码内容,供大家参考,相互学习CSS盒模型:CSS盒模型是指用于布局Web页面的基本模型,它将元素视为一个矩形盒子,包括内容区域、内边距、边框和外边距。在该代码中,使用了盒模型的属性width、height、border-radius和position。弹性布局:弹性布局(Flexbox)是CSS3中的一种新的布局方式,它使得元素的排列更加简单和灵活。在该代码中,使用了display: flex属性和align-items、justify-content属性来实现水平和垂直居中。
2023-04-14 14:38:11
233
1
原创 【全屏导航栏菜单】
提示:以下是本篇文章的代码内容,供大家参考,相互学习box-sizing 属性用于调整元素的盒模型。将其设置为 border-box 可以将 padding 和 border 包含在元素的总宽度和高度内。Flexbox 用于将元素水平和垂直居中在屏幕中央。flex 容器(.con)具有 display: flex、flex-direction: column、justify-content: center 和 align-items: center 属性。
2023-04-14 14:28:53
691
原创 css实现流光按钮
实现效果如下图:鼠标悬浮,按钮开始变化流光展示炫酷效果提示:以下是本篇文章的代码内容,供大家参考,相互学习设置元素不响应元素,看得见摸不着,pointer-events 属性定义元素是否对指针事件做出反应。可选:auto:默认值。元素对指针事件做出反应,比如 :hover 和 click。none:元素不对指针事件做出反应。initial:将此属性设置为其默认值。inherit:从其父元素继承此属性。input:focus 选择器:选择已被选中的input。
2023-04-11 13:44:05
1226
原创 【旋转菜单】
效果展示如下图:提示:以下是本篇文章的代码内容,供大家参考,相互学习CSS选择器:包括通配符选择器、标签选择器、类选择器、伪类选择器、子元素选择器、相邻兄弟选择器等。CSS盒模型:包括内容框、内边距、边框和外边距。CSS3过渡效果:包括transition属性、transform属性、transform-origin属性等。CSS3动画效果:包括@keyframes关键字、animation属性、animation-timing-function属性等。
2023-04-11 13:39:02
758
原创 【导航栏弹性动画】
本期文字需要实现的效果图提示:以下是本篇文章的代码内容,供大家参考,相互学习弹性盒子布局 水平垂直居中 文字居中渐变背景 自左向右。添加动画过渡 贝塞尔曲线一般兄弟选择器,p ~ span匹配同一父元素下,元素后的所有元素。
2023-04-11 13:26:56
279
原创 css backdrop-filter和border-radius的坑
backdrop-filter是css中毛玻璃效果的属性,但是当他和position:fixed一起使用的时候,会改变css固定定位的相对位置点,固定定位原本是相对于浏览器左上角0,0border-radius和transform-translate使用的时候很离谱,要保证宽高为偶数而且不能为百分比,否则会导致字体渲染模糊
2022-12-29 10:18:02
1204
原创 Eslint +Vue配置
完成之后会在项目根目录生成.eslint.js文件// eslintrc.jsmodule.exports = { env: { browser: true, es2021: true, }, extends: [ "@vue/prettier", "plugin:vue/vue3-essential", "eslint:recommended", "airb
2022-05-13 20:49:06
1259
原创 一分钟搞懂WebWorker
Worker我们知道JavaScript是一门单线程的语言,那么如果我们有一些计算特别耗时,想要放到另外一个线程去做,worker应运而生worker就是一个独立于JavaScript线程之外的另外一个线程,可能理解为JavaScript实现多线程的方式worker的使用第一步判断浏览器是否支持worker,typeof (Worker) !== “undefined”通过new Worker()构造方法创建一个worker线程,返回一个实例用于发送和接收数据onmessage() 方法监听
2022-05-11 16:22:08
3548
原创 一分钟搞懂js事件循环
宏任务与微任务:异步任务分为 宏任务(macrotask) 与 微任务 (microtask),不同的API注册的任务会依次进入自身对应的队列中,然后等待 Event Loop 将它们依次压入执行栈中执行。宏任务(macrotask):script(整体代码)、setTimeout、setInterval、UI 渲染、 I/O、postMessage、 MessageChannel、setImmediate(Node.js 环境) 微任务(microtask):Promise、...
2022-05-11 16:09:14
534
原创 git 常用命令大全
配置和创建版本库查看配置: git config --list配置/修改用户名:git config --global user.name "name"配置/修改邮箱:git config --global user.email "email"检出仓库:git clone git://github.com/jquery/jquery.git查看远程仓库:git remote -v添加远程仓库:git remote add [name] [url] //nam...
2022-05-10 14:25:45
192
空空如也
ue组件传参子组件收不到
2021-12-30
TA创建的收藏夹 TA关注的收藏夹
TA关注的人