- 博客(26)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 获取url中的参数方法
//方式一：js获取url参数值方法functiongetUrlQuery(urlPath){leturl=urlPathif(urlPath.indexOf('?')!==-1){letarr=url.replace('?',',').split(',')queryArr=arr[1].replace(/\&/g,',').split(',')varqueryObj={}for(letindex...
2021-04-16 10:47:02
834
原创 VS code 常用代码片段整理
{ // ---------------------------js "scr": { "prefix": "scr", "body": [ "<script type=\"text/javascript\" >", "$0", "</script>" ], "description": "<script type=\"text/javascript\"></script>" },
2021-03-30 16:31:35
1524
原创 vue 实现列表的搜索匹配和排序操作
vue 实现列表的搜索匹配和排序操作布局：<div id="app"> <input type="text" placeholder="请输入搜索词" v-model="serachName"> <ul> <li v-for="(person) in personsFilter"> {{person.id}} -- {{person.name}} -- {{person.age}} </li&g
2021-02-25 15:22:01
762
原创 Object.defineProperty理解
html<div id="app"> <span>firstName:</span> <input type="text" id="firstName" value="" /><br /> <span>lastName:</span> <input type="text" id="lastName" value="" /><br /> <!-- <
2021-02-24 15:54:07
76
原创 vue 计算属性和监视属性都可实现要实现名字中全名、名、姓同步修改
vue 计算属性和监视属性都可实现要实现名字中全名、名、姓同步修改例：要实现名字中全名、名、姓同步修改一.结构<div id="app"> <span>firstName:</span> <input type="text" v-model="firstName" /><br /> <span>lastName:</span> <input type="text" v-model=
2021-02-24 15:48:54
570
原创 BFC整理
概念：块级格式化上下文，他是一个独立的渲染区域，这个区域和外部毫不相干布局规则：内部的盒子会在垂直方向，一个接着一个放置 BFC的区域不会与float盒子重叠 内部的盒子垂直方向的距离有margin决定，属于同一个BFC的相邻盒子的margin会发生重叠 计算BFC的高度时，浮动元素也参与计算 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此BFC出现场景：根元素 float属性不为none position为absolute或者fixed
2021-01-28 17:00:03
138
4
原创 css居中+垂直居中汇总
水平居中：1.文本/行内元素/行内块级元素：text-align:center;2.flex布局：display:flex; justify-content:center;3.常用(前提：已知width值)：margin-left:auto; margin-right:auto; margin:0 auto;4.不定宽块状元素水平居中:改变块状元素的 dispaly 属性为 inline， 然后给父级设置 text-aline：center 来实现水平居中， 缺点：不能再给元素设置宽高5
2021-01-28 16:55:53
78
原创 移动端-适配方案
移动端-适配方案1. 安装依赖npm install px2rem-loader lib-flexible --save 2. 设置viewport设置: <meta name="viewport" content="width=device-width,initial-scale=1.0"> 1. 说明: 因为默认的布局视口大于视觉视口，如果不设置将导致页面的内容显示非常小 2. 原理: 将980的页面在375的屏幕上完全显示只能缩小980页面中的内容3. 直接设置px
2020-11-02 16:52:13
135
原创 手写http模拟post请求
html代码：<form action="http://127.0.0.1:8000" method="POST"> 姓名：<input type="text" name="username" id=""><br><br> 密码：<input type="password" name="password"><br...
2020-02-13 13:37:03
907
原创 新手Git-协作流程
**安装Git：**去官网下载，安装即可；使用Git需要掌握基础的Linux命令 （文章后文有常用Linux命令，需要的可以查看）Git基础操作步骤：（文章后文有常用git命令，需要的可以查阅）创建空文件夹右键 --> Git Bash Here 启动命令行仓库初始化：git initGit配置：git config --global user.nam...
2020-02-09 22:45:12
110
原创 PC端-横向轮播图
步骤：第一步：先实现右侧按钮点击图片动起来；每次点击图片走的距离；起始位置已知，计算定时器每走一小步的距离；第二步：判断点击按钮一次图片移动的距离，停止定时器；-** 第三步**：左边按钮逻辑和右侧按钮几乎一致；因此封装函数move(flag),函数传参是Boolean则是左右按钮方向第四步：无缝轮播：html结构修改，在当前结构分别加第一张图和最后一张图；判...
2020-02-04 20:46:53
2954
原创 PC端-自定义滚动条
html代码：<div id="wrap"> <div id="content"></div> <div id="scrollBar"> <div id="scrollIn"></div> </div></div>css代码...
2020-02-03 15:03:31
517
原创 系统滚动条
html和body这两个元素overflow的scroll属性，控制着系统的滚动条（document和body）； 系统的滚动条有两个，一个是body身上的 ，一个是document身上的。我们平时看到的那个滚动条是document身上的。如果我们想要控制系统滚动条哪个显示哪个关闭分以下情况： 1、单独的给body或者html 设置overflow:scroll 滚动...
2020-02-02 15:24:07
177
原创 PC端-元素拖拽
元素的最终位置=元素的初始位置+鼠标的距离差元素的最终位置 = 元素的初始位置 + 鼠标的距离差元素的最终位置=元素的初始位置+鼠标的距离差html代码：<div id="box"></div>css代码：<style> * { padding: 0; margin: 0; ...
2020-02-02 15:16:56
322
原创 项目css初始化
<style type="text/css"> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } a{ text-decoration: none; } img{ display: block; } input{ o...
2020-02-02 15:15:52
130
原创 PC端-盒子来回移动
html代码：<div id="box"></div>css代码：<style> * { margin: 0; padding: 0; } body { position: relative; } ...
2020-02-02 15:14:49
221
原创 PC端-导航跟随
html代码：<div id="top_wrap"></div>css代码：<style> * { margin: 0; padding: 0; } body { height: 3000px; } ...
2020-02-02 15:13:00
213
原创 PC端-元素边界吸附&触碰交互
知识点1：全局捕获：box.setCapture && box.setCapture();（低级浏览器） 释放全局捕获：box.releaseCapture && box.releaseCapture();低级浏览器）知识点2：禁止浏览器默认行为：return false；（高级浏览器）知识点3：计算元素到视口上方和左边的距离：getBoundin...
2020-02-02 14:53:50
342
原创 PC端-阅读协议
html代码<input type="button" value="阅读协议（5s）" disabled="disabled">javascript代码<script> var num = 5; var inputNode = document.querySelector('input'); var timer...
2020-01-31 18:10:14
254
原创 PC端-获取现在时间
html代码：<span></span>javascript代码：<script> function getDateAndTimeNow() { var date = new Date(); var year = date.getFullYear(); var...
2020-01-31 17:09:58
284
原创 移动端-纵向惯性移动
借助前期封装的transformCSS.js<script src="transformCSS.js"></script>css<style> * { padding: 0; margin: 0; } #header { ...
2020-01-13 19:08:25
364
原创 移动端-纵向轮播图
外联javascript<script src="https://cdn.bootcss.com/holder/2.9.6/holder.js"></script>html<div class="container"> <div class="wrapper"> <div class="i...
2020-01-12 20:22:53
522
原创 移动端-transform应用，获取样式值/设置样式
/**函数名transformCSS作用*设置元素的transform变形*获取元素的transform变形样式值参数:*元素对象*变形样式的名称*变形样式的样式值使用示例设置transformCSS(swiperWrapper,'translateX',-375);transfo...
2020-01-12 20:22:44
387
原创 PC/移动端canvas签名和移动端1px问题解决方案
移动端签名版-canvas<body><div id="app"><canvas></canvas></div><script> //获取canvas标签 var canvas = document.querySelector('canvas'); var app = document.que...
2020-01-09 17:10:34
232
转载 Linux常用基础命令
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS / DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作 cat /proc/cpuinfo 显示CPU info...
2018-05-22 12:37:07
162
git使用一套系列应用汇总
2020-02-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人