SoloTravelerHQ-CSDN博客

原创 JS实现键盘控制div全方位移动

JS实现键盘控制div全方位移动创建onkeydown的全局响应事件，给div设置加速度，并控制div开始移动。创建定时器控制div持续移动，这样可以防止div移动的卡顿现象。创建onkeyup的全局响应事件，控制div停止移动。div移动的卡顿现象是由于在按下键盘时，系统需要区分用户是否是持续输入，这个过程就会出现短暂的卡顿，用定时器可以巧妙的避免。完整代码：<style lang="css"> #box1{ width: 100px;

2022-01-13 14:49:37 802 2

原创 JS实现鼠标拖拽功能

JS实现鼠标拖拽功能创建鼠标点下的元素对象的响应事件函数（onmousedown）。计算鼠标位置和所点击元素偏移量的差值；如果不这样做，就会出现如下现象。即元素的左上角会直接定位在鼠标上。在onmousedown内创建鼠标移动的全局响应事件函数（onmousemove）。在onmousedown内创建鼠标松开的全局响应事件函数（onmouseup）。完整代码：注：必须给元素加上position属性<style lang="css"> #box1{ w

2022-01-10 13:07:35 1280

原创 JS与数组相关的12个方法

JS数组相关的方法文章目录JS数组相关的方法1、push()2、pop()3、unshift()4、shift()5、slice()6、splice()7、concat()8、join()9、reverse()10、sort()1、push()push()方法向数组的末尾添加新的元素，并返回新的数组长度，会改变原数组。var arr = [1, 2, 3];arr.push(4);console.log(arr);[1, 2, 3, 4]2、pop()pop()方法删除数组最末尾的元素

2021-12-26 20:24:54 308

原创 JS原型对象

JS原型对象我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是所谓的原型对象。而prototype属性会指向该函数原型对象。如果函数作为普通函数调用时，prototype没有什么用处；当函数作为构造函数调用时，这个构造函数所创建的对象都会有一个隐含的属性__proto__，该属性会指向该构造函数的原型函数，如图所示很容易看出，原型对象相当于一个公共区域，所有同一个类的实例都可以访问到这个对象。现在我们创建一个构造函数，该函数有如下属性和

2021-12-25 17:57:59 246

原创 js基础this的指向问题

js基础this的指向解析器在调用函数，每次都会向函数内部传递进一个隐含参数，这个参数就是this，this指向的是一个对象。这个对象我们称为上下文对象，根据函数的调用方式不同，this会指向不同的对象。主要有以下三种情况：1、以函数形式调用时，this指向windowfunction fun(){ console.log(this);}//this指向window对象fun();输出：2、以方法调用时，谁调用方法this就指向谁function fun(){ con

2021-12-25 15:15:50 451

原创 js变量在内存中的存储

js中的变量都是保存在栈内存中的对于基本数据类型（String、Number等）来说，值是直接保存在栈内存里的如下图：而对于引用数据类型（Object）来说，在new了一个对象后，就会在堆内存中创建一个空间，其在栈内存中的值是堆内存中该空间的地址值。如下图：所以在进行对象的增删改和比较时，要注意他们是不是一个地址值，即是不是同一个对象。如下图，虽然定义的两个对象设置的name值一模一样，但是他们的地址不一样，所以在比较obj == obj2 时返回的是false...

2021-11-19 17:13:34 1602

原创 js关系运算符及==和===的区别

js关系运算符非数值的比较//1、对于非数值比较时，会将其先转换为数值，再进行比较var a = 1 > "2";console.log(a);//a = falsevar a = "2" > 12;console.log(a);//a = falsevar a = "2" > 12;console.log(a);//a = false//2、如果符号两边都是字符串，则比较他们的Unicode编码var a = "a" > "b";//a的Unicode编码是97，

2021-11-18 22:20:35 275

原创 js非布尔值的“与”，“或”运算

js非布尔值的“与”，“或”运算1、非布尔值的“与”运算//非布尔值的与运算是短路的，即在判断第一个为false后，就不会再判断第二个var a = 123 && 0;console.log(a);//a = 123var a = 0 && 123;console.log(a);//a = 0；第一个为0，直接返回，不再判断123var a = NaN && 0;console.log(a);//a = NaN2、非布尔值的“或”运算//

2021-11-18 22:18:02 139

原创 js数据类型之间的转换

文章目录数据类型数据类型转换一、其他类型转Sting二、其他类型转Number三、其他类型转Boolean数据类型1、js中的数据类型有有种分别是：String、Number、Null、Undefined、Boolean、Object。2、其中String、Number、Null、Undefined、Boolean为基本数据类型，Object为引用数据类型3、Number包括整数和浮点数，其中Infiniti表示正无穷，NaN表示不是一个number，这两个也是Number类型。4、js中对

2021-11-18 12:25:36 479

原创 js标识符

标识符1、标识符中可以含有字母、数字、$、_2、标识符不能以数字开头3、标识符不能识js中的关键字和保留字4、标识符一般采用驼峰命名5、js底层保存标识符实际上是采用Unicode编码，所以理论上讲，所有的utf-8中国含有的内容都可作为标识符。...

2021-11-18 12:24:41 699

原创纯css实现旋转正方体

纯css实现旋转正方体思路：1、建一个父div作为正方体容器，在div里面建六个子div作为正方体六个面。2、创建关键帧，让父div旋转起来。效果：代码：<style> /* 设置正方体容器 */ .fu { margin: 150px auto; height: 200px; width: 200px; /* 设置3d转换效果 */ transform-style: preserve-3d; animation: cube

2021-11-10 15:30:10 644

原创纯CSS实现钟表

纯CSS实现钟表思路：1、先创建一个表盘div。2、再在表盘div里设置三个子div，分别作为秒针、分针、时针的旋转载体3、最后在三个子div里分别再设置一个div，作为秒针、分针、时针4、表盘可以用背景图片，也可以用css写，我这里直接百度了一张表盘的图片效果：图片：代码：<style> /* 表盘 */ .biao-pan { width: 300px; height: 300px; margin: 150px auto; bor

2021-11-09 17:09:20 1665 3

转载 JS将json数据导出为csv表格

JS将json数据导出为csv表格该方法只适合数据量不大的情况代码：function tableToExcel(){//要导出的json数据，数组格式var jsonData = [{name:'路人甲',phone:'123456789',email:'[email protected]'},{name:'炮灰乙',phone:'123456789',email:'[email protected]'},{name:'土匪丙',phone:'123456789',email:'0

2021-11-05 21:28:13 1063 3

转载 js格式化时间函数

js格式化时间函数函数出处已经无从追溯，作为收藏，方便以后用。函数：直接粘贴复制就可以用Date.prototype.format = function (format) { var date = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), "m+": this.getMinutes(), "s+": this.

2021-11-05 21:18:49 247

原创 VS Code npm run serve报错问题

VS Code npm run serve报错问题项目之前没有问题，不知怎么回事运行时就突然报错，百度上的方法是将node_modules这个文件夹删除，再重新安装就好了解决方案：1、先删除node_modules2、在当前项目文件下npm install运行成功...

2021-11-05 13:39:29 1490 3

原创子元素左右垂直居中

子元素左右垂直居中1、子元素设置了高度和宽度通过position设置子元素相对于父元素定位，然后将子元素的top、right、bottom、left设置成0再将margin设置成auto，就实现了左右垂直居中原理记住这个公式就行水平布局：margin-left + left + width + right + margin-right = 父元素宽度垂直：margin-top + top + height + bottom + margin-bottom = 父元素高度在子元素高度确定的情况下

2021-11-05 13:08:08 248

原创纯CSS实现图片动画

纯CSS实现图片动画1、先网上下载一张sprites动画图片，直接百度搜sprites图片就可。2、用css设置一个关键帧，确定好起始位置和终止位置，通过background-position调整背景图片在div框中显示的位置。图片可以用ps查看像素大小，便于定位起始位置和结束位置。3、通过animation: test 1s steps(3) infinite;设置动画效果test：关键帧的名称；1s：动画从开始到结束的时间steps(3)：步进式播放动画，简言之就是将图片分成了3块

2021-11-03 13:14:12 4258

原创 css实现过渡效果

css实现过渡效果主要是通过transition属性来设置。代码如下/* 设置下载app的二维码下拉效果 */.topbar .app .qr-code { width: 124px; /*将过渡元素的高度设置为0，元素内容设置隐藏*/ height: 0px; overflow: hidden; /*transition的第一个值监听高度的变化（其他css属性同样可以监听）第二值设置过渡时间*/ transition: height 1s; /*--------

2021-09-30 11:16:18 1245

原创纯css制作三角形

纯css制作三角形纯css制作三角形的原理是通过设置元素border的属性来达到的。我们先将一个div的border上下左右设置不同的颜色，可以看到border其实是一个梯形。div { width: 100px; height: 100px; border: 10px solid red; border-color: red orange blue yellow;}现在我们将div的宽度和高度设置成0，可以看到现在是四个小三角形div { width:

2021-09-26 20:58:31 216

原创字体图标的下载及使用

图标字体引用文章目录图标字体引用1、Font Awesome下载用法2、IconFont下载用法1、Font Awesome下载打开官网fontawesome我这里选择免费版点击下载下载解压后，将里面的css文件夹和webfonts文件夹移到项目中注：这两个文件夹必须在同一级目录再引入css文件夹里的all.css或all.min.css用法1、通过类名来使用字体图标，类名对应的图标可到官网或百度搜索<span class="fas fa-bell"></spa

2021-09-24 23:22:26 592

原创父元素高度塌陷问题的解决方案

父元素高度塌陷问题的解决方案在界面开发中，我们在布局的时候，很多情况下会给父元素的高度设置auto值，来自适应子元素高度。但是在子元素设置了浮动的情况下，就会出现父元素高度塌陷的问题。解决高度塌陷的方法有很多，但不同的方法多多少少都有一些副作用影响布局，现在介绍一种比较常用的副作用相对较少的解决方案。代码如下css代码//显示父元素.box1{ border: 10px red solid;}.box2{ width:100px; height:100px; ba

2021-09-23 18:59:29 774

原创盒子模型——margin

盒子模型——margin文章目录盒子模型——margin1、水平布局2、margin水平居中3、外边距重叠4、父子元素外边距重叠问题及解决方案1、水平布局margin在块状元素中设置时，上下左右都可设置，在设置margin-left,margin-top时，是移动当前盒子的位置。而设置margin-bottom时是移动下方盒子的位置。但是设置元素的margin-right时，是没有变化的。这主要是因为盒子的水平布局的总宽度是必须等于其父元素的总宽度。假设父元素的宽是800px，则子元素的margi

2021-09-22 22:46:58 1539

原创前端开发笔记

前端开发笔记文章目录前端开发笔记1、判断对象和数组是否为空2、js 分割字符串3、js 指定小数位数4、vue中使用input监听事件5、楼层跳转时，设置滚动条跳转距离6、vue添加监听和消除滚动条事件7、正则身份证验证8、vue中数组更新后，不能及时响应9、uniapp解决input设置高度后文字不垂直剧中10、uniapp文本输入限制为正整数11、uniapp用globalData定义全局变量1、判断对象和数组是否为空1.判断空对象let obj = {}Object.keys(obj).le

2021-07-18 23:33:28 503 3

huangqiang80的博客