自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

我爱学习的博客

学习前端

  • 博客(35)
  • 收藏
  • 关注

原创 h5图片上传

h5的图片上传组件,点击上传点弹出选择从相册上传或拍照上传,若当前项已有图片,点击X删除后可以重新上传。js代码,注释都写的很清楚。

2023-06-02 16:32:14 867 1

原创 h5页面悬浮框可以随意拖动,页面滚动时收起吸附到侧边

h5页面悬浮框可以随意拖动,页面滚动时收起吸附到侧边需求是: 用户可根据自己的需求对工具箱进行改变位置,移动范围为整个屏幕上下移动。在屏幕滚动时,工具箱组件贴边隐藏,滚动停止后,进行显示。用到uniapp的内置组件movable-view和扩展组件uni-transition思路: 写两个盒子,一个用来装滑块样式,另一个用来装收起时吸附到侧边的样式,定义一个变量isOpen来控制滑块和收起样式的展示,监听页面滚动事件,滚动时isOpen=false,停止滚动后isOpen=true

2023-05-30 18:19:42 995

原创 某个盒子滚动到不见时,另一个盒子固定在页面

当盒子B跟随页面滚动至看不到时,就把盒子A固定在页面的某个位置,使其不跟随页面的滚动而滚动。当页面滚动至盒子B的顶部出现时,盒子A还原到原位置。这是因为if为false的时候该元素就没有被创建,所以找不到对应的B盒子。可以使用v-show来解决。这个报错不会影响其他功能,只是控制台报红。监听页面滚动,实时获取盒子B距离浏览器顶部高度,高度小于等于0,则给盒子A赋一个fixed定位的class名,否则就不赋该class名。

2023-04-18 18:04:37 311

原创 H5端滚动到底部加载数据

h5 滚动到底部加载更多数据,滚动到底部懒加载

2023-02-14 16:31:31 814

原创 移动端h5使用elementui走马灯,手指左右滑动切换

环境: vue框架,h5端,elementUI组件。手指左右滑动可以切换轮播图。

2023-02-14 10:21:02 3168 3

原创 金额输入限制-只能输入数字,且只能输入两位小数

输入数字时正常输入,小数点后超过两位后就不能再输入,敲键盘无效;输入其他字符时也无效。只能输入不带小数或两位小数的数。html代码,用的elementUI的输入框组件举例。

2022-08-30 11:29:05 1132

原创 文字内容超出两行时显示省略号

文字内容超出两行时显示省略号<view class="newsTitle"> 这里是一条很长很长很长的内容</view>设置内容超出两行显示省略号的css样式如下:.newsTitle{ width: 536rpx; //设置宽度 font-size: 32rpx; font-weight: 700; line-height: 52rpx; text-align: left; color: #333333; overflow: hidden; text-

2022-05-05 14:43:38 6064

原创 搜索框封装-微信小程序

搜索框封装-移动端一个移动端项目中的搜索框基本都是一样的,所以开发时,封装一个符合风格的搜索框还是有必要的,使用时直接引用组件就可以。下边是我自己封装的搜索框代码,新建一个SearchFor.vue文件把代码粘贴进去。使用时引入该组件,在你的搜索框代码位置写<search-for @searchEvt="searchEvt"></search-for> searchEvt方法的argument中就是你当前页面输入的搜索值,自己写好搜索方法就行。我的项目是uni-app开发的

2022-04-27 10:27:56 310

原创 微信小程序自定义顶部导航栏封装

微信小程序自定义顶部导航栏封装先在page.json中找到要自定义导航栏的页面,给"style"设置属性"navigationStyle":“custom”,设置后默认的导航栏就没有,我们就可以自定义了。下面是我自己封装的一个导航栏,用的是uni-app。<template> <view class="pageHead"> <view class="headContent"> <uni-icons v-if="backIcon" class="ba

2022-04-27 10:13:02 493

原创 flex布局实现均分,最后一行左对齐

flex布局实现均分,最后一行左对齐原理就是在末尾添加一个伪元素,伪元素内容设为空,伪元素宽设置跟其他元素相同。html:css:

2022-04-13 17:52:23 756

原创 赋值、浅拷贝和深拷贝

赋值、浅拷贝和深拷贝  在普通数据类型中,将变量a的值赋值给变量b后,变量a、b是两个值相同但是独立的个体,他们值改变不会影响到对方。因为普通数据类型的值是存放在栈区域,执行b=a后,新开辟一个地址给b,然后把a的值复制到这个地址中,a本身没有受到任何影响。  在引用数据类型中就没有普通数据类型那么简单。1. 赋值引用数据类型的值存放在堆区域,它变量名称指向的是值所在堆区域的地址。当把对象obj赋值给obj2时,赋值的是地址,obj2指向的堆区域内容和obj是同一个。因此当我们修改obj2中的a属

2022-01-03 01:55:31 669

原创 js的变量声明(var、let、const的区别)

js的变量声明(var、let、const的区别)最常用JavaScript的变量声明的方式有var,和ES6新增的let和const。function也可以算做声明变量的方式,此外还有import,import * as 变量名 from ‘path’,这也算一种声明变量的方式。下面说一下var、let、const三个关键字的区别。1. varvar声明的变量具有变量提升的特性,js预解析机制会把var声明的变量提升到其所在作用域的顶部,但赋值不会提升,所以如果先调用了一个变量再用var来声明,会

2021-12-29 21:39:22 355

原创 ES6新特性

ES6新特性let和const箭头函数新增数组方法解构模板字符串展开运算符函数传参时默认值的写法对象字面量方式简化写法promiseasync await1、const和let与var的区别这三个关键字都是用来声明变量的。三者之间的区别:const声明的变量相当于一个常量,它不能进行二次赋值,声明时必须赋值,同一个变量名不能用const声明两次。let声明的变量具有块作用域,同一个变量名不能用let声明两次,会报错。var声明的变量是全局作用域和局部作用域,代码解析时会进行

2021-12-25 00:04:40 281

原创 vue父子组件之间的值传递

vue父子组件之间的值传递在同一级文件目录下,当前的组件叫父组件,引入的组件叫子组件。1.父组件向子组件传值关键字:props父组件通过子组件的标签绑定普通属性和数据,子组件通过关键字props来接收父组件传来的值,接收时要指定接收数据的数据类型type,类型第一个字母要大写,如Array、String、Number,如果该数据是必传的要设置required:true,如果不是必传就设置默认值 default。父组件代码:<template> <div>

2021-12-08 21:47:05 324

原创 Vue生命周期

Vue生命周期  一个组件从被创建出来到被销毁的过程称为一个生命周期。一个生命周期被分为四个阶段:创建、挂载、更新、销毁;每个阶段又分为之前和之后。【注意:生命周期方法在编写时切记不要使用箭头函数,会把this搞丢的】一、创建1.创建之前 beforeCreate创建之前就是虚拟dom创建之前,因为虚拟dom还未创建,所以我们在这里获取不到节点和值。创建之前在程序中基本没什么作用。beforeCreate() { console.log(this.value) console.lo

2021-12-07 21:39:47 419

原创 vue组件的render()方法

vue组件的render()方法   vue组件的render方法是模板字符串的替代方案,它接收了一个createElement方法作为第一个参数,用来创建<a href="#vnode">虚拟DOM</a>如果没有render函数, Vue 构造函数不会通过$mount或 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数

2021-12-03 21:06:42 2257

原创 vue的常用指令

vue的常用指令**1. v-text 【值绑定语法】**相当于真实dom的innerText属性,可以给标签设置内容,{{}}和它的作用是一样的。值绑定可以实现运算,但有限制,只能实现三目运算、&&、||等,最终要得到一个值。<p v-text="'文字描述'+data中要用到的属性"></p><!--也可以写为--><p>文字描述{{data中要用到的属性}}</p>2. v-model 是实现数据双向绑定的关键,常

2021-12-01 23:55:34 651

原创 javascript服务端编程

javascript服务端编程  服务端编程也就是后端编程,用来接收客户端请求、处理业务逻辑、响应数据。能够进行后端编程的语言有java、PHP、python等,javascript也能进行后端编程,提供给javascript进行后端编程的平台是nodejs。  nodejs是一个应用编程平台,能运行javascript语言编写的代码,提供了javascript的运行环境。nodejs是一个基于Google的V8引擎,V8引擎执行javascript的速度非常之快,性能很好。它提供了大量的应用编程接口

2021-10-25 20:20:56 1052

原创 javascript事件

事件由事件源、事件类型、事件处理函数组成。事件源就是触发谁的事件,事件类型是点击或移动等,如click,事件处理函数就是事件过程中做的一些事。事件对象event:一个事件被触发时会自动创建一个事件对象event,事件对象是用来描述事件信息的。获取事件对象存在兼容性问题,获取事件对象的兼容性写法如下:element.onclick = function(e){ e = e || window.event //ie低版本不支持e,所以用window.event}事件光标位置相对于浏览器窗口的位

2021-10-23 17:57:50 81

原创 区域随光标移动(鼠标事件)

<!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>Do

2021-10-14 17:40:38 176

原创 动态操作DOM节点

动态操作DOM节点节点属性动态操作DOM节点(1) 创建节点创建元素节点 document.createElement(‘标签名’),返回元素节点对象创建文本节点 document.createTextNode(‘文本内容’) 返回文本元素节点对象(2) 加入节点追加子节点 父节点.appendChild(子节点)向某个节点前插入节点 父节点.insertBefore(要插入的子节点,插入到哪个节点之前)(3) 删除节点父节点.removeChild(要移除的节点)也可以获

2021-10-11 23:57:19 237

原创 DOM文档对象模型

DOM文档对象模型  文档对象模型其实就是操作html标签的一些能力,比如我们可以获取、创建、添加或移除某个标签,也可以给元素绑定一些事件,获取元素的属性,给元素添加一些css样式等等。  DOM的和新对象是document,document对象是浏览器内置的一个对象,它有各种专门用来操作元素的方法。DOM实际上是页面中的标签,通过js获取到以后,就把这个对象叫做DOM对象。一、document获取html元素的方法:通过id名获取 document.getElementById('id’名)

2021-10-10 23:02:35 128

原创 浏览器对象模型BOM

BOM(Browser Object Model):浏览器对象模型。实际上就是一些操作浏览器的能力,我们可以获取一些浏览器的相关信息,例如浏览器窗口的大小;操作页面跳转;获取当前浏览器地址栏的信息;操作浏览器的滚动条等。BOM的核心就是window对象,window是浏览器内置的一个对象,里面包含着操作浏览器的方法,用window.方法名()调用方法,window.大多数情况下不写也能调用,但像close、open就必须要有window.才能生效。一、窗口对象(一)常用方法(二)定时器1.倒计时

2021-10-08 23:02:44 135

原创 javascript的字符串

一、字符串的常用方法1.charAt(索引号)  返回索引号对应的字符,作用与 字符串名[索引号] 相同,但 charAt(索引号) 是内置对象的方法,而 字符串名[索引号] 只是普通的字符串访问。var str='adgskl'str.charAt(0) //str[0] 一样,都能得到字符a2.indexOf(‘字符’)  indexOf可以找到对应子字符的下标,当要找的字符不存在时,返回-1。当子字符也是一个字符串而非单个字符时,返回的是子字符串第一个字符的下标。var str=

2021-09-29 23:26:02 78

原创 javascript数组(下)

javascript数组一、ES5数组遍历常用的方法  这些方法都使用了匿名函数,该匿名函数的参数都有三个item,index,arr。item是数组元素,index是数组下标,arr是数组本身,三个参数根据自身需要选取,使用多个参数时,顺序不能变,参数名称可以自己取。1.forEach  和 for 循环一个作用,就是用来遍历数组的var arr = [10,20,30]arr.firEach(function(item,index,arr){ //item是10,20...

2021-09-28 21:23:35 424

原创 javascript数组(上)

javascript数组– 数组基础数组 - javascript内置对象内置对象:有自己地属性和方法,我们可以直接调用。一、数组基础数组是存储有序数据地集合容器,如[10,‘hello’,true]就是一个数组,可见数组里的元素可以是任意类型。1.创建数组对象(1)字面量方式创建:     var arr = [10,20,30]       对象   数组对象(2)构造函数方式构建:     var arr = new Array()     arr[0] = 10 

2021-09-28 19:47:08 93

原创 内存结构图

内存结构图数据存储时,会随机分配到一块带有内存编号的内存区域基本数据类型变量存储在栈区域对象存储在堆区域现有如下一段代码,我们来分析它的储存结构<script> var number = 101 var jackObj = { number: 1001, name: 'jack', age: 22 } console.log(number) //1.打印101 console

2021-09-26 23:06:16 1135

原创 javascript-简单对象Object

javascript-简单对象Object  简单对象Object属于javascript中复杂数据类型的一种。javascript的复杂数据类型还有数组(Array)、字符串(String)、数学对象(Math)、日期时间(Date)、函数(Function)等。  简单对象Object是储存了一些基本数据类型的一个集合,形如:   {     number:10,     message:‘hello’,     sex:true

2021-09-26 22:43:18 270

原创 javascript函数(下)

javascript函数(下)一、变量的作用域概念:一个变量生效的范围,变量不是在所有地方都能访问,它能访问的范围就叫作用域。作用域分为全局作用域和局部作用域。1.全局作用域  任何地方都可访问的变量就是全局变量,它对应的区域就是全局作用域  (1)全局作用域是最大的作用域;  (2)全局作用域中定义的变量可以在任何地方使用;  (3)页面在浏览器中打开时,浏览器会自动给我们生成一个全局作用域window,该作用域要页面关闭才会销毁。2.局部作用域  局部作用域就是在去哪聚作用域下开辟出

2021-09-26 20:33:57 37

原创 javascript的函数(上)

javascript的函数(上)1.函数的概念:  封装具有特定功能的代码,需要用的时候进行调用。2.函数的优点:  (1)函数封装后,代码更加简洁;  (2)代码复用,在程序中有重复功能的时候,直接调用函数就可以了;  (3)任意时机都可以进行调用3.语法: 先定义一个函数:  function 函数名(){   //封装的代码  } 函数调用:  函数名()4.形参和实参(1)形参:函数定义的括号中的变量就叫形参。例如定义一个求两束之和的函数:   function s

2021-09-25 19:00:54 55

原创 javascript的循环语句

javascript的循环语句及案例程序的三种结构:顺序结构、选择结构、循环结构。循环结构的循环语句可以重复执行固定的代码,直到条件不成立为止。循环语句有三种写法:while、do-while、for一、while循环1.语法:  while(条件) { 循环体 }2.注意:  (1)循环条件要有初始值。  (2)循环体中要有改变循环条件的语句。【如果没有该语句,循环会无限次被执行】  (3)while语句是先判断条件是否满足,条件满足才执行循环体。3.例题:输出1-10的数字va

2021-09-23 20:55:47 676

原创 JavaScript的逻辑分支语句

JavaScript的逻辑分支语句js代码都是按照从上到下的顺序来执行的,逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码。一、if条件分支结构  1.if条件语句    语法: if(条件){要执行的代码}  2.if-else条件语句    语法: if(条件){要执行的代码}       else{执行代码}  3.if-else if条件语句    语法: if(条件){要执行的代码}       else if(条件){执行代码}例:判断两个数中较大的一个var

2021-09-22 20:36:32 107

原创 2020-12-11

虚拟机安装某个系统出现的问题:无法获得 VMCI 驱动程序的版本: 句柄无效。 驱动程序“vmci.sys”的版本不正确。解决方法:找到.vms文件(图中圈出来的是其路径)2. 打开.vms文件并找到vmci0.present = “TRUE”并将其改为:vmci0.present = “FALSE”;修改后Ctrl+S保存并关闭。3.点击开启此虚拟机,就没问题了...

2020-12-11 19:42:48 64

原创 2020-11-10

Mybatis入门学习工具:IntelliJ IDEA Community Edition 2019.2.3 x641.创建Maven出现的问题:(1)idea找不到jdk——解决:(确保电脑已经安装jdk后)将pom.xml文件中的<systemPath>${JAVA_HOME}/lib/tools.jar</systemPath>的${JAVA_HOME}/lib改为tools.jar文件的路径,如我的tools.jar在d盘的java文件夹中,就改为<syste

2020-11-10 22:26:41 107

原创 Linux安装go语言

Linux安装go语言用管理员身份运行cd~下载包:wget https://dl.google.com/go/go1.10.3.linux-amd64.tar.gz下载完成后运行:tar -C /usr/local -zxvf go1.10.3.linux-amd64.tar.gz接下来:vim /etc/profile配置环境,在最下边加上export GOROOT=/usr/local/goexport PATH=PATH:PATH:PATH:GOROOT/bin配置生效:

2020-09-20 15:00:25 235 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除