- 博客(38)
- 收藏
- 关注
RSS订阅原创 echarts图表,多个柱体,其中有数据为0时不占位
一.会有空位的情况当某些数值为0时,会空着,显得不好看.代码示例:option = { tooltip: { trigger: 'axis' }, legend: { data: ['A', 'B', 'C', 'D', 'E'] }, xAxis: [ { type: 'category', position: 'bottom', data: ['2012', '2013', '2014', '2015', '2016'
2022-03-14 14:58:11
5138
7
原创 echarts画立体圆柱形图表
option = { xAxis: { type: 'category', data: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区', 'G区'], axisLine: { lineStyle: { color: '#2063A8' } }, axisTick: { show: false }, axisLabel: { color: '#EFF2F9',
2021-11-15 10:45:33
2775
原创 async的基础用法,解决异步问题
async基础用法1. async函数,会返回一个promise对象,可以用.then调用async函数中return的结果.例: async function helloAsync() { return "返回结果"; } console.log(helloAsync()) // 输出Promise对象: Promise {<fulfilled>: '返回结果'} helloAsync().then(v => { con
2021-10-29 10:08:25
1384
1
原创 pointer-events鼠标禁止点击
pointer-events：（默认为 auto）该CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。当属性值为none时，该元素就不会成为鼠标事件的target。即点击该元素，不会触发该元素上的点击事件等。并且，如果想设置鼠标样式cursor也不会起作用，所以我觉得，如果想要这个属性来写按钮的禁止属性不太行，因为没法设置成“not-allowed”样式的鼠标效果。#button{ width: 100px; height:
2021-07-22 15:47:48
569
原创 echarts图表的折线图样式
项目中遇到的一些样式需求:1.对网格线样式修改;2.对坐标轴线,文字的样式修改;3.对图例组件legend样式的修改;4.对折线样式的修改;5.y轴单位样式.var chartDom = document.getElementById('main');var echart = echarts.init(chartDom, 'dark'); //dark ,深色主题var option = { tooltip: { trigger: 'axis', }, color: ['
2021-03-08 17:36:03
7973
6
原创 css3的animation动画创建和使用
一.animation有的属性:1、animation-name(动画名称)animation-name属性是必须存在的，因为animation-name的值默认是none，没有动画。2、animation-duration(动画执行一次所需时间)animation-duration属性也是必须存在的，因为animation-duration的值默认是0，没有动画。3、animation-delay(动画在开始前的延迟时间)animation-delay的值可以是秒（s）或者是毫秒（ms）,默认
2021-02-27 11:15:51
421
原创 合并数组或对象的几种方法
一.合并对象注:如果有相同属性,后一个对象会覆盖前一个对象 var a = {a:'11',b:'22'}; var b = {c:'33',b:'44'};1.使用jquery的继承方法 var c = $.extend(a,b); console.log(c); //{a: "11", b: "44", c: "33"}2.使用ES6 assign var d = Object.assign(a,b) console.log(d); //{a: "11", b: "44
2020-09-07 14:04:34
4272
原创 通过jQuery改变css样式
1.addClass()可以向被选的一个或多个元素,添加一个或多个的类.例:html:<style> .big{ font-size: 40px; } .red{ color: red; }</style><body> <h1>这是一个标题</h1> <p>这是一个段落</p> <button>添加class</button></body
2020-07-24 09:48:45
609
原创 layui数据表格layui.table.render
通过一个简要的例子来介绍一下相关功能。主要我写项目中常用的属性和方法都介绍出来了，如果需要其他功能，可以看看官网。页面<table id="demo" lay-filter="demo_table_filter"></table><script>layui.use('table', function(){ var demoTable = layui.table.render({ elem: '#demo', //指定原始 table 容器的选择器或
2020-07-07 10:41:20
15935
2
原创 easyui中combobox的下拉框设置默认选中
官方文档提供的方法是直接把combobox的select方法设为要选中的值就可以了，如下：$('#cc').combobox('select', '1');可是尝试过后，并没有把下拉选项中value为“1”的选项选中，尝试很久之后，需要用combobox官方文档没有提供的方法，直接设置value就可以默认选中一个选项了，代码如下：$('#cc').combobox('value', '1');ps:value的值必须是字符串，数值型无效...
2020-07-02 11:10:39
3798
原创 css中通过定位和弹性布局设置垂直居中的方法
方式一：绝对定位方式且已知宽高position:absolute;top:50%;left:50%;margin-top:-3em;margin-left:-7em;width:14em;height:6em;方式二：绝对定位+未知宽高+translateposition:absolute;top:50%;left:50%;transfrom:translate(-50%...
2020-04-16 14:43:32
483
原创 vue-cli工作中自定义过滤器
文件结构：.├── src│ ├── filter│ │ ├── filter.js│ ││ └── main.js└── …过滤器们放在filter文件夹下filter/filter.js：这个文件主要是写了过滤器实现的方法，然后export进行导出。function filterOne(n){ return n + 10;}function filter...
2020-04-14 17:53:35
347
原创 解决koa跨域拦截的方法
记一下当出现跨域拦截时,要怎么解决.方法一:app.js中const cors = require('koa-cors');app.use(cors())方法二:router.js中router.use('*',async function(ctx,next){ ctx.set('Access-Control-Allow-Oigin','*'); ctx....
2020-02-10 17:18:05
695
原创 简单的node 后端代理服务器功能
node 后端代理服务器通过一个.js文件创建的服务器向另一个js文件创建的服务器发送请求数据.server1.jsvar http = require('http');var app = http.createServer(function(req,res){ if(req.url === '/') { http.get('http://localhos...
2020-02-04 21:30:21
214
原创 JavaScript 设置字母游戏
功能介绍：页面随机刷新一个字母，键盘按同一个字母，刷新下一个字母；如果按错，不刷新。CSS页<style>div{ font-size: 200px; font-weight: 600; color: orangered; text-align: center; margin: 0 auto;}input{ display: ...
2019-12-12 23:29:07
176
原创 变量作用域作用域链闭包
变量作用域 作用域链 闭包 this变量：作用：往内存中存储数据为什么会有作用域？因为变量需要一个运行的环境；这个环境我们叫做作用域1.全局作用域在浏览器或程序刚开始运行的时候产生的；2.全局作用域销毁：在关闭浏览器或者关闭程序时。所以：我们声明的全局变量；都是window对象下的属性所以：js中最大的对象是window，所有的数据window下活跃；所以：全局作用域中最大的对...
2019-12-06 23:27:36
102
原创 JavaScript中字符串常用的一些方法
indexOf()str1.indexOf(str2,index) :返回str2在str1中首次出现的索引值，如果没有，返回-1。index为起始索引，可以省略，默认从首位置开始查找。例：<script> var str = 'abcedfg1234'; document.write(str.indexOf('a')); //输出 ： 0 documen...
2019-12-06 23:20:54
128
原创 JavaScript表格动态获取对象数据
通过获取对象数组里的数据，创建动态表格。css:<style>*{ margin: 0; padding: 0; box-sizing: border-box;}table{ margin:0 auto; border: 1px solid #000;}table td,table th{ border:1px solid ...
2019-12-02 15:55:47
413
原创 JavaScript的执行顺序
第一步：语言分析将JavaScript中所有需要执行的代码全面检测一遍，目的是为了排除低级的语法错误；检测到错误后，一个一个的抛出错误。第二步：预编译发生时间：代码执行之前进行的操作：① 变量声明提升；② 函数声明提升；③ 如果函数执行了：a. 创建一个AO；b. 将函数体中所有声明的变量和形参提升到作用域最顶端，并且赋值为undefined；c. 将形参和实参进行统一...
2019-11-29 20:27:15
77
原创 JavaScript变量的作用域定义介绍
作用域局部作用域全局作用域JavaScript拥有函数作用域：每个函数创建一个新的作用域。作用域决定了这些变量的可访问性（可见性）。函数内部定义的变量从函数外部是不可访问的（不可见的）。局部JavaScript变量在JavaScript函数中声明的变量，是函数的局部变量，只能在函数内部访问它们。 注：不同函数中局部变量可以同名，因为在函数开始时创建局部变量，函数完成时就会删...
2019-11-29 20:18:21
149
原创 JavaScript中的数组相关方法
1. Arry.forEach()forEach()函数为每个数组元素调用一次函数。例：<script> // 用forEach()函数遍历数组 var fruits = ['Banana','Orange','Apple','Mango']; var text = "<ul>"; fruits.forEach(myFunction);...
2019-11-27 20:28:58
175
1
原创 javascript中for循环
for语句for语句中有三个表达式for语句中的各个表达式都可以省略分号分隔符不能省略结构for（<语句1：初始化循环变量>；<语句2：循环条件>；<语句3：修改循环变量的值>）{ <循环体>;}语句执行顺序：语句1>语句2>循环体>语句3>语句...
2019-11-22 17:10:46
148
原创 JavaScript不同类型运算介绍以及转换
算数运算进行算数运算时，先将其他类型数据转换成数值型，再计算，+ 除外，+进行级联运算。不同类型转换成数值型：null、false、空字符串 ‘’、空数组[] = 0；undefined、含有非数字的字符的字符串、对象、数组 = NaN 。注：如果数组只有一个元素，那么对这个元素再进行上述判断例： var x = Number( [ ‘12’ ] ) ; // x返回12运算规则...
2019-11-21 23:25:41
76
原创 JavaScript 变量命名规则及js中的关键字和保留字
命名规则：只能由字母、数字、下划线、$组成；必须以字母开头；也可以以 “$” 和 下划线 开头（不推荐）；不能使用关键字和保留字注：变量命名区分大小写JavaScript中主要的关键字关键字描述break终止switch循环continue跳出循环并在顶端开始debugger停止执行JavaScript，并调用调试函数（如果可用）do…...
2019-11-21 22:30:58
1000
原创 css 颜色渐变的方法
线性渐变background-image:linear-gradient();注意，颜色之间用逗号分开1从上到下的线性渐变(默认)css:div{ width: 200px; height:200px; margin: 0 auto; background-image: linear-gradient(red, orange);}运行图：2.从左...
2019-11-16 16:27:50
472
原创 css,特殊图案，class用法
html页<body><div class="link"> <a class="✘" href="#">Decline</a> <a class="☺" href="#">笑脸</a> <a class="◔-◔" href="#">白痴</a> <a clas...
2019-11-15 11:41:53
174
原创 css禁止属性
禁止鼠标右键：οncοntextmenu=“return false”；禁止选择：onselectstart=“return false”；禁止拖放：οndragstart=“return false”；禁止拷贝：οncοpy=document.selection.empty() 。禁止复制：oncopy = “return false”；禁止保存：，放在head里面。禁止粘贴：<...
2019-11-15 09:33:42
1800
原创 css弹性布局的三种格式
html页代码<div class="wrap"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"><...
2019-11-09 18:00:28
237
原创 css四种定位方式介绍
position属性属性值static 静态定位默认值，是文档流的一部分，不会动。relative 相对定位相对于自身原本的位置进行移动，不会脱离文档流，保留原位置空间absolute 绝对定位相对于外部父元素以及祖级元素中，第一个非static定位的元素进行定位，如果都是，就相对于html页进行定位，会脱离文档流，不保留原位置fixed 固定定位相对于根元素，页...
2019-11-09 17:34:38
84
原创 css 文本相关属性介绍
缩进文本text-indent 属性可以给所有元素第一行缩进一个长度字间隔word-spacing 属性属性值：normal :默认值，与设置0一样。字母间隔letter-spacing 属性修改字符或字母间的间隔文本装饰text-decoration 属性属性值：none underline :下划线 overline ：上划线 line...
2019-11-09 11:05:12
84
原创 分页样式组件
基础样式css页.wl-Page{ width: 100%;}.wl-pagination{ display: inline-block; margin: 0 -15px;}.wl-pagination>li>a{ display: inline-block; padding: 15px; border:1px solid #...
2019-11-09 10:54:06
391
原创 css开关样式组件
css页/* 必须input为CheckBox,class添加switch才能实现以下效果 */ input[type="checkbox"].wl-switch{ appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; width: 2...
2019-11-09 10:43:21
316
原创 css导航样式组件
基础样式 .wl-navcss页：.wl-nav{ display: block; width: 100%; /* 高度不可以受限 */}.wl-nav,.wl-nav>ul{ padding: 0 10px;}.wl-nav li{ list-style: none; float: left;}.wl-nav::after{...
2019-11-09 10:33:02
672
原创 CSS背景相关属性设置的介绍
背景色 background-color 属性背景图像 background-image 属性背景重复 background-repeat 属性 属性值：repeat：水平、垂直方向都平铺； repeat-x：图像只在水平方向平铺； repeat-y：图像只在垂直方向平铺； no-repeat：不允许图像重复背景定位 backgroun...
2019-11-09 10:13:22
112
原创 CSS清空样式
清空默认html{font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}body{width: 100%;margin:0px;}将所有标签设置为块元素article,aside,details,figcaption,figure,footer,head...
2019-10-28 19:26:04
922
原创 CSS设置浮动
float浮动left为左浮动，right为右浮动；因为设置了浮动元素会脱离文档流，不再参与流式布局，紧跟其后的元素会占据它原本的位置。注意：用到了浮动，就一定要清除浮动。清除浮动的方法通过清理浮动让父元素自动获取高度。优点：代码少，好理解；缺点：增加了多余的空标签。.clear{claer:both;}手动给父元素添加高度，父元素高度固定优点：简单明了，比较直接；...
2019-10-25 09:50:02
277
原创 @keyframes规则
@keyframes规则用来规定动画。使用需要捆绑到某个选择器上，才会产生动画效果。必须规定动画的名称和时长。用法定义一个名为myfirst的动画：@keyframes myfirst {from{background-color:red;}to{background-color:blue;}}把“myfirst”动画绑定到div元素上div{animatio...
2019-10-25 09:42:35
694
原创 css立体3D的使用
CSS立体3D的使用使用3D转换来对元素进行变化方法rotateX()：围绕x轴进行旋转，单位为度数deg。为正值时向前旋转，为负值向后旋转。rotateY()：围绕y轴进行旋转，单位为度数deg。为正值时向前旋转，为负值向后旋转。浏览器支持Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。O...
2019-10-24 19:34:50
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人