2019年08月_月桦剑士

08月 07月 04月

原创 echarts横坐标自动判断文字遮挡问题-简单记录-仅供参考

1.简介熟悉echarts的同学应该知道，echarts中的直角系图表当坐标轴为类目型（常为x轴）而且数据又特别多时，默认会隐藏掉一部分x轴文字。效果就类似于这样：然而，echarts自带的计算有时候是过于苛刻的，即使文字实际上不存在遮挡问题，当文字与文字间的间隔小于一定值时同样会触发隐藏机制，例如上面那张图，如果设置{xAxis:{axisLabel:{interval:0}}}显示出所有...

2019-08-27 15:48:28 4407

原创 echarts标题高度计算-暂不支持富文本-类似于图例

1.简介本文和我的另外一篇文章计算echarts图例高度的十分类似，也是对echarts组件的分析，在不考虑富文本的情况下，标题高度的计算比图例要简单的多。这里我同样用DOM元素完成对title组件的模拟。2.代码//代码比较简单，就不解释了。注意：代码中的var chart = globalTools.data.echartContainer;和var chartDOM = global...

2019-08-27 14:01:14 396

原创 echarts图例高度计算-横向图例-legend组件高度模拟计算-冷知识

1.简介echarts是百度发起的一个开源项目，在开源中国和github上都可以找到对应的文档和源代码。如果你对使用echarts图表绘制的要求并不高那么其实只要去看看echarts的教程再照着官方实例写几个例子就应该足够了，不过，如果你需要对echarts做很多自定义设置，那么就需要对echarts足够熟悉才行。本文echarts版本4.2.7。1.1补充介绍本文属于echarts的进阶...

2019-08-27 11:37:13 4215 2

原创 jsp组件封装-简单记录-依赖于iconfont字体文件

1.简介这里一个基于jsp的简单组件封装，主要是给自己做一下记录，以后万一有其他类似的需求就不需要从头开始构思。不知道对于其他人有多少参考意义。2.代码<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><style> .textconfirm-background{ ...

2019-08-26 19:42:09 419

原创纯js组件封装-模块化编程-简单实现

1.简介在网页开发中，弹窗是一个比较常见的东西，很多用户的交互信息的提交反馈一般都是由弹窗来完成。我最近就刚好写了一个需要用到很多风格类似的弹窗的网页。为了提高开发的速度并且增强扩展性，我就写了一套比较简单的弹窗组件，弹窗中某些图标依赖于字体文件（来源iconfont和UI小姐姐），不过还是比较有参考意义的。2.代码var d = { //获取一个含有默认样式、标题和关闭确定取消按钮的空弹...

2019-08-26 19:20:46 747

原创 js小工具-16进制颜色值转rgb

1.简介css中颜色有多种书写方式，其中16进制写法和rgb的写法应该是比较通用和常见的了。这个代码的主要作用是把16进制的颜色值(16进制又叫hex)转成rgb形式的，如果输入的值已经是rgb或rgba形式的则原样返回2.代码var dc = { hexToRgb: function(hex){ var result = null; var r,g,b; //如果已经是rbg...

2019-08-26 18:15:19 356

原创 js小工具-模拟计算一行文本的宽度

1.简介这个小工具应该一般人都用不到，我也是在完善项目的echarts相关功能的时候才会用到这么偏门的东西。2.代码实现代码就比较简单啦，不解释var dc = { //计算一行字符串在页面上占用的宽度 getStringWidth: function(str,styles){ //影响文字宽度的样式主要是font-size和font-weight，styles中没有这两个属性，则...

2019-08-26 18:04:23 463

原创 js小工具-使用dom元素模拟placeholder

1.简介placeholder是input输入框的一个属性，熟悉网页开发的同学应该都知道它，它可以为文本框增加一个文字提示，并且在文本框开始输入或聚焦时自动隐藏，然而，placeholder在不同的浏览器中默认的样式和出现的时机都是不确定的。如果UI姐姐告诉你她希望这个地方就是统一的样式而你又不想拒绝的时候，那就得想办法去实现它啦。2.代码实现这里用一个span来显示placeholder的...

2019-08-26 18:02:04 454

原创 js小工具-给多行文本框添加字符统计

1.简介在网页开发中，多行文本框是一个比较常见的东西，标签名为textarea，熟悉textarea的朋友应该知道，textarea有一个maxlength属性，可以限制文本框的输入字符数。在开发的需求里，字符限制和字符统计几乎是捆绑出现。因此我就写了一个字符统计的小工具。2.代码实现//其实我感觉这个代码也不是很难，好像没什么好解释的，要不大家看着用就好了。var dc = { //给...

2019-08-26 17:53:35 396

原创 js小工具-点击清空输入框-简单记录-待完善

1.简介在网页开发的过程中输入框是我们经常需要打交道的东西，一些与输入框相关的小工具也经常需要我们重复性地编写，例如用于点击搜索的输入框时常需要一个一键清空的按钮，且每个按钮都大同小异，这样的东西如果不分离出来的话，那么当页面增多时代码的改动就会很多。2.代码实现注意：这里的代码依赖于字体文件，字体可以去iconfont网站上找，当不存在字体文件时，图标会变成一个方框，虽然丑了点，但是并不影...

2019-08-26 17:36:19 902

原创 js实现hover样式，适用于只需要为单个元素添加少量样式的情况

1.简介在网页开发中一个元素的鼠标悬停样式常常由伪类:hover来控制，而当我们用js生成一个DOM元素时想要给它添加hover样式的话就显得比较麻烦，常规方法是先给它添加一个类名，然后往页面中新增一个style便签，标签内定义伪类hover的样式。2.代码实现这里采用mousenter和mouseleave的监听来实现hover样式。代码如下:var dc = { //设置元素的hov...

2019-08-26 17:24:47 3517

原创 js小工具-快速给样式添加兼容性前缀如-webkit-等

1.简介做PC段网页开发市场会遇到一些兼容性问题，一些常用的css3样式经常需要添加兼容性前缀，如transition: all .2s;在实际开发中css里面的写法经常是:selector{ /*分别兼容4种浏览器*/ -webkit-transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; -moz...

2019-08-26 17:03:25 765