- 博客(58)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 【vue】解决 vue项目打包后线上报错无法请求cdn.jsdelivr.net相关资源问题
解决 vue项目打包后线上报错无法请求cdn.jsdelivr.net相关资源问题
2023-06-20 17:41:51
2931
原创 【Echarts】折线图/趋势图区间框选计算
针对折线图类的趋势图，以时间为横坐标，根据用户图形的区域框选可实时计算框选范围内的均值、总量或其他数据，具体实现代码如下：
2022-05-18 14:44:59
7462
2
原创 【echarts】柱状图正负值双色
具体方法如下示例：series: [ { name: 'Evaporation', type: 'bar', itemStyle:{ normal: { color: function (params) { //根据数值大小设置相关颜色 if (params.value > 0) { return 'green'
2022-01-25 16:30:21
2558
2
原创 【echarts】双Y轴设置零点刻度统一
echarts中通常用多个Y轴来表示不同量程的相关数据，由于量程不同数据不一致多个坐标的刻度也会有所不同，但根据用户需求，有时需要将两个刻度保持一致方便数据展示，具体实现方法如下：//此处为简略方法，具体代码参考第二张截图 yAxis:[ { max: value => { const {max, min} = value; const absMax = Math.max(Math.abs(max), Math.abs(min));
2022-01-25 16:20:11
4096
原创 【echarts】tooltip显示位置设置
echarts中的柱状图或折线图，tooltip默认是根据鼠标的移动而移动，视觉焦点始终是与鼠标保持一致，但有时根据用户需要会对tooltip的位置做特殊处理，让其固定在图形顶部或者鼠标的左侧，具体实现方法如下：1、tooltip显示框始终固定在图形顶部//tooltip显示框始终固定在图形顶部 tooltip: { trigger: 'axis', position: function (point, params, dom, rect, size) {
2022-01-25 15:55:53
17802
6
转载 D3.js绘制 颜色:RGB、HSL和插值 (V3版本)
颜色和插值计算机中的颜色，常用的标准有RGB和HSL。RGB：色彩模式是通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色。三个通道的值得范围都是0~255，因此总共能表示16777216(255255255)种，即一千六百多万种颜色。几乎包括了人类所能识别的所有颜色，是应用最广泛的色彩模式。HSL：色彩模式是通过色相(Hue)、饱和度(Saturation)、明度(Lightness)三个通道的相互叠加来得到各种颜色的。其中，色相的范围为0°360°，饱和
2021-06-28 11:06:56
2775
原创 layui 附件上传、预览、删除、下载
layui在开发文档中提供了 附件上传的方法upload.render(），此篇文章在此模块基础方法上扩展补充了附件预览、删除、下载的实现方法。具体如下：layui 文件/图片上传layui 相册层一、html<div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label"><span class="font-colo
2020-11-25 15:03:55
10540
6
原创 dtree.js 树结构点击父节点异步加载子节点数据
由于此次项目开发框架使用layui，里面的树结构自然想到了使用dtree,功能需求是选择省份下的企业，由于企业数据达到上万家，一次性将所有的数据加载出来会造成页面卡顿，由此想到先加载行政区划再根据点击事件获取...
2020-11-24 16:26:08
4136
原创 iframe 父子级取值
一、获取页面本身url ?后的参数/* name 参数名*/function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null;}//如获取
2020-11-24 11:51:47
362
原创 【echarts】data的值为0时隐藏label,不为0时显示
在饼图和柱状图中，我们为了图文展示更清晰经常会设置lable为true，但当有些数值为0时，label的展示在一定程度上影响了视觉效果，此方法根据值来设置lable的显示隐藏，以官网上柱状图堆砌图为例：具体方法如下： label: { show: true, color:'#333', position: 'insideRight', formatter:function (params)
2020-08-24 13:56:57
8967
原创 IE9兼容问题
本篇文章记录下我最近在兼容IE9所遇到的问题以及解决方法1、button中添加其他标签在IE9中会失效<button type='button'><input value='登录' name='submit'></button>//此写法在谷歌、360及火狐等常规浏览器中运行正常，但在IE9及以下版本，button中的input无法解析，在input中的事件无法执行，解决方式是将button标签改为其他标签，如span、div等；2、innerHtml方法IE9
2020-08-05 11:00:46
692
原创 根据当前时间动态获取上一个月的时间及获取当月的最后一天
业务需求中，经常会根据当前时间获取上一个月的时间或者当月的最后一天，由于每个月的天数都不同，为了考虑时间上的准确性我们需要做一些判断和计算，具体方法如下：/* 获取上一个月时间,返回yyyy-MM-dd字符串* getLastMonthTime('2020-04-16','date'); date类型* getLastMonthTime(new Date,'num'); //时间戳类型* */function getLastMonthTime(date, type){ var daysIn
2020-07-03 13:50:32
1801
原创 【百度地图】海量数据流畅加载并点击显示点位详情
在地图开发中，如果label或marker覆盖物数据较大的话经常会造成页面卡顿，现在使用百度地图添加海量星的方法来添加覆盖物，应用后发现，该方法是将所有的覆盖物绘制成一张图片，这样在数据加载中大大提升了加载速度，为了运行方便将该实例直接写到百度地图demo的运行台中，运行结果可直接将代码复制到百度地图示例demo中（百度地图加载海量星）具体方法如下：<!DOCTYPE HTML><html><head> <title>加载海量点</titl
2020-06-28 13:42:19
7215
原创 iframe 子级获取父级元素
//获取父级元素 parent.$(window.parent.document).find(elem)； //比如 子级页面控制父级元素隐藏 $(document).click(function (e) { parent.$(window.parent.document).find('.menuBar .menuLevel2').slideUp(); });...
2020-03-11 10:56:24
2408
原创 【百度地图】删除指定覆盖物
当百度地图中出现多个图层时，可用以下方法删除指定图层：//删除指定 var allOverlay=map.getOverlays(); if (allOverlay.length) { for (var i=0; i < allOverlay.length; i++) { if(allOverlay[i].toString() == "[obj...
2019-11-25 10:28:23
4089
原创 【百度地图】仅显示中国边界区域
本篇的主要思路是通过绘制全国的行政区划边界点来添加遮罩层从而视觉上达到只显示中国区域的效果，具体实现看代码：一、Js//绘制中国区域行政边界function drawBoundary() { /*画遮蔽层的相关方法 *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。 * 这样就做出了一个经过多次...
2019-11-19 17:04:27
10352
16
原创 【百度地图】过滤点位数据只显示行政区划内的点位数据
由于信息录入的不准确性，很多数据的经纬度会出现偏差不在自己应该所在的范围内，但为了效果完美，需要将这些数据过滤掉，这里使用了D3.js中的d3.polygonContains()方法判断点位是否在几何内：参考地址：1、D3.js官网地址2、polygonContains github示例具体实现方法如下：一、在页面中引入d3-polygon地址，具体地址可在官网中下载<script...
2019-11-15 17:38:47
798
原创 js用html2canvas.js实现包含非可视区域内容的截屏下载
由于项目开发需求，需要将表格数据以图片形式下载到本地，之前有了解到ExportPrint.js插件，可以将页面元素以图片形式下载导出，但此方法只适用于出现纵向滚动轴的页面，当有横向滚动轴时页面只会截取可视区域内容。借助网友的智慧(js截取页面内容、生成png（包括非可视区域）、下载到本地)实现了包含非可视区域内容的图片导出下载，方法如下：一、HTML// table内容为导出元素，该功能是用b...
2019-09-09 13:22:34
1925
原创 bootstrapTable根据动态因子生成动态多行表头
根据项目需要，前端需要实现根据用户选择的因子来生成动态多行表头，经测试发现，多行表头其实就是由多维数组实现，只要将自己的数据按照bootstrapTable数据格式拼接成所对应的数组就可以实现功能，本文为实现代码供大家参考：【注】前端html页面需要引入对应的库，如：bootstrap-table.js、bootstrap-table-zh-CN.js、bootstrap-table.css、...
2019-05-05 11:17:02
3564
1
原创 【百度地图】百度地图实现仿链家地图搜房功能
最近看见链家有地图搜房功能，了解了一下之后发现其实都是一些基础的百度地图功能，现模拟数据实现一下：注：用百度地图之前请引入百度地图相关库的地址和百度地图JavaScript API的秘钥，此篇中用的如下：（1）：jquery-2.2.3.min.js (2)：<script type="text/javascript" src="https://api.map....
2019-01-04 16:52:22
6500
8
原创 【百度地图】用label和marker打开百度地图信息窗体
在百度地图中用label和marker打开infoBox在写法上的不同，主要体现在两者在添加点位位置时label的point是写在LabelOptions中，如：Label(content: String, opts: LabelOptions)；而marker是Marker(point: Point, opts: MarkerOptions)。现对用法上做下总结：注意在项目中申请引用百度地图J...
2018-11-30 11:02:04
2549
原创 web开发 兼容不同的屏幕分辨率和浏览器
在web开发的过程中经常会要求根据不同的屏幕大小来做兼容，尤其是webAPP的流行和各种响应式布局，兼容不同的屏幕分辨率更是前端开发者必会的技能。本篇主要介绍用CSS 的媒体查询来兼容不同的屏幕大小和用js 来兼容不同的浏览器（主要是IE、火狐、360、谷歌、UC、QQ、百度等）。一、CSS媒体查询使用 CSS3 的@media 查询，你可以针对不同的媒体类型定义不同的样式。它的语法结构是：...
2018-11-22 10:30:05
23700
原创 【Echarts】echarts 坐标文字axisLabel根据需求换行展示
echarts 坐标文字axisLabel根据需求格式化在echart开发中坐标文本有时候受布局的限制，字数或者长度无法展示完整，这时候我们可以参考echart的官方api为axisLabel定义旋转角度，这里方法就不再做介绍，本篇主要分享一下文本内容按照需求来实现换行展示：一、JS代码 axisLabel: { interva...
2018-10-15 16:02:53
14794
原创 【JS】html5+css3+js 用定时器实现时间轴的自动播放
本篇介绍了用css3实现时间轴样式，用jq实现时间轴的自动轮播和启动暂停事件，具体代码如下： 一、time.html &lt;div class="heatMapTimer"&gt; &lt;ul class="time-line"&gt; &lt;li class="time
2018-07-23 16:21:56
4302
1
原创 移动混合开发DCloud和APICloud对比分析
最近因为项目需要，研究了一下市场较为流行的四种移动开发平台：Wex5、APPcan、Dcloud、APICloud，Wex5因为界面UI较为老旧，且语法和js有较大出入，APPcan不开源等缘故，主要深入研究分析了一下DCloud和APICloud，DCloud是专注于发展HTML5的，而APICloud是更关心iOS和Android的跨平台App开发。这两者之间的恩怨就不多做介绍了，我总结了一张...
2018-07-11 14:35:56
9255
原创 【百度地图】JS实现 百度地图窗体InfoBox打开当前窗体时关闭上一个窗体
在地图中如果存在多个label或marker,当我们点击其中一个label打开其信息窗体时，为了能清除的展示信息，我们往往希望只打开当前的内容窗体，百度地图api上没有介绍相关的方法，亲测以下方法可行： window.lastInfoBox = null;//定义上一个窗体为lastInfoBox;//创建地图窗体myLabel.clcik(function(){ var info=...
2018-06-29 15:27:04
5213
11
原创 【JS】JS 实现文件的上传下载和删除
本篇运用html的input type=”file”属性已经结合bootstrapTable的布局框架实现对文件的上传，下载和删除操作： 一：Html 这里引入了bootstarp、bootstrap-table的js和css文件，请在百度上搜索官网地址下载所需文件：/*引用文件*/ &amp;amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;
2018-06-06 14:14:33
6662
3
原创 【JS】JS 实现父子页面通过URL传值
表格数据增删改的功能实现通常需要用到父子页面传值，当用户需要用到点击表格某一行查看详情或者编辑当前表格数据时，我们用以下方法便可轻松实现传值： 一：父页面Js//此处用的bootstrapTable创建表格 { field:'NAME', title:'名称', align:"left", width ...
2018-06-04 17:25:36
1057
原创 【百度地图】BMapLib的infoBox窗体关闭按钮在移动端点击失效问题解决
BMapLib库的窗体自定义的关闭按钮在移动端由于阻止了其冒泡事件，在窗体中的点击事件都不生效，现在自己定义一个新的关闭按钮对其进行监听，利用touchend事件关闭窗体； 一、JS代码//定义窗口内容var info = &amp;quot;&amp;amp;lt;div class='plat-box qypopup'&amp;amp;gt;&amp;quot; + &amp;quot;
2018-05-29 13:36:56
4151
2
原创 【百度地图】js 实现给百度地图添加网格并加入点位数据
本篇结合百度地图的JavaScriptAPI在地图上实现网格效果，具体方法可参考百度地图的类参考文档： JavaScript API v2.0类参考： 1、首先引入百度地图API的密钥和数据js文件，百度密钥没有的同学可以在百度地图官网上自行申请，然后创建地图实例：&amp;lt;script src=&quot;Js/GridDataMap.js&quot;&amp;gt;&amp;lt;/script&
2018-05-18 17:34:23
7070
5
原创 【JS】仿adminLTE 和layerUI风格用js实现后台框架(一)
侧边栏多级菜单的实现本篇用html+css+jq实现侧边栏的菜单功能，可实现侧边以及菜单的展开隐藏效果。 一、HTML&lt;aside class="sidebar"&gt; &lt;ul class="sidebar-menu"&gt; &lt;li class="header text-
2018-05-15 11:45:58
3694
6
原创 【JS】给layer弹窗的子页面表单赋值
在系统中经常会用到表格的增删改功能，通过触发编辑按钮事件来弹出表单窗体并给表单的内容项赋值， 这里通过结合layer.js和underscope.js可以轻松的实现此效果： 一 、js代码 我这里的表格用bootstrapTable实现，了解过此插件的猿友应该能读懂，不懂的请查看官网实例，这里我截取其中的一段操作列： { field: '', ...
2018-02-23 17:25:47
11158
3
原创 bootstrap-datetimepicker日期插件月份bug问题解决
用datetimepicker 时间插件获取日期的时间区间，但在应用过程中发现月份的选择有两个月的时间偏差，比如: 开始时间选择为2017-10，那结束时间的开始时间应该是在2017-10之后，但是视图显示2017年的8、9月份都可选，阅读插件源码有两处错误，一个是650行的月份获取错误；另一个是784行的时间选择器出现错误，错将时间视图中左右两个按钮的span元素放在了月份的span元素中，这样
2018-02-01 10:57:35
6614
转载 【JS】JS 公告竖向、横线滚动效果
一：竖向滚动效果 1.html <div id="scroll_noticeMsg" class="noticeMsg"> <ul id="scroll_begin"> <li>数据一</li> <li>数据二</li> <li>数据三</li> <li>
2018-01-03 17:21:16
1873
原创 underscore.js 给表单批量赋值
在项目中经常会遇到增删改的功能，在编辑表单的时候由于表单文本数量较多一个一个赋值代码冗杂不说，也大大降低了时间效率，同事告诉一个快捷方法，特别好用，特此记录一下：首先这里需要先下载underscore.js插件，这是一款轻量级的js插件，有兴趣的同学可以了解一下： underscore.js官方文档地址 1.html <form id="EditForm" name="EditForm" met
2017-12-20 11:42:31
732
原创 【JS】JS 正则验证电话联系方式
function ValidatePhone(val){ var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;//手机号码 var isMob= /^0?1[3|4|5|8][0-9]\d{8}$/;// 座机格式 if(isMob.test(val)||isPhone.test(val)){ return true;
2017-12-19 16:42:47
17655
原创 【JS】JS 实现父子窗体相互传值的三个方法
一、在开发项目过程中经常会需要用到父页面和子页面互相传值来获取参数数据，下面提供了三种总结的比较好用的方法，本例子需要下载bootstrap-table.js、layer.js文件,具体下载地址如下： https://github.com/wenzhixin/bootstrap-table; http://layer.layui.com/; 1、html页面 （1）父页面（tes
2017-12-08 11:45:56
7692
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人