2019年09月_祈澈菇凉

原创 jQuery实现一个穿梭框

需求：点击选中左侧内容，把左侧的内容放到右侧的框里面，可以一次放入一个，也可以一次放入多个或者全部，同样，右侧也一样。写了一个简单的demo，仅供参考：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>穿梭框&...

2019-09-26 18:51:15 3252

原创获取ztree树的选中子菜单信息并且提交给后端

前面写过，ztree实现一棵树的文章，https://www.jianshu.com/p/c2b919e91e91现在要用ajax+json模拟交互效果需求：1：请求json数据，渲染在界面，形成一棵树2：获取选中的子菜单，并且将选中的信息传递给后端图片.png代码：（css比较简陋，需要的可自行编写）<!DOCTYPE html><ht...

2019-09-25 17:22:50 973

原创 jQuery动态生成input填写时间值并且提交给后端

今天写的一个demo，关于jQuery动态生成input填写时间值并且提交给后端。需求：1：点击新增按钮的时候，会无限动态生成input输入框，可以输入不同的时间。2：点击提交按钮的时候，将生成的这些时间提交到后端。参考代码如下所示：<!DOCTYPE html><html> <head> &l...

2019-09-25 14:57:19 1508 3

原创 Vue移动端UI框架

自从Vue成为前端的主流框架之后，各家UI框架也越来越多，今天重点聊一聊移动端的那些框架吧，Vue移动端框架到底哪家强？以下排名不分先后，开发过程中根据自己的具体业务需求来做选择。1.Vux中文文档：https://vux.li/#/在线预览：https://vux.li/demos/v2/?x-page=v2-doc-home#/VUX 是基于 WeUI 和 Vue....

2019-09-23 19:42:10 1388

原创 Echarts饼状图交互数据

前面写到一个关于Echarts饼状图交互数据的例子，但是当时name是写死的，现在的value和name都是需要从后端获取，然后渲染在界面，大致的json数据是这样的：模拟一个json格式的数据：{"list":[{"value":"管理","name":40},{"value":"炼钢工","name":30},{"value":"焊工","name":36},{"va...

2019-09-23 14:33:51 1631

原创 jeDate日期控件在项目中实际应用

需求：1：可提供日期不超过当前日期或者（验证选中日期是否超过今天）2：日期验证3：input表格里面获取当前系统默认日期4：选着日期点击选中后点确定按钮才关闭5：验证结束日期大于开始日期<!doctype html><html> <head> <meta charset="utf-8"> ...

2019-09-19 11:19:18 356

原创 4个免费代码自动生成神器

日常写代码，是一件非常需要耐心的事情，尤其是那些没有技术含量重复使用到的一些代码排列组合，比如前端的一些html和css布局，简单繁杂，这个时候就会使用到一些免费代码自动生成神器，让我们提高效率。1：在线搭建框架-懒猴子CG官方网址：http://cg.lazy-monkey.com/懒猴子代码生成器支持Java,Vue,React,Python等语言的框架搭建和规范代码生成...

2019-09-18 15:55:11 6795 1

原创 jQuery鼠标悬停的时候图片替换

需求：当鼠标放在按钮上的时候，按钮图片会变成另外一张图片，但鼠标离开的时候，图片恢复原本状态。大致实现demo是这样的：其实就是一个鼠标划过事件，来控制css的背景图片的属性。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <t...

2019-09-18 15:29:09 2624

原创 ajax+json实现echarts多个统计图显示

前端时常会遇到这样的问题，有一个单独的模块用作统计图，将多个折线或者柱状图，混合使用，下面的例子是用ajax+json模拟了调用接口实现echarts多个统计图显示。样式布局暂时就不放在上面了，以下是从项目里面复制过来的一个小的demo，代码仅供参考。<!DOCTYPE html><html> <head> <...

2019-09-18 15:24:37 970 2

原创 layer弹框删除ztree节点非阻塞问题解决

在ztree里面，删除一个节点的时候，会弹出一个弹框询问，是否删除，本来用的是网页自带的confirm弹框，根据公司的业务需求，要用到layer弹框删除，这个时候，就出现了一个问题。问题：触发删除事件之后，弹出layer弹框，但是没有点击确定或者取消，就已经将选中的节点删除了。原因：layer.confirm不能阻塞事件（confirm是网页自带的，有阻塞事件），不管有没有确定...

2019-09-17 16:53:03 441

原创 Echarts柱状图折线图混合使用

前面用到的更多的是单个统计图，有些统计图里面，使用柱状图折线图混合使用的，下面写的是用ajax+json本地模拟数据，发送请求，渲染出一个柱状图折线图混合图表。一个练手的小demo，仅供参考：<!DOCTYPE html><html> <head> <meta charset="utf-8"&g...

2019-09-16 15:54:13 5989

原创 echarts饼状图数据交互

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>五分钟上手之折线图</title>  <script src="http...

2019-09-11 15:59:38 1554 2

原创 ajax+json模拟一个页面多个统计图数据交互

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>五分钟上手饼图</title> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/...

2019-09-11 15:58:07 499

原创 jquery鼠标悬停的时候图片改变

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>柱状图折线图混合使用</title> </head> <style> #remove { width: 40px; height: 20px; ...

2019-09-10 16:38:33 1664

原创解决layer弹框加载时闪白屏功能

在打开layer弹框的时候，如果遇到网络较慢，会有一个加载的过程，默认为白色，如果项目的整体基调为其他的颜色的时候，会显得比较突兀，这个时候，需要找到layer.css源码中的这部分代码，加以修改。.layui-layer-load { background: url(default/loading-0.gif) center center no-repeat #0d1c2e;}...

2019-09-09 21:07:50 1713

转载柱状图折线图混合使用

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>柱状图折线图混合使用</title>  <script src="https://cdn.bootcss.com/echart...

2019-09-09 17:21:29 1279

原创 echarts折线图折线点大小，颜色，折线的颜色设置

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>五分钟上手之折线图</title>  <script src="https://cdn.bootcss.com/echarts...

2019-09-09 15:38:17 12777

原创 echarts设置柱状图柱状图粗细大小

主要属性：　 //设置柱状图大小 barWidth: 20,demo:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>柱状图大小</title>  <scr...

2019-09-09 15:22:15 38444 1

原创 echarts柱状图实现颜色渐变效果

先上图最近要求实现一个数据统计的界面，就是那种很多个统计图在一个界面显示，并且要做出十分炫酷的效果，必然会用到了渐变风格的设置属性。写一个小的demo：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>柱状图渐变</title> <...

2019-09-09 15:16:35 18319 5

原创 echarts下载图表按钮隐藏

在有些echarts图表里面，并不需要下载按钮下载图表的功能，这个时候，可以选择去掉或者隐藏起来。解决办法很简单，找到toolbox属性，注释掉即可。/* toolbox: { feature: { saveAsImage: {} } },*/...

2019-09-09 14:33:01 14581

原创 css大屏滚动展示样式

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> html { background: #000; } .overAll { back...

2019-09-09 11:20:13 1987

原创 echarts折线图线条颜色和区域颜色设置

series: [ { name:'近七日收益', type:'line', areaStyle: { normal: { color: '#091e3b' //改变区域颜色 } }, itemStyle: { normal: { colo...

2019-09-08 22:36:33 41090

原创 bootstrap table分页悬停颜色改变

.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus { color: #2a6496; background-color: #0a2b5e; border-color: #ddd}

2019-09-08 21:47:43 1248 1

原创 jQuery动态增加一行元素和删除一行元素

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></scri...

2019-09-08 21:02:36 1704

原创 css实现溢出部分文字成为省略号

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></scri...

2019-09-08 20:41:04 272

原创 select下拉框默认option为灰色，选中option颜色为白色

select下拉框默认option为灰色，选中option颜色为白色代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <scrip...

2019-09-08 20:30:52 9866

原创解决bootstrap table刷新加载时白色闪屏问题

根据项目需要，把bootstrap table都改成了蓝色的风格，但是今天测试的时候发现了一个小的问题。每次刷新加载的数据的时候，总是会有一闪而过的白屏。很影响交互效果，这个时候，需要找到bootstrap table插件里面的默认的css。.fixed-table-loading { display: none; position: absolute; top: 42px; right...

2019-09-06 10:07:11 2296

原创 echarts叠堆折线图的标题的位置颜色

主要实现代码legend: { y: '35px', textStyle: { //图例文字的样式 color: 'red', }, },<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></t...

2019-09-05 20:39:21 4887

原创点击增加按钮，添加input，超过三个则增加按钮隐藏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/boot...

2019-09-05 20:38:42 897 1

原创 Echarts饼状图显示的颜色修改

指定PIE饼图扇形每个扇面的颜色，修改每个data的ItemStyle对象的color属性即可。{value:235, name:‘买衣服’,itemStyle: {color: ‘#9966ff’}}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>五...

2019-09-04 18:15:09 20363

原创 CSS自定义滚动条样式

代码.ztree { background: #0b2b5f; padding-top: 10px; height: 689px; overflow: auto;}.ztree::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px...

2019-09-03 14:41:16 611

原创 ajax请求模拟json数据并且拼接到html

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>告警列表</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=...

2019-09-03 14:39:44 2000

原创点击按钮，新增输入框，再点击按钮，删除输入框

需求：点击新增按钮的时候，会出现一个新增的输入框，按钮文字新增变成删除，再次点击删除按钮，出现的输入框隐藏，按钮文字变成新增字样。大致效果是这样的：为了更好的呈现效果，这里放一个类似的demo。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>&lt...

2019-09-03 14:38:55 2811

原创 jQuery滑块拖动控制数字的增加和减少

<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>jQuery滑块拖动...

2019-09-03 14:38:07 1239

原创怎么查看前端表单提交到后台的所有参数

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/cs...

2019-09-03 14:37:34 4344 1

原创点击添加按钮弹框动态添加内容并且拼接在页面

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitte...

2019-09-03 14:36:44 3124 1

原创点击button页面重新加载刷新

今天遇到一个问题，在弹窗里面，点击提交按钮的时候，会出现一次页面刷新，本身网页的背景颜色设置为深蓝色，这一次刷新就会出现闪白屏的效果。算是一个bug一开始不知道是什么情况。后面发现了，原来是自己的button按钮出现的问题我是这样写的<button>添加</button>细心的小伙伴可能发现了，我没有给给button添加type=“button”属性修改一下...

2019-09-03 14:35:56 3856

原创 bootstrap table+layer实现一个表格删除

当选着删除按钮的时候，我们一般都会使用confirm属性```// 删除按钮事件 $("#remove").on("click", function() { if (!confirm("是否确认删除？")) return; var rows = $("#mytab").bootstrapTable('getSelections...

2019-09-03 14:30:51 575

原创 layer弹框右上角关闭按钮的样式

打开layer右上角的叉号的审查元素，可以看到运用的是CSS 图像精灵(css sprites定位技术），通常是为了减少网页http请求，加快页面加载速度，提高页面的性能(适合小图) 。在这张图片上，真好有符合设计师需要的图标，最后一个蓝色的叉号按钮。需要用到其中之一的叉号按钮，来改变layer弹框右上角关闭按钮的样式，只需要在源代码里面修改一下：需要打开插件css源代码layer.cs...

2019-09-03 10:40:30 6693

原创免费视频课程

1：flutter移动电商实战免费全套教程https://www.bilibili.com/video/av624191282：开课吧-web前端全栈架构师六期https://www.bilibili.com/video/av603494613：2019最新nodeJS从入门到大神【千锋Web前端】https://www.bilibili.com/video/av595020244：...

2019-09-02 12:11:55 515 1

空空如也

空空如也