js
lemon678
这个作者很懒,什么都没留下…
展开
-
js原生滚动条动画
说起滚动条动画,之前一直用的jQuery,今天比较闲,用js手写了一个,比jQ的好用哈,jQ是匀速滑动,我这个有减速效果!1.调用scroll_to,传入指定位置的高度参数就可以用了!2.减速的效果是用步长实现的,即每次滚动都是剩余距离的1/40,所以越滚越快! 学到的几个js获取位置方法:1.当前页滚动高度: document.body.scrollTop2.元素距离文档...原创 2018-11-27 09:47:09 · 9406 阅读 · 0 评论 -
vue2.0实现父子通信(基于之前我写的复选框组件)
不久前分享了我自己写的多选框组件(http://download.csdn.net/detail/lemon_zhao/9705162),基于vue1.0写的,最近写的项目是vue2.0的,顺道把这个组件做了下升级,1.0和2.0差别还是蛮大的,走了不少弯路,特地总结一下!!1.套用官网上的一句话总结父子通信的问题,props down, events up,父级往子集通信用props属性,子集...原创 2018-11-27 09:50:48 · 2193 阅读 · 0 评论 -
网速前端计算&系统探测
最近做一个web的检测工具,主要探测对单个节点的网速测试,和当前客户端的系统和浏览器,学到了不少东西哈!特地分享下!!1.计算网速封装的函数,传入ajax起始时间,ajax成功返回时间,数据容量,返回3个网速的参数,最常见的就是kBps,注释写的很清楚了哈,在下面! /* * 计算网速 * * @paras * ajaxStartTimeStamp ajax开始时间戳 单位(...原创 2018-11-27 09:50:30 · 1371 阅读 · 0 评论 -
实际业务中碰到的几种ajax请求方法总结
最近在做一个针对单个节点测速的功能页面,测速的逻辑是,测上传速度时,前端传5m数据给server,记录上传和返回数据的时间,测下载速度时,从server下载1m的数据,记录下载和下载成功的时间,上传和下载用的是ajax同步以避免客户端带宽阻塞的问题,并进行3次取平均值。在开发过程过,因为ajax同步异步的问题,走了不少弯路,特地也把之前遇到的业务逻辑整理汇总一下。1.普通的ajax,async...原创 2018-11-27 09:50:18 · 5976 阅读 · 1 评论 -
前端记住密码功能
上周给运营系统补了个记住密码的功能,好像很容易的需求啊,还真费了不少劲,补充了不少cookie方面的知识~特地总结下!大体思路就是通过存/取/删cookie实现的;每次进入登录页,先去读取cookie,如果浏览器的cookie中有账号信息,就自动填充到登录框中,存cookie是在登录成功之后,判断当前用户是否勾选了记住密码,如果勾选了,则把账号信息存到cookie当中,效果图如下:浏览...原创 2018-11-27 09:48:27 · 54309 阅读 · 8 评论 -
vue2中(路由/父子/组件/事件)数据通信方法总结
最近一直在搞我司官网控制台的重构,被产品虐的这叫一个死去活来,今天终于有时间,整理下最近用到的vue数据通信的几种场景。1.组件通信这是最普通的交互场景,如下图中,报表页面用到了一个自己写的下拉菜单的组件,用户在子组件内部勾选完成后,通过触发emit把勾选的数据传递给父子的data层父级html <domainPopSelect v-bind:domainbizty...原创 2018-11-27 09:51:13 · 12546 阅读 · 0 评论 -
js排序(二维数组/英文/中文)方法封装
在实际业务中,往往会碰到排序的问题,今天我就特地梳理下我常用到的几个小方法,放到公共util里能提高不少效率呢!1.一维数组排序(1)js原生sort /* * @Name 数组排序 * @Param * list {array} 原始数组 * mode {string} 默认asc升序 desc降序 * @Author zhaopeng@xunlei.com */...原创 2018-11-27 09:52:15 · 1174 阅读 · 1 评论 -
基于antd的上传文件进度条
最新新搭了一个控制台,是基于阿里antd框架搭建的,总体上来讲,antd从UI交互和组件的api上来看,还都是很好的框架了,不过还是踩了不少坑的,哈哈,后面慢慢整理出来。这里碰到的情况是,有个上传大文件的需求,需要在前端展示出上传的进度,刚接到需求的时候,我想到的方法是,由server端动态返回上传进度的百分比,前端一直不停的调用这个接口就行了,后来百度了下,发现前端自己就可以实现这个需求,是...原创 2018-11-27 09:50:10 · 15857 阅读 · 5 评论 -
react中(父子/祖先/路由)数据和事件的通信方法总结
好久没更博了啊,0.0,最近手头的一个前端控制台项目,我是用阿里开源的ant框架搭建的,用着还是蛮顺手了,在使用过程中,碰到一些数据通信的问题,有些和vue相同,有些不一样的地方还是踩了些坑的,特地整理了下。1.子组件调用父级的数据和方法父级组件代码如下,把数据和方法通过props向下传递,在子组件中调用this.props.text即可获得父级数据,调用this.props.checkb...原创 2018-11-27 09:52:21 · 2355 阅读 · 0 评论 -
React-Redux初实践
这礼拜终于把手头的需求完结的差不多了,终于有时间沉淀下这段时间学习到的新技术了。redux,我是在阮一峰大神的教程里学习的,先粘上传送门,大神在3篇连续的教程中,很详细的讲解了redux和React-Redux 的原理和用法,而我接下来主要是整理下我的学习笔记,和我在实践中走过的坑。一.我对redux理解众所周知,用react去做页面逻辑的时候,页面所见的所有dom元素,都可以被拆分成...原创 2018-11-27 09:52:28 · 486 阅读 · 0 评论 -
js生成邀请码(随机6位 数字+大小写字母)
前段时间用js写了个小工具,随机生成500个邀请码,并导出csv,邀请码的格式是 数字+大小写字母,长度为6。实现很简单,主要用到了生成随机数和导出csv的方法,具体实现如下,需要额外注意的是,生成的邀请码需要校验唯一。var header = ['邀请码(随机6位 数字+大小写字母)'];var content = [];var chars = 'ABCDEFGHIJKLMNOPQ...原创 2018-11-27 09:41:16 · 7681 阅读 · 0 评论 -
vue2.0结合DataTable插件实现表格的动态刷新
今天周六啊!一想到我的凤九和东华要生小滚滚,我就归心似箭无心敲代码!产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈!我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管...原创 2018-11-27 09:51:06 · 69026 阅读 · 9 评论 -
vue2.0开发过程中踩的坑!
昨天素素终于跳了诛仙台,我好开心呀!今儿个特地整理了下vue2.0开发过程中踩得坑!希望和大家交流!一、声明周期声明周期钩子详见这张图 https://segmentfault.com/q/10100000077041141.0的ready替换成了mounted,即模板编译挂载之后数据data要写成function的形式了,像这样 data () { retur...原创 2018-11-27 09:50:56 · 11719 阅读 · 0 评论 -
vue2.0环境搭建(含router路由)
现如今这四海八荒都在用vue啊!年前我手头新做一个运营平台,截图如下,前后端分离,费了半天劲终于把环境搭建起来了,年后有功夫了,特地整理下,希望大家能少走些弯路!一、搭建环境用官方的脚手架cli一步一步按流程走,我整理出的流程如下,参考官网指导 https://cn.vuejs.org/v2/guide/installation.html#NPM1. npm install vue-c...原创 2018-11-27 09:48:02 · 13868 阅读 · 0 评论 -
js对象的深度克隆!
js中创建的对象指向内存,所以在开发过程中,往往修改了一个对象的属性,会影响另外一个对象。尤其是在angular框架中,dom是由数据驱动的,在增删改查对象的操作中,对象属性的继承关系是很让人头痛的!我之前遇到的问题就是,在编辑页面,操作了对象数据,影响到了展示数据的展现!我整理了两种深度克隆对象的方法,供大家参考!首先var 一个假数据 var schedule = {...原创 2018-11-27 09:41:55 · 5760 阅读 · 0 评论 -
js处理时间(一)
最近正好闲下来了!整理了一下时间处理的方法,都是自己写的哈!!本篇封装:(1) js取得2016-08-11 19:46:01格式的时间(2) js取得本周第一天/最后一天(3) js取得本月第一天/最后一天 <script type="text/javascript"> /* 输出2016-08-11 19:46:01的格式 */ var t...原创 2018-11-27 09:43:39 · 1032 阅读 · 0 评论 -
js处理时间(二)
紧接上篇;本篇封装:(1)unix时间戳相互转化(2)两天相隔 <script type="text/javascript">/*unix时间戳转正常时间*/var unixtime=1359727392;var unixTimestamp = new Date(unixtime* 1000); commonTime = unixTimestamp.toL...原创 2018-11-27 09:43:17 · 343 阅读 · 0 评论 -
grunt自动化加密js
Grunt配置方法前段时间终于搞定了grunt自动化加密js,整理了下流程,省的大家走弯路哈!整个包的下载地址:http://download.csdn.net/detail/lemon_zhao/95988901.从https://nodejs.org/en/下载node安装包 安装nodeJs环境检查nodeJs是否安装成功,cmd下输入node -v检查当前node版本号2....原创 2018-11-27 09:49:25 · 1047 阅读 · 1 评论 -
封装几个特别好看的弹窗!
刚从国外网站看到两个特别好看的弹窗,迫不及待赶紧把代码爬下来!哈哈,error和alert弹窗的圆环是用canvas做的啊!效果非常赞!!下载:http://download.csdn.net/detail/lemon_zhao/9598887 ...原创 2018-11-27 09:45:48 · 1800 阅读 · 0 评论 -
js 生成随机字符串
今儿碰到这么一个小问题啊,要前端生成一个随机字符串的token,特地写了个小算法,生成随机数字,和随机字符串! //800~1500随机数var num = Math.random()*700 + 800num = parseInt(num,10)console.log(num)//1~32的随机整数for (var i=0; i<1000; i++){ var a1...原创 2018-11-27 09:44:38 · 5826 阅读 · 0 评论 -
js秒数格式化
前端经常会从后端获取到时间,比如我今天就碰到,后端只返回秒数,只能我自己转义,就写了个小方法,把3921转化为1小时5分钟21秒这样的格式,总的来说就是不断遍历自身的秒数。用起来非常的简单!!! var secdons = 3921var timeFormat = ''function timeFilter(secdons){ if (secdons<60){ var ...原创 2018-11-27 09:39:02 · 3487 阅读 · 1 评论 -
基于浏览器的m3u8和flv的播放器
最近手头的一个项目,基于浏览器的要做一个视频播放器,h5的新标签只支持mp4和ogg,还有webm三种格式,我这边的需求是flv和m3u8,flv还好说,很多sfw媒体都支持,m3u8流媒体就不成了,也是折腾了半天哈,从老外那边找到的解决办法!废话不多说,上代码!demo下载地址:http://download.csdn.net/detail/lemon_zhao/9674339老外原网站...原创 2018-11-27 09:48:35 · 17632 阅读 · 2 评论 -
纯前端js生成csv文件下载
昨天公司的一个需求,页面上导出excel,按之前我的做法都是后端生成这个file,放到服务器上,返一个下载link给前端,前端通过link下载,这样做的缺点就是等待的时间比较长,后端创建文件,http通信都会影响响应速度,在网上折腾半天,终于完成纯前端生成csv文件,再也不依赖后端了哈!通过a标签和字符串拼接的方式实现!封装了个demo如下:下载连接 http://download.csdn....原创 2018-11-27 09:48:10 · 5800 阅读 · 0 评论 -
vue实现多种复选框,含搜索
最近在重构一个复选框组件,原型是select2这个jquery插件, 有兴趣的可以去搜下,封装的很好,但是并不能满足业务所有需求,最要命的是jquery插件这种以dom驱动数据的库,并不能和vue和angular这种数据驱动dom的框架很好的结合,所以我用vue的component重构了一下,走了不少弯路,做的demo分享出来,还请大家指点一二!download地址:http://downlo...原创 2018-11-27 09:49:31 · 12916 阅读 · 0 评论