- 博客(34)
- 收藏
- 关注
RSS订阅原创 如何理解BFC（块级格式化上下文）
一、什么是BFC？BFC是(Block Formatting Context)块级格式化上下文,BFC是css布局的一个概念，是一个环境，创建了BFC的元素的子元素不会受外面其他元素的影响。二、如何创建BFC？html根元素默认会创建BFCoverflow:非visibledisplay:inline-blockposition: absolute/fixedfloat: 非nonedisplay: table-cell、flex、inline-flex三、开启BFC的作用1.解决使
2021-12-20 14:16:46
390
原创 观察者模式和发布订阅
观察者模式什么是观察者模式理解1：学生听到铃声后上课或下课 说明：学生（观察者）听到铃声（被观察者）做出相应的处理（上课/下课）理解2：房屋直租（租客与房东直接联系）老王->房东， 小明->找房人1号，小红->找房人2号老王现在的租客还有10天左右到期不想继续租他的房子，所以老王又要重新找租客，于是在小区公告栏贴上房屋出租消息（…联系人:小王15182*****）。刚毕业的小明小明和准备进城找工作的小红恰好看到了老王的房屋出租消息，于是两人分别给老王打电话告诉老王自己
2021-11-30 18:00:01
280
原创 使用vite创建vue3项目
安装Nodejs（版本>=12）全局安装vitenpm install -g create-vite-app创建vue项目yarn create @vitejs/app my-vue-name --template vue //yarn(本文使用yarn) 经过上面操作，vue项目基本框架完成，再根据以下命令安装依赖并运行即可备注：其他创建方式：不使用模板npm init @vitejs/app //或者yarn create @vitejs/app使用模板
2021-11-24 11:38:58
512
原创 js中Null判断运算符||和??的区别
||运算符：当某个属性或某个值为null、undefined、false、0、空字符串" "时，取||后面的默认值??运算符：当某个属性或某个值为null或undefined时，取??后面的默认值// 0,1分别代表关，开。默认值为1 开 let open=0 let open1 = open || 1 //1 let open2 = open ?? 1 //0 console.log(0||1) //1 console.log(.
2021-03-17 17:25:24
525
原创 css的预编译器less的使用
安装npm install -g less功能嵌套：模仿html的结构，使得代码更加简洁清晰变量：将常用的值定义为变量，使用@符号定义混合（mixins）:将一组属性集合在多处使用映射（map）html代码 <div class="lessBox"> <section class="top"> <div class="top_left">文字颜色top_left</div>
2021-02-18 17:07:01
117
原创 vue项目中基础组件全局注册
使用情景在项目开发过程中，通常把需要重复使用的组件放在components文件下作为公共组件。一般使用方式是，在需要使用的组件中引入公共组件，然后再注册、使用。这种方式，在公共组件使用较多的情况下显得比较繁琐。所以，为了提高开发效率，把components文件夹下面的这些公共组件直接注册为全局组件。在使用时无需引入注册，直接使用。使用方式：1.在src目录下创建lib/globals.js;2.在main.js中引入该文件// Globally register all base compo
2021-02-18 10:56:27
278
原创 超好用的链判断运算符——?.
链判断运算符作用在读取对象内部属性时，需要先判断对象是否存在，这时就会用到链判断运算符。 <script> const person={ body:{ user:{ name:"张三" } }, } // 传统方式 let name=person&&pers
2020-11-22 10:56:14
787
原创 JavaScript数组遍历方法大集合
1.forfor循环是最常用,也是最简单的遍历方法基本语法:for(let i=0; i<arr.length; i++){循环体}let arr=['张三','李四','王五'] for(let i=0; i<arr.length; i++){ console.log(arr[i]) }//将数组的长度保存下来,避免每次访问数组的长度(当数组元素比较多时,效果更明显)let arr=['张三','李四','王五']for(let i=0,len=
2020-09-15 21:34:49
330
原创 css3动画animation应用(弹跳小球)
效果一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>来回滚动</title> <style> * { m
2020-09-09 15:53:17
572
原创 css3渐变(文字颜色渐变),变形与过渡
背景颜色渐变background:linear-gradient(45deg,rgb(241, 227, 99) ,rgb(243, 160, 6), rgb(243, 121, 6))文字渐变色background:linear-gradient(45deg,rgb(238, 217, 32) , rgb(243, 6, 6),rgb(46, 243, 6),rgb(6, 148, 243)); -webkit-background-clip: text; color: transparent
2020-09-09 11:37:23
665
原创 H5本地存储与会话存储-希望清单
本地存储与会话存储介绍1.本地存储(localStorage)和会话存储(sessionStorage)是HTML5的Web存储提供的客户端存储技术.2.会话存储(sessionStorage),顾名思义"对话过程中的数据", 数据是存在会话过程,会话结束数据也就销毁. 会话存储的生命周期从一个页面打开开始,到这个页面关闭结束.会话存储中的主要方法:①添加会话:sessionStorage.setItem(key,val)②修改:sessionStorage.setItem(key,newVal)
2020-08-24 22:40:42
994
原创 模拟音乐播放时图片旋转效果(css3)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ .
2020-08-15 13:18:01
1473
3
原创 js原生VS jQuery实现分享到功能
HTML结构和css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
2020-08-13 13:21:29
261
原创 jq实现左右选项移动功能（穿梭框）
布局效果图功能描述1.点击——>按钮可以将左边选中的选项移动到右边2.点击<——按钮可以将右边选中的选项移动到左边3.点击===>按钮可以将左边的全部移动到右边4.点击===>按钮可以将右边的全部移动到左边5.双击选项可以将该选项移动到对面6.点击‘上’按钮可以将左边和右边选中的选项向上移动7.点击‘下’按钮可以将左边和右边选中的选项向下移动代码<!DOCTYPE html><html lang="en"><head>
2020-08-05 21:46:34
2368
原创 楼层滚动效果原来是这样实现的(使用jquery编写)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {
2020-08-05 17:01:47
405
原创 学了js你也可以写一个简单的抽奖功能试试手气
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> ul { width: 328px;
2020-08-05 15:39:45
157
原创 js如何实现倒计时功能?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="b
2020-08-05 15:01:41
198
原创 返回顶部功能(js原生与jq)
结构样式布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #rTop{
2020-08-05 12:04:59
84
原创 js如何实现选项卡功能
选项卡效果图HTML结构和css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-08-04 16:56:36
557
原创 javaScript-BOM浏览器对象模型
一.什么是BOMBOM(Browser Object Model)浏览器对象模型, BOM不是一个具体的对象,而是很多对象的集合, 通过对象中的属性和方法操作浏览器. 比如操作浏览器窗口的大小,地址栏,历史记录等.二.BOM中的对象有哪些1.window对象window对象是BOM中的顶层对象,也是脚本中的全局对象, 在调用window属性和方法时, 可以省略window前缀.window对象中的方法:① alert()弹出警告框<script> window.alert(
2020-07-18 22:17:00
147
原创 js-对象-判断上传的图片格式是否正确
一.笔记二.对象练习1.判断图片上传判断格式是否正确<script> /* 需求：判断图片上传格式是否是正确（JPG，png，gif） */ // 获取到的路径 let filePath = 'F:\prom\name\doc\img\01.jpg' // 获取最后一个点的位置 let index = filePath.lastIndexOf('.') console.log(index) // 截取最后一个文件后缀名 le
2020-07-17 16:40:50
637
原创 JavaScript数组-数组遍历与数组的内置方法
一.笔记二.练习1.定义数组的两种方式①new字符实例化数组②字面量实例化数组<script> /* 通过new字符实例化数组*/ let arr = new Array('英文','good',99) // 访问数组 console.log(arr) // 访问数组元素 console.log(arr[1]); console.log(arr[30]); //undefined,如果访问的索引值不存在，默认用undefin
2020-07-14 11:15:09
323
原创 JavaScript中函数的理解
一.笔记二.练习1.函数声明式和表达式的区别函数声明式可以在定义函数之前调用, 而函数表达式只能在函数定义之后调用.<script> /* 声明式 */ //函数声明式可以在定义之前调用 printSum() function printSum(){ let sum=1+2; console.log(sum) } printSum()// ==============================
2020-07-14 10:25:37
371
原创 JS流程控制语句-笔记整理
一.笔记二.分支结构例子<script> /* 优秀（>=90），良好（>=80）， 中等（>=70），及格（>=60）， 不及格（其他情况） */ // 注意:苛刻的条件放前面 let grade = prompt("请输入你的成绩",0) if(grade >= 90){ console.log("优秀") }else if(grade >= 80
2020-07-12 23:01:34
314
原创 实现元素垂直居中的几种方法
一、flex弹性布局方式 实现居中HTML结构 <div class="wrap"> <div class="content"></div> </div>CSS样式一 <style> .wrap{ width: 400px; height: 400px; background-color: beige; /* 实现垂直居中-flex */ display:
2020-06-27 11:56:10
136
原创 CSS3—2D转换transform属性的主要方法
一、2D转换能做什么？通过转换（transform），能对元素进行移动、缩放、转动、拉伸。也就是改变元素的形状、尺寸和位置。二、2D转换方法水平和垂直移动translate（x,y），水平移动translateX(n)，垂直移动translateY(n),通过translate()方法，可以根据给定的left和top位置，相对移动当前元素。例如：translate(50px,100...
2020-04-26 10:50:47
292
原创 三列布局（左右固定，中间自适应）四种方式
效果图一、flex弹性布局 <style> .container{ display: flex; } .left{ /* flex:0 0 100px; 不扩展、不收缩、固定宽度100px*/ height: 400px; back...
2020-04-24 23:12:03
3523
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人