- 博客(56)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 VS Code必备插件（扩展）推荐
1.Open in Browser这允许您在默认浏览器或应用程序中打开当前文件。2.Open in Browser这允许您在默认浏览器或应用程序中打开当前文件。
2021-11-29 22:05:19
818
原创 js Date对象常用方法
获取<!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>
2021-11-20 17:04:37
609
原创 js取整有哪些方式
一、四舍五入 let num1=13.454; let num2=13.545; console.log(Math.round(num1));//13 console.log(Math.round(num2));//14 console.log(num1.toFixed(0));//返回字符串13 console.log(num2.toFixed(0));//返回字符串14注意：toFixed()返回字符串二、向上取整 let num1=13.4
2021-11-18 11:59:29
8489
原创 css清除浮动（clearfix）的3种方式
一、背景css中使用了float浮动元素，导致页面中某些元素不能正确的显示。二、浮动引起的后果（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素。（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置。（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示。三、css清除浮动3种方式1.父元素使用overflow属性（1）用法overflow:hidden;或者overflow:a
2021-11-16 21:23:28
2886
原创 a标签设置href=“#“
重点a标签href属性设置为“#”，则表示一个空链接，单击空链接，页面不会发生变化。拓展1.为a标签设置href属性，属性值为“#+锚点名称”。2.例如，输入“#myID”。 <h1 id="myID">图片1</h1> <p><img src="images/1.jpg" alt=""></p>3.如果链接到不同的页面，例如text.html，则输入“text.html#myID”，可以使用绝对路径，也可以使用相对路径
2021-11-16 12:04:49
4507
原创 原生JS实现添加、删除行
效果代码<!DOCTYPE html><html><head> <title>原生JS实现添加、删除行</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body> <table border="1" width="50%" id="table"&
2021-11-16 11:44:43
596
原创 CSS盒模型
CSS 盒子模型(Box Model)盒子模型所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容
2021-10-26 15:12:06
62
原创 CSS样式代码的插入形式
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：内联式基本用法<p style="color:red">这里文字是红色。</p>错误用法注意要写在元素的开始标签里，下面这种写法是错误的：<p>这里文字是红色。</p style="color:red">多条样式css样式代码要写在style=""双引号中，如果有多条css样式代码设
2021-10-24 09:07:54
968
原创 css基本语法
css样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素不会受到影响。声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：p{font-size:12px;color:red;}注意：1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。2、为了使用样式更加容易阅读，可以将每条代码
2021-10-22 11:14:58
64
原创 HTML的table基本知识
创建表格的四个元素：table、tr、th、td1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。4、<th>…</th>：表格的头
2021-10-19 11:42:52
447
原创 关于CMD
编程时或多或少会用到cmd，为了帮助自己在需要用到时方便查找，于是编写了这篇内容，随着学习的不断深入，也会进行补充。cmd：命令提示符是在操作系统中，提示进行命令输入的一种工作提示符。1.进入cmd（1）win+R打开运行窗口（2）输入“cmd”然后回车2.访问盘符例如：进入d盘，输入“d:”3.进入某个文件夹（1）只能一级一级的进入（2）cd是change directory（改变目录）的缩写例如：进入d盘下的list文件（1）输入“d:”（2）输入“cd list”4.
2021-10-07 22:16:19
87
原创 系统学习前端——序
为什么写这个板块距离上一次写文章已经差不多10个月了，在这10个月里，基本没有怎么敲过代码，技术水平已经一落千丈，迫于生活的压力，感觉自己还是得回到代码的怀抱。打开电脑的那一刹那，已经无从下手。于是，萌生了把JavaScript系统性梳理一遍的想法，刚好在此时或之前不久，《JavaScript权威指南》第7版和《JavaScript高级程序设计》第4版已经面世，也为自身系统性学习提供了必要的支持。此板块适合哪些人由于太久没有敲过代码，感觉自己与新人无异。相当于一切从头来过，所以这个板块相当于自身的学
2021-10-07 09:40:56
70
原创 js正则验证数字和字母
//匹配2位的字母或数字 checkNum(num) { return /^[0-9a-zA-Z]{2}$/.test(num) },
2020-12-25 16:01:17
1284
原创 文本两端对齐，最后一行左对齐
一、语句text-align:justify; // 所有行两端对齐text-align-last: left; //最后一行左对齐二、扩展属性：text-align 属性规定元素中的文本的水平对齐方式。语法：text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;1.auto：把文本排列到左边。默认值：由浏览器决定。2.right：把文本排列到右边。3.center：把文本排
2020-11-17 14:11:57
3855
原创 关于Vue的一些冷知识
1.为什么创建Vue实例时用vm作为一个变量名？答：（1）vm是ViewModel的缩写。（2）Vue虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。...
2020-11-16 11:46:18
303
原创 Vscode使用记录
1.生成html标准文档（1）新建带html后缀的文档（2）在编辑区输入：!（3）按下tab键2.代码格式化：Shift + Alt + F。3.打开浏览器（1）右键（2）快捷键：Alt + B（默认）Shift + Alt + B（其他）
2020-11-16 11:18:28
91
原创 Git+TortoiseGit+中文包
一、下载地址：Git下载地址: https://git-scm.com/download.Git官方下载太慢？: https://npm.taobao.org/mirrors/git-for-windows/.TortoiseGit及中文包下载地址: https://tortoisegit.org/download.二、配置1.安装顺序Git>>>>>>TortoiseGit>>>>>TortoiseGit中文包2.git配置
2020-11-05 10:35:07
253
原创 element拼音模糊搜索
1.安装依赖（npm有问题就用cnpm）npm install pinyin-match --save cnpm install pinyin-match --save2.引用import pinyin from 'pinyin-match'3.关键代码pinyin.match(data, value); //data匹配的内容，value输入的内容4.示例<template> <div> <el-input .
2020-10-29 15:35:11
694
原创 element上传时限制为图片类型
// 方法一：使用属性accept（在选择文件时直接过滤掉不符合的文件）accept=".gif,.jpg,.jpeg,.png,.GIF,.JPG,.PNG"
2020-10-19 11:46:45
1703
原创 JS获取时间戳的几种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS获取时间戳</title></head><body><script> let time1 = Date.parse(new Date()); //1603009257000,精确到秒 let time2 = new Dat
2020-10-18 16:30:38
64866
2
原创 去掉ECHarts折线图中图例的圆点
思路：重新设置legend的图例形状（用矩形替代） legend: { data: [{ name: '计划负荷', icon: 'rect', // 用矩形替换 }, { name: '实时负荷', icon: 'rect', } ], itemWidth: 25, //矩形宽度 i
2020-09-21 09:25:07
4883
1
原创 ECharts折线从x轴原点（0点）开始
xAxis. boundaryGap坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：boundaryGap: [‘20%’, ‘20%.
2020-09-20 10:50:55
24369
2
原创 ECharts折线拐点设置
series-line. showSymbol = true是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。 series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line", label: { show: false }, markPoint: { data: [{ type: "max"
2020-09-18 20:24:46
1670
原创 ECharts的x轴最后一个刻度不显示
xAxis.axisLabel. showMaxLabel是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）。 xAxis: { type: "category", axisLabel: { showMaxLabel: true } }...
2020-09-17 15:14:48
8004
1
原创 关于ECharts饼图的起始角度和生长方向
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="echarts.js"></script><div id=""> <div id="main" style="width:.
2020-09-11 12:53:37
3038
1
原创 ECharts图表特殊配置项
1.坐标轴的分割段数yAxis. splitNumber = 5坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在类目轴中无效。...
2020-09-04 10:38:52
1000
原创 Canvas渐变色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { background: #2c3e50; } #leftTopCanvas { border: 1px s.
2020-09-03 11:58:39
229
原创 Canvas绘制仪表盘
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Canvas绘制仪表盘</title> <style> body { background: #2c3e50; } #myCanvas { border: 1px .
2020-09-02 14:46:22
912
原创 如何用原生JS实现轮播效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #myDiv { width: 500px; height: 400px; border: 1px red solid;
2020-08-19 17:35:00
79
原创 JS计算数组中每个元素出现的次数
// arr是需要解析的数组 let arr = [1, 2, 2, 2, 3, 3, 3]; //objGroup是输出的对象 let objGroup = arr.reduce(function (obj, name) { obj[name] = obj[name] ? ++obj[name] : 1; return obj; }, {}); //objKey是对象的键名构成的数组 let obj...
2020-08-17 14:28:57
2460
原创 HTML的table如何合并边框线
table { text-align: center; border: 1px solid white; border-collapse: collapse;
2020-08-13 09:53:32
1003
原创 Vue常见问题积累
1.不要在选项 property 或回调上使用箭头函数：比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止。经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.my
2020-08-10 14:38:04
97
原创 ECharts柱状图配置项
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="echarts.js"></script><div id=""> <div id="main" style="width:
2020-07-21 17:51:31
229
原创 关于ElementUI导航栏的常见问题（随时更新）
一、elementUI导航栏父级菜单只显示一半原因：ElementUI采用Layout布局，是24分栏。解决方法：<el-col :span="12">//'12'改为'24'即可<el-col :span="24">二、子菜单比父级菜单多1px问题描述：代码是固定宽度200px，但是通过控制打印发现父级菜单只有199px，在控制台可以看到节点的class属性el-menu。解决方法：<style scoped> .el-menu{
2020-06-13 12:42:55
4062
1
原创 JS三元运算符如何执行多条语句
说明：这是一个小demo，可以在网页上执行；用了Vue，不习惯的朋友直接看isDisplay()中的方法就好了。<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Vue</title> <script src="https:/
2020-06-11 14:20:15
4594
原创 用div实现textarea
考察内容：HTML的contenteditable(设置可否编辑)属性。一、简易版<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用div实现textarea</title></head><body><div contenteditable="true">点击这里，可直接进行编辑。&l
2020-06-06 10:03:16
280
原创 关于JS中Number()、parseInt()和parseFloat()，你应该知道的事
Number()是转型函数，可以用于任何数据类型，另外两个函数专门用于把字符串转换成数值。一、Number()1.Boolean值，true和false分别转换为1和0在这里插入代码片
2020-05-15 23:04:26
301
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人