- 博客(93)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 Web前端技术 Web学习资料 Web学习路线 Web入门宝典（不断更新中）
第一章 技术与规范与JavaScript库 1.NodeNode.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎。相当与JDK。Github:https://github.com/nodejs/node官...
2017-11-09 13:41:22
13273
8
原创 svg图片 填充颜色
需求一张全灰色的svg图片，根据所占的百分比用蓝色填充方法1. svg蒙版 + 背景渐变（控制渐变函数中间的百分比即可达到效果）mask-image: url(mask.svg);mask-size: 100% 100%;-webkit-mask-image: url(mask.svg);-webkit-mask-size: 100% 100%;background: -webk...
2019-03-11 20:27:00
5551
原创 小知识积累（不断更新中）
判断变量的类型（数组，对象）1.tyopof：不推荐，因为无法区别数组与对象，数组是对象的子对象typeof([])“object”typeof({})“object”2.instanceof：可以使用var a = []a instanceof Objectfalsea instanceof Arraytruevar a = {}a instanceof Object...
2019-02-25 11:33:47
550
原创 玩转exchange（查找邮件，修改邮件，发送邮件）
背景：每天早上需要发站会纪要，纪要内容为组员昨日的工作完成情况，工作完成情况需要从每个组员的exchange邮件中选择昨日发的日报邮件，提取信息，因组员很多，每天这种重复的复制粘贴操作很麻烦，就想到了用java写个程序来完成这个事。概念：exchage 与 outlookExchange是服务器端的软件，而Outlook是其客户端的软件。只是Outlook不仅仅可以作为Exchange的客...
2019-01-21 20:37:31
7043
1
原创 遮罩层上滚动，使下方的列表随之滚动
效果遮罩层为一张边框样式图（如下图）：边框样式遮罩层显示在最上方，然后是中间的列表，最下层是一个透明黑色遮罩层，滚动鼠标滚轮，能控制列表滚动实现原理注册最上面遮罩层的滚动事件，拿到滚动滚动方向，然后控制列表滚动的方向和距离上代码注册事件/** * 增加滚轮滚动事件（暂时只实现了chrome的滚动效果） * @param modalDomId 遮罩层domI...
2018-07-27 15:01:33
1269
1
原创 react fireworks 烟花特效
老样子，先上图（mock数据）1.实现方法 引入自己写的react烟花库：react-fireworks ，详细使用方式见： github：https://github.com/liuyuqin1991/react-fireworks/tree/master...
2018-06-22 18:45:55
2700
原创 react 自定义的数字样式滚动效果
老样子，先上图（mock数据） 1.实现方法引入countup.js数字滚动插件的react版本react-countup，github：https://github.com/glennreyes/react-countup 自定义formattingFn方法2.具体实现：JS://引入react-countupimport CountUp from 'react-...
2018-06-21 11:49:59
7571
3
原创 create-react-app axios 多个域名环境cors跨域
1.前端设置前端其实在跨域上不需要进行任何设置，直接使用axios的官方示例即可//axios.defaults.withCredentials =true;//让ajax携带cookie (这个必须要，否则无法跨域携带cookie)axios.get('/user?ID=12345') .then(function (response) { console.log(res...
2018-06-19 15:10:30
4698
原创 create-react-app 引入less与sass
引入less1.安装react-app-rewired，react-app-rewire-less，babel-plugin-import命令行： - npm install react-app-rewired –only=dev - npm install react-app-rewire-less –only=dev - npm install babel-plugin-i...
2018-06-08 17:29:48
4385
2
原创 create-react-app JS里使用图片
1.JS加载图片import img from '../../image/xxx.png'2.JS使用图片const item = [{ type:"bar", barGap:"5%", barMaxWidth:"20", barMinHeight:"10", itemStyle:{ normal: { label:{ sho...
2018-06-04 11:12:58
2509
原创 jquery中stopImmediatePropagation和stopPropagation
案例：需求：当class为shop-select-no时，点击区域只执行shop-select-no的点击事件；当class为shop-select-yes时，点击区域只执行shop-select-yes的点击事件；HTML：<div class="shop-select-no"></div>JS：$('#main').on('click','.shop...
2018-05-04 18:01:15
509
原创 handlebars 多状态判断输出，html转义or不转义
问题： 当在handlebars模板遇到分状态status=1,2,3,4,5…显示不用的状态label或者按钮时怎么办？比如这样再比如这样解决办法： handlebars本身是没有办法的，只能借助handlebars的一个神奇功能：Helpers1.模板：<span class="export-text"> {{checkStatus status...
2018-04-11 16:20:47
2826
原创 bootstrap-datepicker 月份选择 完全指南
需求日期选择框只能选择月份，且只能选择只能是当前月份前12个月到当前月份，且可以动态显示与删除日期选择框插件所用插件库：bootstrap-datepicker Github：https://github.com/uxsolutions/bootstrap-datepicker 官方文档：https://bootstrap-datepicker.readthedocs.io/e...
2018-03-22 10:30:20
18700
6
原创 crypto-js aes加解密
需求服务端进行AES加密再base64编码，然后返回前端，前端需要进行相应的解码与解密库选择前端：crypto-js 服务端：jdk的javax.crypto服务端代码//AES加密再base64编码方法public static String encodeAESAndBase64(String content, String key){ byte[] ...
2018-02-22 15:33:53
5826
1
原创 video.js 视频直播前端展示
原理视频直播的流程原理图如下： 大致过程（摘自知乎：https://www.zhihu.com/question/37887655/answer/104444735）：流程如下：1.数据采集： 摄像机及拾音器收集视频及音频数据，此时得到的为原始数据 涉及技术或协议： 摄像机：CCD、CMOS 拾音器：声电转换装置（咪头）、音频放大电路 2.前处理： 主要处理美颜、...
2018-02-11 13:31:06
28200
1
原创 echarts toolbox修改默认按钮功能
背景业务要求一个图表默认展示堆积柱状图，点击切换折线图按钮后，显示平铺折线图实现1. 原理官方没有对这个配置项做详细介绍，就一句话——option 可选，可传入切换是动态修改的配置，将复写series内的数组项 ，不怎么懂，只好研究源码：toolbox.js 第1150行： _defaultMagic : function(cType1, cType2) {
2018-01-18 17:13:29
6154
1
原创 Shell 自动化编译打包
背景目前项目从mac上发布到测试环境需要经过上面的6个步骤，都是通过人工输入的shell以及git命令完成的，即便现在再熟悉了，也需要花个几分钟来编译打包，所以基于此编写了一套shell脚本来完成上述的6个步骤，达到自动化编译打包的目的。代码以下的huiyan-front 为源码库，huiyan_web为发布库#!/bin/sh# yf-huiyan.sh# ## Created by
2017-12-20 17:03:45
1475
原创 React Ueditor 数据交互
集成集成方法见：http://www.jianshu.com/p/d5d5ee66e733 ，这篇文章讲的很详细交互实例1：及时反馈输入实现：原理： 在ue组件中创建监听selectionchange事件，并且在事件中调用从父组件继承的回调函数，来及时响应到父组件中。1.Ue组件：import React, { Component, PropTypes } from 'react';class U
2017-12-19 21:43:47
3751
4
原创 React 动态增加，删除，上下移动dom <li><td>
思想在react的世界里，都是状态变更（数据变更）来驱动dom变化，动态添加dom不像以前用jquery一样append一个<li>或者一个<td> 这样了，而是通过装载<li> 或者<td> 数据数组[]来动态添加dom，下面的例子实现使用了antd的组件库 参考：https://ant.design/components/form-cn/#components-form-demo-dynami
2017-12-19 16:41:51
21277
3
原创 echarts 图表通用工厂配置类
背景当项目中所用图表过多，且图表种类也很多（例如大数据展示系统等），每一个图表都进行一套初始化配置会配置的很繁琐，代码缺少可复用性，重复工作过多，基于以上原因，写了一套通用配置工厂类，使用时调用初始化方法，如果需要定制化，直接在配置工厂里添加定制化方法即可，这样能极大的减少重复代码，复用性也更高配置工厂类/** * echarts 通用全局配置 * * @author l
2017-12-11 13:43:08
978
原创 gulp 自动化构建组件集合
1.node-hbsfy和node-pugify borwserify 支持 require handlebars模板及jade模板 Github： https://github.com/epeli/node-hbsfy https://github.com/domenic/jadeify2.node-glob 使用glob来返回目录中所有子文件（文件或文件夹） Github： htt
2017-11-22 17:29:24
1571
原创 main-bower-files <gulp插件>
概念通过读取并分析bower.json文件里override属性里main路径下定义的插件及相关依赖，返回一个文件数组。Githubhttps://github.com/ck86/main-bower-files安装$ npm install –save-dev main-bower-files使用1. 直接使用var gulp = require('gulp');var mainBowerFil
2017-11-21 17:26:13
992
原创 gulp-filter <gulp插件>
概念gulp.filter可以虚拟文件流中过滤特定的文件，可以当做是gulp.src的二次过滤，并且还可以restore操作恢复过滤前的gulp.src一次过滤的虚拟文件流。安装$ npm install –save-dev gulp-filter使用1.只过滤文件 You may want to just filter the stream content:const gulp = requir
2017-11-14 17:48:24
1412
3
原创 gulp.order <gulp插件>
概念： The gulp plugin gulp-order allows you to reorder a stream of files using the same syntax as of gulp.src，这是官方定义，简单来说，就是按给定的顺序整理需要处理的文件集。 用法：var order = require("gulp-order");var coffee = require(
2017-11-09 13:34:45
923
原创 gulp.spritesmith <gulp插件>
概念spritesmith的作用就是拼接图片并生成样式表，并且还能输出SASS,Stylus,LESS甚至是JSON。github地址：https://github.com/twolfson/gulp.spritesmithGetting Started1. Install the module with: npm install gulp.spritesmithvar gulp = requir
2017-11-02 15:25:03
1344
2
原创 百度地图 省市区县 信息展示
先上效果图（PS：数据为mock数据）： 1.一级地图 2.二级地图 3.三级地图 、 4.四级地图 概述效果图是不是有点多呀，不过能看到这里的估计这些效果图就是你们想要的效果啦，好，下面就来介绍一下1. 功能概述 1.展示所有省份门店汇总信息，且门店数越大，标记越深，标记越大（热力效果） 2.悬停标记，展示标记对应的省市区县的详细信息，并显示该省市区县的行政区划 3.点击
2017-09-21 15:10:47
29669
31
原创 腾讯地图 省市区县 信息展示
话不多说，先上图： 1.点击省份显示市级信息标记，点击市显示区县信息标记 2.缩放到市级级别时显示市级信息标记，缩放到区县级别时显示区县信息标记 （PS：此技术也可以用来开发仿滴滴打车软件里的显示附近车辆位置等功能的开发）技术选取地图插件选择腾讯地图（公司方面的原因），标记选择腾讯地图自带的覆盖物标记（腾讯自带的点聚合可以实现聚合显示数量，但功能不适合此功能开发）...
2017-09-11 14:19:08
14075
4
原创 Bootstrapvalidator 前端自定义验证和ajax远程访问后端验证
概述Bootstrapvalidator是一款bootstrap风格的表单验证插件，拥有非常强大的验证功能，如果系统使用的是bootstrap，那么验证插件非此莫属。 Bootstrapvalidator的github地址：https://github.com/nghuuphuoc/bootstrapvalidator/ Bootstrapvalidator的API文档：http://formv
2017-09-05 20:45:58
8442
原创 Axure 按钮多事件触发
不多说，先上效果图：这里”+”号实现的功能有：1.显示下面的表格 2.更换图标具体操作拖一个”动态面板”，范围自定义到icon大小拖一个”button”，右侧属性中，右键添加鼠标点击用例，在弹框中选择”切换可见性”，勾选下方要显示/隐藏的组件，可见性选择切换，然后确定双击，添加两个状态（一个加号状态，一个减号状态），点击确定（或者在右下角大纲页面添加）右下角双击创建的第一个状态，将”+”对应的
2017-08-28 15:34:27
18452
转载 gulp-usemin <gulp插件>
概念用来将HTML 文件中（或者templates/views）中没有优化的script 和stylesheets 替换为优化过的版本gulp-usemin根据预先在html文件（或者其它模板/视图中的文件）中声明好的blocks来执行一系列任务（例如合并文件并重全名、排除一些只在开发过程中引入的脚本以及将css和js中的代码提取出来内嵌在html文件中）来处理未优化的样式和脚本。然后我们可以通过g
2017-08-25 15:35:03
616
原创 Json数据导出Excel（IE10支持）
概述一般从后台接口拿到的是json数组，需要导出Excel，分两步：一、将json数组转化成可以导出excel的json数组，二、利用一个方法函数将json数据导出excel1.转化Json1.1 当从后台传到前端的json格式为[{},{},{},{}]，例如：[{username:123,password:123},{username:234,password:234}] /** *
2017-08-16 17:18:23
4775
1
原创 datatable excelHtml5 自定义列格式（百分比保留两位小数）
概述使用dataTable的excelHhtml5按钮插件做导出excel时，需要自定义数据格式，官方提供了67种数据格式可以选用，详见：https://datatables.net/reference/button/excelHtml5，但如果都不符合业务要求，则需要自定义数据格式，比如百分比保留两位小数，就需要修改buttons.html5.js源码，本文选用DataTables-1.10.15
2017-08-14 16:16:46
4264
原创 Handlebars.js if 功能扩展
在使用Handlebars模板时，由于在模板中if判断很多时间无法满足需求（if好像目前只支持对象为否为空），所以需要对if进行功能扩展，这里需要用到handlebars的helper类库，下面以两个数比大小为例来说明1.定义比较大小的方法 //这里需要引用Handlebars的运行时组件库 let Handlebars = require("handlebars/runtime")[
2017-07-26 14:48:02
3447
原创 bootstrap中下拉菜单点击后不关闭的方法
bootstrap中常用到的下拉菜单dropdown-menu默认是当点击下拉菜单的任一位置就会关闭下拉菜单框了，这显然达不到很多用户需求，如何实现当点击需要点击的地方后才关闭下拉框呢，下面来简单介绍下方法，比如要做一个下拉框筛选查询，下拉菜单展示图如下： 解决方法： 指定要操作的元素的click事件停止传播—定义属性值data-stopPropagation的元素点击时停止传播事件 //
2017-07-25 17:47:44
8946
2
转载 jQuery基础（样式篇，DOM对象，选择器，属性样式）
jQuery基础（样式篇，DOM对象，选择器，属性样式）$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。$(document).ready(function() { 内容 });1.jQuery对象与DOM对象jQuer
2017-07-25 16:28:43
469
转载 三种方法实现js跨域访问（转载）
javascript跨域访问是web开发者经常遇到的问题，什么是跨域，一个域上加载的脚本获取或操作另一个域上的文档属性，下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 h
2017-07-20 16:03:47
550
转载 ES6循环数组新方法for-of（转）
历史我们如何遍历数组中的元素？20年前JavaScript刚萌生时，你可能这样实现数组遍历：for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);}自ES5正式发布后，你可以使用内建的forEach方法来遍历数组：myArray.forEach(function (value) {
2017-07-19 17:06:49
4023
原创 HTMl5内置存储sessionStorage和localStorage
概念● sessionStorage：HTML5内置客户端缓存，缓存级别为会话级，会话完毕则消失 ● localStorage：HTML5内置客户端缓存，缓存级别为永久级，除非手动清除，否则永不会消失特点： 做为HTML5新特性，被广泛应用于客户端缓存技术。两者虽然对存储的内容大小没有限制，但是存入的东西都被转换成了字符串，也就是说无法存入数组或者对象，就算存入了也会被转化为字符串。不过实际
2017-07-14 14:22:18
525
原创 Jquery DataTables buttons扩展-导出excel
buttons概念Buttons提供一套给用户添加自定义按钮的特性，让按钮看起来和表格是一个整体。Buttons提供了一些基本的按钮，比如打印，导出之类的按钮，也提供了API让用户自己扩展按钮，触发自定义的操作。当在DataTable中显示数据时，对于终端用户来说，他们有能力从DataTable中获取数据，并将其提取到一个文件中，以便他们在本地使用。这可以用基于HTML5的按钮或Flash按钮来完成
2017-07-11 16:08:09
28593
2
转载 Gulp-Node.js界的Jenkins 入门
Gulpgulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器， 它能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合
2017-06-14 14:54:41
1079
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人