lakenQi

开通csdn好久了，出于工作原因，一直不能在网上记录，但是终究觉得还是得留下些东西，所以开始整理笔记，调出可以记录的描述一下，目的也是为了看到自己的成长，与大家共享。今天这个是最近刚用过的，一直听说H5的进度条标签，一直也没用过，这两天刚好提出了需求，走起，小试一把，然后就记录一下吧，其实还是蛮简单的，重点就是建立好轮询。出于一些原因，有些地方我会用伪代码来标识。第一步：就是在页面里写...

这几天研究canvas制作动态背景的时候，发现这个东西稍微改改就变成图片切换的功能了，可以代替动态修改img标签的src属性，实现图片定时切换功能。先奉上代码：function switchPic(containerId, pics, { speed = 1000, width = 100, height = 100, callback = function(pic) {}} = ...

开门见字之前写过一篇H5新标签progress进度条的使用文章，当时觉得研究的还行，但是发现，这个标签在不同浏览器中样式表现是不一致的，如下：chrome中：，一抹蓝色划过天际；火狐中：，一片绿色大森林；IE中：，一群小点排排坐。够了，完全不着边际的不一致，就这三大家都各有各的想法，不敢想象其他人了，且本人不才，没有研究出CSS修改progress的方法。当然如果不在乎这些差别...

几个ES6兼容方法碎碎念babel转码可以解决大部分ES6问题，但总有例外。最近就遇到了Array.from转码后依然没变的问题，然后，IE就闹了。所以趁热乎，自己写了几个小的兼容实现，可以嵌在代码里用，而且不影响其他正常的实现。polyfill都是和数组有关的，几个新方法：//Array.fromArray.from || (Array.from = function(o...

终于搞定了登录组件，省的以后总写了，下次直接加载使用，组件的说明如下，文末有github下载地址，可以去下载，也欢迎大家一起完善，代码开源。组件开发核心点：Vue基础的那几部分就不多说了，使用Vue的应该都会，这里就说一下登录页面各项联动的实现：1.登录验证，主要是利用watch功能，监控各个输入框的输入情况，以及验证码的准确情况，以此来改变登录按钮的可使用状态；2.利用wat...

断断续续好几天，终于把canvas动态背景图插件搞定了，大体总结一下要点吧。核心简介除了面向对象，封装，其实最核心的还是canvas转换图片的功能，该部分代码如下：//绘图__draw(i, _width, _height, len) { let _this = this; //惰性载入 if(arguments.length) { //全屏多图切换 this.__d...

唠叨一句用了很长时间Vue了，但是对于它的各种生命周期及钩子时而清楚，时而糊涂，时常会掉进这些钩子的坑里不能自拔，今天干脆研究一下他们的顺序，给自己和与我有相同经历的同学们解惑。这里只用很简短的示例，演示了一些执行顺序，不涉及整个的Vue应用。这些顺序很重要。代码一套先放上示例代码，有兴趣的同学可以贴去自己查看，加深印象，其实可以不用看代码，直接去后面看结论。<script...

往昔流行的页面flash动画，已经逐渐被日益强大的CSS，Canvas和Js动画取代，多种多样的动画实现API，可能会给前端开发带来一些选择恐惧症，尤其对于新人，所以这里总结一下几种动画的使用，方便日后选择使用，提示：本文不是细致的API使用介绍，是对于几种动画开发API的使用场景的总结。一、Canvas首当其冲的，当然是H5的canvas了，当然它虽然是H5的标签，但是具体的实现，完全要...

js的数组提供了很多简便的操作方法。如forEach,map,every,some,filter,reduce。这些方法极大的简化了数组的操作，甚至将一些类数组数据，如DOM元素，通过es6的[...XXX]解构或者[].slice.call(XX)转成数组后，也可以方便的使用。但是，这几个方法是从IE9才支持的，如果项目不需要兼容IE8及以下的，大可以放心的使用，但是如果需要兼容，就不能开心的玩...

简单聊聊循环也好，递归也罢，都是编程语句中最常见的操作。这二者通常来说在完成效果上没有什么太大区别；从性能角度来讲，一个处理欠佳的递归函数，会导致函数嵌套引用，从而出现内存溢出的错误，影响性能，因此如果没有掌握递归的精髓，还是尽可能用循环完成，否则得不偿失。但是如果循环中加入了异步操作，比如ajax,或者reader.onload事件，同时，最终结果又依赖于所有异步操作返回的结果，此时就不得...

引言最近一段时间认真研究了一下正则表达式，这东西这是入门容易，越学越难，奇幻怪异的写法，各种变量配比。之前只是用的时候在网上现找，但是没想到，正则的水这么深，不去深入了解一下，还是不行，否则写出来的正则表达式非但不能完成任务，还有可能调入回溯陷阱，这次是搞明白了捕获应用和结合replace的替换，记录一下。捕获应用首先来说说捕获是什么：官方话不说了，直接白话，就是正则表达式分组（）...

H5新增了拖动事件，根据一些文档描述如下：在拖动目标上触发事件(源元素):ondragstart - 用户开始拖动元素时触发ondrag- 元素正在拖动时触发ondragend- 用户完成元素拖动后触发释放目标时触发的事件:ondragenter- 当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover- 当某被拖动的对象在另一对象容器范围内拖动时触发此...

研究了好一阵子Vue，有些细小的知识点，慢慢的才理解过来，虽然零碎，但是也要系统的总结一下。1. v-model ：表单神器，这个就不说了，主要说这个指令还可以用在父子组件通信，是个语法糖，相当于引用了“input”事件，这样就不需要在父组件实例化中再定义方法了，子组件$emit()交互就可以驱动数据变化；2. props： 接受父组件参数，并传递给子组件。如果直接应用在子组件上（不通过d...

这三个方法都是用来截取字符串或数组的，之前一直想起来那个就用了，直到有一天。。。。。然后发现其实应该研究研究，毕竟，如果没有区别，为啥要弄三个看起来功能一样的方法。各大博客关于这个三个方法的区别文章比比皆是，可以说研究的已经很透彻了，这里记录一下，主要也是自己做一个总结，看别人的东西，终归是别人的，自己实际体会一把，才能变成自己的。回归正题：参数及方法就不啰嗦，耳熟能详了 ，这里直接用代码...

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHei...

js的各种offsetXXX和scrollXXX的介绍非常多，其使用也非常广泛，特别是在需要对页面定位的时候，最近实现一个简单的目录点击定位内容及滚动屏幕定位目录标题的小功能，完全是靠这两个属性实现，当然事件监听啥的，这肯定是必要的。直接上代码：一、页面滚动，自动定位目录：//滚动页面目录自动定位显示let autoActive = function(){ let html_to...

最近折腾自己的网站，在自适应方面发现有了很多新的方法，感叹前端的技术真是日新月异，从以前只能这样，到现在除了这样，还可以那样，甚至再那样......技术永无止境啊。回到主题，自适应响应式布局这个话题古老而新颖，从最早的不同分辨率的屏幕，到现在遍布各个生活角落的移动设备，响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中，bootstrap一直是响应式的头号选择，的确，其中的各种xl，...

综述锚点定位是一个再熟悉不过的操作了，通常会用a标签href=#XX去实现，不过这样做，有一个问题，就是页面会有刷新感，而且地址栏会有变化，F5刷新，则#XXX还是显示在地址栏里，这样如果要进一步进行有关地址栏url的操作，就不得不再做些判断，所以寻找一些新的方法。如果要求不是很高，scrollIntoView()这个方法就可以取代传统锚点定位，它是利用滚动原理，来将相应的元素滚动到可是区...

综述Jquerys实现class的add,remove和toggle是十分方便的。而H5新增的classList方法，也让原生js的各种class操作变得方便起来。然而，兼容性来了，classList只兼容IE10及以上（这里只提IE吧，IE是前端过不去的兼容坎），因此十分想方便的用原生js，又纠结在了兼容性上，干脆，那就自己来实现一下吧，都给它扔进去，兼容的就classList，不兼容的就用...

Generator函数是可以传参数，一直用的不明不白的，今天写个例子，运行一下，记录一下过程，如下面这个小例子：//简单的序列生成，主要看next传参数的时机let test = { getId : function*(data){ let id = 0, param=null; while(id < 4){ console.log(`上一次param:${pa...