Web前端技术 Web学习资料 Web学习路线 Web入门宝典(不断更新中)

第一章 技术与规范与JavaScript库 1.Node Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎。...

2017-11-09 13:41:22

阅读数 4006

评论数 4

svg图片 填充颜色

需求 一张全灰色的svg图片,根据所占的百分比用蓝色填充 方法 1. svg蒙版 + 背景渐变(控制渐变函数中间的百分比即可达到效果) mask-image: url(mask.svg); mask-size: 100% 100%; -webkit-mask-image: url(mask.sv...

2019-03-11 20:27:00

阅读数 116

评论数 0

小知识积累(不断更新中)

判断变量的类型(数组,对象) 1.tyopof:不推荐,因为无法区别数组与对象,数组是对象的子对象 typeof([]) “object” typeof({}) “object” 2.instanceof:可以使用 var a = [] a instanceof Object false a i...

2019-02-25 11:33:47

阅读数 53

评论数 0

玩转exchange(查找邮件,修改邮件,发送邮件)

背景: 每天早上需要发站会纪要,纪要内容为组员昨日的工作完成情况,工作完成情况需要从每个组员的exchange邮件中选择昨日发的日报邮件,提取信息,因组员很多,每天这种重复的复制粘贴操作很麻烦,就想到了用java写个程序来完成这个事。 概念: exchage 与 outlook Exchange是...

2019-01-21 20:37:31

阅读数 1003

评论数 0

echarts大制作:绚丽地图

话不多说,先上图 实现: 前提: 引入最新版的echarts(npm install echarts --save) 引入自定义地图配置类CommonEchartsConfig(https://github.com/liuyuqin1991/ecf) 引入中国地图Geo数据ChinaJson,...

2018-11-01 11:39:08

阅读数 328

评论数 0

遮罩层上滚动,使下方的列表随之滚动

效果 遮罩层为一张边框样式图(如下图): 边框样式遮罩层显示在最上方,然后是中间的列表,最下层是一个透明黑色遮罩层,滚动鼠标滚轮,能控制列表滚动 实现原理 注册最上面遮罩层的滚动事件,拿到滚动滚动方向,然后控制列表滚动的方向和距离 上代码 注册事件 /** * 增加滚轮滚...

2018-07-27 15:01:33

阅读数 310

评论数 1

react fireworks 烟花特效

老样子,先上图(mock数据) 1.实现方法 引入自己写的react烟花库:react-fireworks ,详细使用方式见: github:https://github.com/liuyuqin1991/react-fireworks/tree/master...

2018-06-22 18:45:55

阅读数 415

评论数 0

react 自定义的数字样式滚动效果

老样子,先上图(mock数据) 1.实现方法 引入countup.js 数字滚动插件的react版本react-countup,github:https://github.com/glennreyes/react-countup 自定义formattingFn方法 2.具体实现: ...

2018-06-21 11:49:59

阅读数 2401

评论数 2

create-react-app axios 多个域名环境cors跨域

1.前端设置 前端其实在跨域上不需要进行任何设置,直接使用axios的官方示例即可 //axios.defaults.withCredentials =true;//让ajax携带cookie (这个必须要,否则无法跨域携带cookie) axios.get('/user?ID=12345'...

2018-06-19 15:10:30

阅读数 1939

评论数 0

create-react-app 引入less与sass

引入less 1.安装react-app-rewired,react-app-rewire-less,babel-plugin-import 命令行: - npm install react-app-rewired –only=dev - npm install react-app-r...

2018-06-08 17:29:48

阅读数 2372

评论数 2

react项目框架环境搭建(持续更新中)

一、创建react项目 1.1 install node 官网:https://nodejs.org/en/ 1.2 命令行:npx create-react-app my-app (npx comes with npm 5.2+ and higher) 利用react官方提供的脚手架创建...

2018-06-04 17:57:18

阅读数 786

评论数 0

create-react-app JS里使用图片

1.JS加载图片 import img from '../../image/xxx.png' 2.JS使用图片 const item = [{ type:"bar", barGap:"5%", barMa...

2018-06-04 11:12:58

阅读数 928

评论数 0

jquery中stopImmediatePropagation和stopPropagation

案例: 需求:当class为shop-select-no时,点击区域只执行shop-select-no的点击事件;当class为shop-select-yes时,点击区域只执行shop-select-yes的点击事件; HTML: <div class=&quot...

2018-05-04 18:01:15

阅读数 189

评论数 0

handlebars 多状态判断输出,html转义or不转义

问题: 当在handlebars模板遇到分状态status=1,2,3,4,5…显示不用的状态label或者按钮时怎么办? 比如这样 再比如这样 解决办法: handlebars本身是没有办法的,只能借助handlebars的一个神奇功能:Helpers 1.模板: &...

2018-04-11 16:20:47

阅读数 1028

评论数 0

bootstrap-datepicker 月份选择 完全指南

需求 日期选择框只能选择月份,且只能选择只能是当前月份前12个月到当前月份,且可以动态显示与删除日期选择框 插件 所用插件库:bootstrap-datepicker Github:https://github.com/uxsolutions/bootstrap-datepicker ...

2018-03-22 10:30:20

阅读数 8742

评论数 3

crypto-js aes加解密

需求 服务端进行AES加密再base64编码,然后返回前端,前端需要进行相应的解码与解密 库选择 前端:crypto-js 服务端:jdk的javax.crypto 服务端代码 //AES加密再base64编码方法 public static String encodeAE...

2018-02-22 15:33:53

阅读数 3990

评论数 1

video.js 视频直播前端展示

原理 视频直播的流程原理图如下: 大致过程(摘自知乎:https://www.zhihu.com/question/37887655/answer/104444735): 流程如下: 1.数据采集: 摄像机及拾音器收集视频及音频数据,此时得到的为原始数据 涉及技术或协议: 摄...

2018-02-11 13:31:06

阅读数 11327

评论数 1

echarts toolbox修改默认按钮功能

背景 业务要求一个图表默认展示堆积柱状图,点击切换折线图按钮后,显示平铺折线图 实现 1. 原理 官方没有对这个配置项做详细介绍,就一句话——option 可选,可传入切换是动态修改的配置,将复写series内的数组项 ,不怎么懂,只好研究源码: toolbox.js 第115...

2018-01-18 17:13:29

阅读数 2185

评论数 1

React Echarts 拖拽<github持续更新中>

具体demo见: https://github.com/liuyuqin1991/react-echart-demo 项目介绍: 这是一个react集成echart并实现动态添加,可拖拽,可配置图表的demo例子,功能如下: 用户可以动态添加某类型的图表到指定位置 用户可以任意拖拽各个添...

2017-12-29 16:29:15

阅读数 1141

评论数 0

Shell 自动化编译打包

背景目前项目从mac上发布到测试环境需要经过上面的6个步骤,都是通过人工输入的shell以及git命令完成的,即便现在再熟悉了,也需要花个几分钟来编译打包,所以基于此编写了一套shell脚本来完成上述的6个步骤,达到自动化编译打包的目的。代码以下的huiyan-front 为源码库,huiyan_...

2017-12-20 17:03:45

阅读数 523

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭