小白努力中...-优快云博客

原创 echarts折线图：X、Y轴单位、去掉折线点

全部代码： x轴每个数据的单位： xAxis: { show:true, type: 'category', boundaryGap: true, name:"月", data: ['1', '2', '3', '4', '5', '6', '7',"8","9","10","11","12"], axisLabel: { // 每个数据后面都会带有单位 // f

2021-08-18 17:58:05 4025

原创 echarts饼图饼图分隔线、图例的位置、图例的类型、图例后面带数据

先看下实现之后的效果：饼图的分隔线：实际上是通过给边框宽度和边框色实现的 series:[ itemStyle:{ // 间隔 borderWidth:2, borderColor:'#000' } ] 注意：上图并没有分隔线是因为图例是环形（环形是通过给图例的color设置透明色和borderWidth实现的）图例也使用了borderColor（会继承饼图的）所以当饼图设置了borderCol

2021-08-18 16:54:59 13761

原创 Vue父子、兄弟、无关组件传值

组件传值一、基本的组件传值 1、父子组件(是两个组件同时都在页面上展示着（都在内存中）) //父子组件的代码格式（标签的嵌套）父组件模板里面有子组件使用 <Son></Son> 1）、父给子 ①、props ②、vuex //子组件 <template> .... </template> <script> export default{ props:['name'],//子组件的属性 } &lt

2021-07-11 22:18:18 1104

原创 VUE哔哩哔哩移动端项目使用vant 实现发布功能（上传文件）

bilibili发布页面主要有：发布按钮、多行文本框、一个上传图片的按钮（此处使用了vant插件）组件里面的头部有：左返回按钮（使用vant）、发布按钮 <div class="top"> <van-icon name="arrow-left" class="top-lef" @click="go" />

2021-06-29 22:58:02 2112 9

原创缓动动画原理

缓动动画原理 4.4 缓动效果原理 <button>点击夏雨荷才走</button> <span>夏雨荷</span> <script> // 缓动动画函数封装obj目标对象 target 目标位置 function animate(obj, target) { // 先清除以前的定时器，只保留当前的一个定时器执行每次点击按钮执行时都先清除上次的定时器否则会加快

2021-03-17 22:07:07 200

原创动画原理

4. 动画原理 4.1 动画实现原理 <style> div { /* 此元素需要添加定位，才能使用 element.style.left */ position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; }

2021-03-17 21:57:54 252

原创 mouseenter和mouseover的区别

mouseenter 鼠标事件 var father = document.querySelector('.father'); var son = document.querySelector('.son'); father.addEventListener('mouseover', function() { console.log(11); //经过子盒子父盒子都会触发 father.addEventListener('mous

2021-03-17 21:44:13 126

原创元素滚动 scroll系列

scroll 系列 <style> div { width: 200px; height: 200px; background-color: pink; border: 10px solid red; padding: 10px; /* 添加滚动条 */ overflow: auto; }

2021-03-17 17:26:17 234

原创元素可视区 client系列

client client 宽度和我们offsetWideth 最大的区别就是不包含边框 <style> div { width: 200px; height: 200px; background-color: pink; border: 10px solid red; padding: 10px; } </style>

2021-03-16 23:04:59 123

原创元素偏移量offset系列

元素偏移量offset系列 offset系列属性 offset 就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 var father = document.querySelector('.father'); var son = document.querySelector('.son'); // 1.可以得到元素的偏移位置返回的不带单位的数值 console.log(father.offsetT

2021-03-14 23:05:14 650

原创 location对象

location对象 5.1 什么是location 对象 Window 对象给我们提供了一个 location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location对象。案例：5秒之后跳转页面 1.点击按钮跳转 btn.addEventListener('click', function() { // console.log(location.href); locati

2021-03-12 22:16:08 254

原创定时器（倒计时）

BOM 即浏览器对象模型它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window. DOM 和 BOM的区别： DOM 文档对象模型； DOM就是把文档当做一个对象来看待； DOM的顶级对象是 document ； DOM主要学习的是操作页面元素； DOM是W3C标准规范； BOM 浏览器对象模型；把浏览器当做一个对象来看待； BOM的顶级对象是 window ； BOM学习的是浏览器窗口交互的一些对象； BOM是是浏览器厂商在各自浏览器上定义的，兼容性较差； BOM

2021-03-11 23:14:15 768

makemoreefforts的博客