- 博客(119)
- 收藏
- 关注
RSS订阅转载 CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？
CSS 选择符有哪些？1.id选择器（#id）2.类选择器（.class）3.标签选择器（div，h1，p）4.相邻选择器（h1 + p）5.子选择器（ul > li）6.后代选择器（li a）7.通配符选择器（ * ）8.属性选择器（a[title]）9.伪类选择器（a:hover，li:nth-child）可继承的样式1....
2019-09-30 17:06:00
284
转载 link 和 @import 的区别是什么？
link语法结构： <link href="url" rel="stylesheet" type="text/css">@import语法结构：@import url 多用于css文件中，把多个样式表导入到一个样式表中，在页面里面只需要导入一个样式表即可，便于修改和扩展1.在html中 <style> @import url ...
2019-09-30 16:20:00
270
转载 什么是回流(重排 reflow)？什么是重绘(repaint)？如何减少回流、重绘？
什么是回流(重排 reflow)？回流（重排 reflow）：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow，reflow的时候，浏览器会使已渲染好受到影响的部分失效，并重新构造这部分，完成reflow后，浏览器会重新绘制受影响的部分到屏幕中（继昨日每日一题：display:none和visibility:hidden 当display显示及隐藏元素...
2019-09-30 16:18:00
414
转载 display:none和visibility:hidden的区别？
css控制元素不可见的方法 { display: none; /* 不占据空间，无法点击 */ }/********************************************************************************/{ visibility: hidden; /* 占据空间，无法点击 */ }/******************...
2019-09-30 16:13:00
195
转载 vue路由跳转的方式
vue路由跳转有四种方式1. router-link2. this.$router.push() (函数里面调用)3. this.$router.replace() (用法同push)4. this.$router.go(n)一、不带参1.1 router-link<router-link :to="{name:'home'}"> &...
2019-09-30 16:04:00
262
转载 原生js和css写虚拟键盘
代码来源忘记是哪个大神的了，抱歉抱歉放上源码：<!-- 虚拟键盘 --><!DOCTYPE html><html><head> <meta charset="utf-8" > <title>虚拟键盘</title> <style> ...
2019-09-29 14:15:00
284
转载 多Y轴，下拉框渲染，相同类型不同数据
放上json文件：{ "2017年3月": { "outKou": "5525.86", "inKou": "420833.61", "outLooper": null, "inLooper": null }, "2017年4月": { "outKou": "6...
2019-09-27 11:03:00
128
转载 一个页面两个div（一个柱状图或者折线图一个饼图）
需求是一个页面中两个图，一个饼图一个折线图，接口用的是一个接口，柱状图的图例要隐藏掉，X轴为月份，每月份都有两个数据，也就是图例是两个（进口和出口）的意思饼图需要显示最新月份数据，并且有一个下拉框可以切换月份，视图就显示相应月份的数据，主题切换要全部一起切换，工具箱两个div一人一个已经测试过了没有bug了，布局不喜欢的可以自己改，现在放上源码和效果图供参考：<!-...
2019-09-26 15:01:00
754
转载 js特效背景--点线随着鼠标移动而改变
https://blog.csdn.net/css33/article/details/89450852https://www.cnblogs.com/qq597585136/p/7019755.htmlhttps://blog.csdn.net/qq_40223005/article/details/80810695https://blog.csdn.net/IT_mode...
2019-09-25 14:51:00
626
转载 使用CSS设置背景图片，图片比较大，完全显示在一个DIV中
做的时候想要边框为比较好看的样式，需要UI切图并且放在div中，看起来会好看点像这样的，我随便挑选了一个，UI帮我切图出来需要把这个图片填到相应的div里面，但是很显然碰到一个问题，图片太大，而且放进去以后还不是响应式的那么解决问题的就来了：background:url(1.jpg);-webkit-backgroun...
2019-09-25 14:04:00
4306
转载 简单的接口取数据渲染到图表
从接口里面取出来相应的数据渲染到图表，这个之前我有发过博客去记录，可以看之前的文章，这篇就算做一个笔记吧接口里面的数据格式如下：{ "regionWithYield": { "山东": ["204.5", "204.63"], "内蒙古": ["4.5", "5"], "山西": ["184.04", "168.69"], "贵州": ["30.3...
2019-09-24 14:48:00
1029
转载 图表里面双重下拉框进行判断
之前的需求是根据下拉框选择相应的地区来展示相应公司渲染出来的图表，现在多了个需求是再多一个下拉框判断型号，这两个判断要可以同步进行也就是选择相应地区再选择相应型号，图表要展示相应的内容我的写法可能有点笨拙，先判断全部地区下是否为全部型号，再判断不同地区下是否为全部型号，也就是四个部分（如果有好的想法麻烦指教一下）放上源码供参考（url接口自己找，这个公司内部不方便透露）...
2019-09-24 10:10:00
256
转载 用js方式取得接口里面json数据的key和value值
大家在实际操作中难免遇到对接口的问题，想必对一些小白来说取得里面想要是数据也是很是头疼，那么接下来我会结合接口实际情况教大家怎么取得里面相应的数据接口数据例如：（数据为 模拟数据，json格式）{ "month": { "monthly": ["2018年4月", "2018年5月"] }, "nameAndRateOper...
2019-09-21 09:21:00
314
转载 一个div多个图表共用一个图例
想实现一个图例（公司名），点击让div中三个图表进行显示相应的数据，并渲染到图表中（公司数据可能很多，让其默认显示三条数据），并且每个图表都有相应的标题和datazoom区域展示，点击下拉框会进行相应的数据进行渲染和主题切换话不多说，放上效果图和代码供参考有些代码里的方法是直接套用上一个里面的，有兴趣的可以去看看图表实战的其他内容，可能注释有些不完整，参考其他内容...
2019-09-20 17:38:00
1409
转载 一个页面多图表展示（四个div的方式）
效果如图所示，一个页面四个div，每个div里面展示相应的数据，因为这种效果会有点麻烦，而且不太雅观我就换了一种写法，一个div里面用四个图表，共用一个图例，先放上这个方式的效果图和源码，后期会再发布一篇文章用来展示新的效果<!-- 产能 产量 开工率 仓储 --><!DOCTYPE html><html lang="...
2019-09-19 16:06:00
1129
转载 vue组件之子组件和父组件
在看官网和学习的过程中，有些不明确子组件和父组件的定义，为了方便后期学习和理解去网站上搜索了一下相关的解释1.使用的地方是父组件，定义的地方是子组件，虽然他们是同一个组件2.Vue.component()是制作子组件,<child></child>是制作好了，在父组件环境里面用父组件不用动，子组件直接用props拿就可以了，子组件传父组件的时...
2019-09-18 17:49:00
227
转载 根据判断对颜色进行改变
需要通过后台接口传的数据对相应的状态码进行颜色的显示，但是因为还没有部署到后台，接口也没有，就自己模拟了一个数字进行操作演示但是在写的过程中碰到了一个问题，先前的颜色是好好的，但是想根据状态码去添加相应的颜色，发现覆盖不了，这个效果是实现不了的，上网上搜了下发现vue和jQuery不能同时使用，一个是对真实dom进行操作，一个是对虚拟的dom进行操作，两个技术是冲突的，然后我改掉了以...
2019-09-16 17:28:00
534
转载 定时器和计时器
调度：setTimeout和setInterval我们可能决定不立即执行某个功能，但在某个时间之后执行。这叫做“安排一个电话”。它有两种方法：setTimeout允许我们在一段时间后运行一次函数。setInterval允许我们重复运行一个函数，从时间间隔开始，然后以该间隔连续重复。这些方法不是JavaScript规范的一部分。但是大多...
2019-09-12 17:35:00
3073
转载 富文本编辑器--获取JSON
获取 JSON 格式的内容可以通过editor.txt.getJSON获取 JSON 格式的编辑器的内容，v3.0.14开始支持，示例如下<div id="div1"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> <img src="https://ss0.bdst...
2019-09-12 16:48:00
707
转载 富文本编辑器--使用textarea即时更新文本域同步编辑器内容
使用 textareawangEditor 从v3版本开始不支持 textarea ，但是可以通过onchange来实现 textarea 中提交富文本内容。 <div id="div1"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div>...
2019-09-12 16:47:00
2476
转载 富文本编辑器--设置和获取内容
设置内容以下方式中，如果条件允许，尽量使用第一种方式，效率最高。html 初始化内容直接将内容写到要创建编辑器的<div>标签中<div id="div1"> <p>初始化的内容</p> <p>初始化的内容</p></div><script type=...
2019-09-12 16:24:00
968
转载 富文本编辑器--禁用和打开
// 禁用编辑功能editor.$textElem.attr('contenteditable', false)// 开启编辑功能editor.$textElem.attr('contenteditable', true)转载于:https://www.cnblogs.com/huchong-bk/p/11512234.html...
2019-09-12 15:43:00
2496
转载 富文本编辑器--页面中两个编辑器以及菜单和编辑器区域分开
###~css.toolbar{border:1pxsolid#ccc;}.text{border:1pxsolid#ccc;height:400px;}#div3{margin-top:50px}###~vue<template><divcl...
2019-09-12 15:42:00
834
转载 富文本编辑器--引入demo和简单使用
wangEditor—— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。官网：www.wangEditor.com文档：www.kancloud.cn/wangfupeng/wangeditor3/332599源码：github.com/wangfupeng1988/wangEditor来源官网使用var E = wind...
2019-09-12 14:59:00
811
转载 this(ES6箭头函数里的this)
一，了解前须知1，箭头函数：出现的作用除了让函数的书写变得很简洁，可读性很好外；最大的优点是解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题。2，我们常见的window属性和方法有alter，document，parseInt，setTimeo...
2019-09-12 13:54:00
294
转载 箭头函数
部分来源：https://www.cnblogs.com/snandy/p/4403111.htmlES6可以使用“箭头”（=>）定义函数，注意是函数，不要使用这种方式定义类（构造器）。一、语法1.具有一个参数的简单函数12varsingle = a => asingle('hello, worl...
2019-09-12 10:23:00
70
转载 vscode中外部引入js文件以及里面相应的方法
随便写一个js文件，定义一个方法名，并且在组件中进行引用就算成功###~jsfunctionshuchu(){console.log(1)}export{shuchu};###~.vue<template><divclass="hello"><butt...
2019-09-12 09:41:00
6666
转载 ES6 模块的加载实现 import和export
ES6的Class只是面向对象编程的语法糖，升级了ES5的构造函数的原型链继承的写法，并没有解决模块化问题。Module功能就是为了解决这个问题而提出的。历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@impo...
2019-09-11 17:58:00
275
转载 import与export
import与export概述在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）。ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 的模块化作为导出（export） @与导入（import）两个模块。特点ES6 的模块自动...
2019-09-11 17:57:00
565
转载 变量的结构赋值
数组的解构赋值基本用法ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为赋值，只能直接指定值。vara=1;varb=2;varc=3;ES6允许写成下面这样。var[a,b,c]=[1,2,3];上面代码表示，可以从数组中提取值，按照对应...
2019-09-11 16:22:00
178
转载 CSS布局 ——从display，position， float属性谈起
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器...
2019-09-11 11:35:00
96
转载 让图表的Y轴 产生几个刻度距离
动态设置max查看官网写入方法获取到你数据最大值然后+个100转载于:https://www.cnblogs.com/huchong-bk/p/11505313.html
2019-09-11 11:33:00
125
转载 CSS行高——line-height 垂直居中等问题
CSS行高——line-height初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：顶线、中线、基线、底线&...
2019-09-11 10:35:00
182
转载 CSS media queries 媒体查询
最近在做一些页面打印时的特殊处理接触到了media queries，想系统学习一下，在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错，结合自己的使用总结一下。CSS2/media在CSS2中可以使用media属性可以使特定style只在指定媒体类型下其作用,比如页面有些部分需要在打印的时候隐藏或者变大，这时候可以使用media使某些style只在打印的时...
2019-09-11 10:28:00
103
转载 CSS hack前传——背景图片全屏
滑动滚轮图片不变并且兼容ie和谷歌谦行大神的博客https://www.cnblogs.com/dolphinX/p/3292997.html放上他的几个效果图下面的评论有其他的解决方法，多看看了解下例如:我记得background-attachment设置成fixed就可以了吧···还真是，一直不知道还有这个属性，太让人难为情了，都想删...
2019-09-11 10:07:00
111
转载 模板的延长线
标准字符串letname="koma"letaddress="网吧"letstr=`你好，${name}!晚上一起去${address}玩吗？等你的回信`console.log(str)扩展字符串//markdown是写文章的一种标记语言,可以被转换成html,描述性很强...
2019-09-11 09:54:00
89
转载 嵌入字符串
字符串嵌入的方式字符串嵌入的定义~~~js反单引号用来定义字符串模板用的 `let name="koma"let str="你好,${name}!"//标准字符串let str2=`你好，${name}!`//字符串模板console.log(str)console.log(str2)function tagged(formats, ......
2019-09-11 09:30:00
192
转载 二八十六进制相互转化
二进制与十进制之间的转换十进制转二进制方法为：十进制数除2取余法，即十进制数除2，余数为权位上的数，得到的商值继续除2，依此步骤继续向下运算直到商为0为止。如下图：二进制转十进制方法为：把二进制数按权展开、相加即得十进制数。二进制与八进制之间的转换二进制转八进制方法为：3位二进制数按权展开相加得到1位八进制数。（注意事...
2019-09-10 11:30:00
574
转载 进制转换
0b:二进制0o:八进制0x:十六进制~~~jsconsole.log(0b10);//2console.log(0o10);//8console.log(0x10);//16console.log(0b11===3);//trueconsole.log(0b10===8);//trueconsole.log(0x11===16);//true...
2019-09-10 11:22:00
79
转载 响应式网页，让div的高和宽保持等比例放大、缩小
1,方案一:响应式来做,可以根据媒体查询,设定在不同屏幕宽度下div的高度和宽度,具体的设置看你响应式想怎么显示 @media only screen and (min-width: 100px) and (max-width: 640px) { div{ width: 100px; height: 10...
2019-09-10 09:39:00
483
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人