- 博客(55)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vue 左树右内容联动布局
前言由于是开发完成后直接上传并记录知识点，所以这里就不再通过详细讲解在普通开发中，左右联动时比较常见的，这里我们通过element+vue来实现该功能此代码使用了代码可视化highlight.js插件代码有两个代码版本，使用的两种方式实现，但是实现方式都是大同小异，使用ref获取元素，获取特定标识，以此对比左右是否一致达到两边联动效果[gitee:](left_right_layout_linkage: 左树右内容联动 代码可视化 (gitee.com))待定代码更改tree内容元素为a标签使
2022-03-24 21:49:01
2759
原创 css常用公共样式
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,address,em,img,ol,ul,li,fieldset,form,label,legend,table,tbody,tfoot,thead,tr,th,td,i,b,s { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style:
2021-12-13 11:13:50
1456
3
原创 前端 常用 正则表达式校验 合集
目录前言手机号校验各大运营商手机号码段分析后位数字13和18开头的手机号是全段15和19开头的手机号后面除4外都有，无154和19417开头的手机号后面除9外都有14开头的手机号除2,3外都有，无142和14316开头的手机号后面只有2567最终得出正则身份证校验简单校验其余简单校验姓名座机号码电子邮箱QQ号码邮政编码参考资料：前言前端开发中，一般表单页面都需要填写手机号、邮箱、身份证等，校验用户输入的是否正确，就要用到正则表达式，用正则表达式来匹配。手机号校验各大运营商手机号码段中国移动信号段
2021-12-06 17:12:20
2258
2
原创 element表格点击添加编辑及新增
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Demo</ti
2021-12-06 11:13:45
1553
原创 CSS打字效果
目录前言注意简易版 只是用CSS让我们开始吧开始工作统一标准扩展新增CSS代码进阶版制作 更加流畅和新的效果效果预想首先设计光标打字效果前言首先我们想象一下我们打字的场景，字母会一个接一个的出来。今天我们的目的就是实现这个效果注意在项目中核心代码为animation，此属性在Internet Explorer 9以及更早的版本不支持 animation 属性。简易版 只是用CSS让我们开始吧我们的文件目录为开始工作首先我们新建文件给予一个h1标签，使用flex布局将其居中<!--
2021-08-10 13:53:21
312
1
原创 BOM浏览器对象
DOM BOM区别窗口加载事件窗口加载事件 当文档页面文档内容完全加载完就会触发该事件有了window.onload之后可以把js文件放在任意地方但是这个window.onload传统方式只能写一次，多个则只执行最后一个所以我们使用addEventListener就没有限制<script> window.onload = function () { var btn = document.querySelector('button') bt
2021-07-13 20:46:53
2110
1
原创 C语言 文件操作
文件操作基础C语言fopen函数使用标准输入文件 stdin（表示键盘）、标准输出文件 stdout（表示显示器）、标准错误文件 stderr（表示显示器）是由系统打开的，可直接使用。使用fopen()函数使用 <stdio.h> 头文件中的 fopen() 函数即可打开文件，它的用法为：FILE *fopen(char *filename, char *mode);//filename为文件名（包括文件路径），mode为打开方式，它们都是字符串。fopen() 函数的返回值
2021-07-13 20:45:55
236
2
原创 前端面试题(五)7.12
1到40亿中存在的1的个数说明 forEach 和 map 区别定义foreEach()方法:针对每一个元素执行提供的函数。map()方法:创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。区别forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。例子制作一个数组的平方有如下一个数组 let arr =[1,2,3,4,5,6]下面分别用forEach(
2021-07-13 14:20:43
144
原创 前端面试题(四)7.9
目录标题Vue 的filters的作用是什么？简单介绍一下下面我们来讲一下过滤器的使用方法使用方式参数写法Vue 的props的作用是什么前言基本用法补充：kebab-case单向数据流： props是单向绑定的props验证$parentVue 中$emit 的作用是什么前言例子子组件：父组件：点击之前的数据点击之后的数据axios 如何定义全局变量错误处理使用过哪些elementui组件ElementUI介绍常用组件Container 布局容器Dropdown 下拉菜单NavMenu 导航菜单Table
2021-07-11 14:53:58
178
1
原创 使用CSS和javascript制作拼图验证码
git 地址https://gitee.com/mryangjianxin/puzzle-verification-codegit下载地址git@gitee.com:mryangjianxin/puzzle-verification-code.git首先，我们要了解一个拼图验证码所时怎么组成的一个完整的图片一个在图片上的遮罩层，来区别我们需要填充的位置，和我们要移动的”块“一个可以操作”块“的滑动条得到一个居中的图片<!DOCTYPE html><html la
2021-07-08 23:18:15
1197
8
原创 前端面试题（三）7.6
待完善7-61rem 1em 1vh 1px 各代表的含义remrem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。em子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-sizevw/vh全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的
2021-07-07 20:35:16
195
原创 前端面试问题总结（二）7.5
7.5vue相关插件API使用UI组件及框架element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用vu
2021-07-07 20:33:18
178
原创 前端面试问题总结（一）7.2
7.2ajax原理，ajax优势Ajax的原理：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。Ajax注意事项不同浏览器下XMLHttpRequest对象的有不同的建立方式；设置回调函数时不要加括号；open方法三个参数含义，此外还需要注意GET方式和POST方式服务器端地址的不同写法；GET方式和POST方式send的参数的不同之处，以及POST方式下send之前需要设置请求头信息的工作；如何判
2021-07-05 22:11:20
213
1
原创 VsCode Settings Sync GitHub详细同步配置
目录标题1.将 VSCode 配置上传到 GitHub新建 GitHub token2新建 gist3.在VsCode下载 settings sync推送和下载推送和下载快捷键在这里我挂上了自己的 Gist ID and 令牌1.将 VSCode 配置上传到 GitHub新建 GitHub token进入GitHub 设置界面 & 创建 GitHub token进入设置点击 Developer settings新建 Generate new token输入名称勾选 gist，
2021-04-29 11:26:19
657
1
原创 单片机项目实例 - 嵌入式开发 - C语言版 - 基础篇
目录标题1. 流水灯 效果，六个LED内嵌灯不停切换（位输出）2. 流水灯 效果，六个LED内嵌灯不停切换（循环移位）3. 数码管显示内容4. 数码管显示内容 （略有闪烁）5. 数码管显示内容 （显示1 2 3 4）（略有问题，欢迎提出Bug）6. 蜂鸣器间断报警7. 蜂鸣器报警，流水灯切换8. 显示器显示 "b"9. 显示屏流动切换1 2 3 4，彩灯流动 ，蜂鸣器间断10. 多功能控制实验程序11. 单按键控制实验，点击关闭熄灭灯或点亮，长按无操作下面位断点 需要连接第三方硬件12. 中断 - 外部中断
2021-04-21 21:43:00
5767
1
原创 嵌入式开发-51单片机构建开发环境
文章目录安装keil4安装安装USB驱动keilC51汉化keilC51的使用我使用的是 keil C51 + stc-isp-15xx-v6.87E点击可跳转官网以下是我自己所分享下载地址：链接：https://pan.baidu.com/s/1Vwe1bYHRpcZLYzpCmo55tQ 提取码：ik8u安装keil4安装等待安装结束安装USB驱动第一种方法是去宏晶官网下载驱动就行了，但是USB插上之后，发现按照他们给的PDF，禁止前面什么的，都没有用，设备管理器上一直
2021-04-21 21:18:43
728
4
原创 C语言实现简单通讯录，增删查改。
test.c文件#include "contact.c"void menu(){ printf("*******************************\n"); printf("**** 1.add 2.del *****\n"); printf("**** 3.search 4.modify **\n"); printf("**** 5.show 6.sort ****\n"); printf("***** 0.exit
2021-04-06 13:36:27
463
1
原创 C语言指针-野指针-数组中中的指针-指针运算
文章目录初始指针野指针初始指针指针是一个变量，存放内存单元的地址(编号)指针实例：int main(){ int a = 10; int *p = &a; return 0;指针就是变量，用于存放地址的变量(存放在指针中的值被当成地址处理)在学习之前，我们应该明白，在32为的机器上，地址是32个0或者1组成二进制序列，那么地址就得用4个字节空间存储，所以一个指针变量大小就应该是4个字节。如果在64位机器上，那么一个指针的大小就是8个字节，才能存放一个地址。由此可得：指
2021-03-31 14:54:22
480
1
原创 C语言 不使用第三值交换A B之间的值；求一个整数存储二进制的1的个数；求两个数二进制不同位的个数
文章目录不使用第三值交换A B之间的值使用第三方值tmp交换A B之间的值使用加减法交换A B之间的值使用亦或方法交换A B之间的值求一个整数存储在内存中二进制的1的个数使用整数取余方式获取使用按位与方式获取在面试中，我们往往会遇到不同寻常的问题，比较锻炼思维能力，比如我们现在讨论的交换A B的两值交换。不使用第三值交换A B之间的值使用第三方值tmp交换A B之间的值使用第三方值理解比较简单，类似于一个三个瓶子 第一个瓶子A是酸梅汁，第二个瓶子是B是柠檬汁，第三个瓶子tmp是空瓶子。我们第一步将A
2021-03-30 10:42:18
150
转载 Windows+R命令大全
Windows+R命令：explorer-------打开资源管理器lusrmgr.msc----本机用户和组logoff---------注销命令oobe/msoobe /a----检查XP是否激活cleanmgr-------垃圾整理compmgmt.msc—计算机管理conf-----------启动netmeetingcharmap--------启动字符映射表calc-----------启动计算器chkdsk.exe-----Chkdsk磁盘检查regsvr32 /u *.
2021-03-24 17:26:52
14212
原创 C 语言 int main() 和 int main(void) 的区别
在C语言编程中通常会看到 **int main()、int main(void)、void main（void）、main（）和main（void）、int main() 和 void首先来看看标准的主函数写法是什么样的，在C99标准(ISO/IEC 9899:1999)的5.1.2.2.1 Program startup一节是这么描述的:The function called at program startup is namedmain. The implementation declar
2021-03-16 14:32:18
42032
9
原创 C语言字符串、文件操作常用操作函数，
C语言字符串常用操作函数C语言字符串、文件操作常用操作函数标准输入/输出重定向文件操作补充C语言字符串、文件操作常用操作函数字符串输出 - putsint puts(const char *str)字符串写入到标准输出 stdout字符串输入 - getschar *gets(char *str)标准输入 stdin 读取一行字符串比较 - strcmpint strcmp(const char *str1, const char *str2)字符串进行比较如果返回值小于 0，则
2021-03-10 09:42:51
20400
2
原创 滚动进度条CSS实现
实现原理我们在阅读文章时，顶部可能会出现进度条我们使用背景图把页面一分为二，可以看见我们背景色在页面滑动时会不断边长。由于上述效果不显著，我们使用遮罩层进一步展示但是光这样会导致进度条开始不为0且不能达到100%，所以我们进一步改善，我们使用定位让背景图往下一点使得进度条从0开始在做调整使用background-size使得达到100%附代码<!DOCTYPE html><html lang="en"><head> <meta c
2020-12-22 09:30:36
16682
2
原创 解决移动端HTML页面右侧空白问题
问题描述响应式网页缩放时出现右侧空白原因：子元素宽度撑开页面通常纯pc端页面各元素固定宽度不会出现问题，但响应式页面部分元素定宽容易出现问题测试后发现可能出现以下布局：内部元素定宽，外部自适应，当缩放到小于内部宽度时出现空白此时.blank定宽700px，撑开body使整体观感右侧有空白不换行元素宽度过长虽然给ul元素定宽300px，但有不换行white-space:nowrap;属性，内部li超过页面宽度后也会产生缩放空白，如果 <h1~6>等标签元素溢出 也会产生空白
2020-11-19 19:37:40
20177
3
原创 classList 添加、删除、切换类名
classList 返回元素得类名<div class="one two"></div><script> window.addEventListener('load', function() { var div= document.querySelector('div'); console.log(div.classList) console.log(div.classList[0]) })</script><div class
2020-10-23 17:09:50
12273
1
原创 Javascript中 scroll 、client、offset区别
高宽scrollHeight 得到的时实际的高宽，不含边框返回数值不带单位clientHeight 得到的是盒子高宽 不包含边框大小offsetHeight 得到的是盒子高宽 包含边框大小他们三个返回数据都不带单位scroll 事件 scrollTop当我们滚动条滚动时 触发此事件例：<style> div { width: 200px; height: 200px; background
2020-10-14 13:42:36
16002
1
原创 事件对象 常见的事件对象得属性和方法
文章目录事件传统方式addEventListener常见的事件对象得属性和方法返回触发事件的对象e.target 返回的是触发事件得对象(元素)this 返回的是绑定事件得对象(元素)扩展 this 有个非常相似的属性 currentTarget 在IE678兼容为了使用所以我们使用兼容性写法返回事件类型e.type返回事件类型阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交传统的注册方式事件传统方式<div>123</div>var div = document
2020-10-10 14:32:36
12673
原创 DOM事件流 :注册事件 -删除事件
文章目录注册事件传统注册方式事件侦听事件 addEventListenerattachEvent事件监听事件解决attachEvent、addEventListener兼容性方法删除事件传统方法解绑事件方法监听事件删除事件 eventTarget.removeEventListener(type,listennrt[,useCapture])方法监听事件删除事件 eventTarget.removeEventListener(type,listennrt[,useCapture])删除事件removeEve
2020-09-27 19:04:28
16121
转载 CSS垂直居中的12种实现方式
文章目录使用绝对定位和负外边距对块级元素进行垂直居中使用绝对定位和transform另外一种使用绝对定位和负外边距进行垂直居中的方式绝对定位结合margin: auto使用padding实现子元素的垂直居中设置第三方基准使用flex布局第二种使用弹性布局的方式使用 line-height 对单行文本进行垂直居中使用 line-height 和 vertical-align 对图片进行垂直居中使用 display: table; 和 vertical-align: middle; 对容器里的文字进行垂直居中使
2020-09-27 16:30:23
17685
原创 DOM总结：创建、增删改查、自定义属性、事件操作
DOM总结1. 创建document.write()innerHTMLdocument.createElement()2.增加appendChildinsertBefore3.删除removeChild4.修改修改元素属性：src、href、title修改普通元素内容：innerHTML、innerText修改表单元素：value、type修改元素样式：style、className5.查DOM提供的API方法：getEleme
2020-09-25 13:58:18
11660
1
原创 三种创建元素方式区别及其效率
三种创建元素方式区别document.write() 会导致页面重绘innerHTML 使用拼接方式会导致只能用内存过多，效率过低 建议使用数组（结构稍微负责）document.createElement() 创建多个元素效率稍低一点 结构更清晰注意：在不同浏览器下 innerHTML 比createElement()效率高<body> <button>点击</button> <p>abc</p> <di
2020-09-25 13:35:46
11928
1
原创 操作元素实例 -动态创建表格
动态创建表格： 涉及知识： node.createElement()创建元素节点<p> 父节点.appendChild(child)添加节点<p> node.removeChild(child)删除元素字节<p> 对象的操作<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="v
2020-09-24 20:00:56
11867
原创 操作元素节点操作：自定义属性-子节点操作-父节点-下拉节点实例-兄弟节点解析-创建节点-简单发布实例-删除节点
自定义属性<!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
2020-09-24 19:50:43
16282
1
转载 vscode 一键规范代码格式
转载:https://blog.csdn.net/zm_miner/article/details/94416776
2020-09-24 16:41:55
12037
1
原创 操作元素实例-tab切换：选择不同按钮显示不同内容并影藏其余内容，Bootstrap口风琴样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
2020-09-23 22:22:02
12128
原创 操作元素实例-文本框操作 ：显示隐藏文本框内容、新浪微博密码判断(基础)
显示隐藏文本框内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t
2020-09-23 22:19:35
11850
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人