iTakeo

树叶飘落效果解析…


之前写过一次类似树叶落下的效果,当时想到的方法是,动态的往body里面添加元素,添加一些随机的属性,然后写一个动画,让他按照随机的速度落下,达到一种落差的效果,最后判断top值是否超过clientHeight,超过就remove掉。

嗯,看样子不错,也能跑起来,但是在安卓手机上测试,会有卡顿,后来优化了下,改成css3动画,再次测试,不错,安卓也不卡了,挺流畅,但是代码量又增加了,并且这样反复的对dom进行属性的重绘,添加和删除,效率很低。

今天换了另一种写法,所有动画效果全部利用css3来完成,也不用反复的进行dom添加和删除操作了,并且代码量是之前的三分之一。先看下面的演示效果吧。

(更多…)

2015/07/09 1 / /
标签:  暂无标签

js操作字符串和数字的方法整理…

对字符的各种操作有时候总会忘记几个,这次做一下整理:

length – 返回字符串的长度

  1. ‘abcd’.length;  //4  

Math.ceil(num) – 向上取整,不管小数点后面是多少,哪怕.00001,也会向上进一位。

  1. Math.ceil(25.9); //26  
  2. Math.ceil(25.5); //26  
  3. Math.ceil(25.1); //26  

Math.floor(num) – 向下取整,不管小数点后面是多少,哪怕.99999,也会向下减一位。

  1. Math.floor(25.9); //25  
  2. Math.floor(25.5); //25  
  3. Math.floor(25.1); //25  

(更多…)

2015/07/08 0 /
未分类
/
标签:  暂无标签

移动端开发备忘…

这是一些移动端开发的备忘记录。

<meta> 元素

  1. <meta name=“viewport” content=“width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no”/>  
  1. width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)  
  2. height:高度(数值 / device-height)(范围从223 到10,000)  
  3. initial-scale:初始的缩放比例 (范围从>0 到10)  
  4. minimum-scale:允许用户缩放到的最小比例  
  5. maximum-scale:允许用户缩放到的最大比例  
  6. user-scalable:用户是否可以手动缩 (no,yes)   

(更多…)

2015/07/08 1 /
未分类
/
标签:  暂无标签

一行代码系列…

一行代码实现数字千位分隔符。
?=术语叫“先行断言”。
x(?=y)可以理解为,x只有在y前面才匹配,y不会被计入返回
$1是第一个匹配内容
(\d{3})+ 匹配三个数字
(\d)(?=(\d{3})+$)到结尾开始,三个数字前面有一个数字的话,既匹配成功,然后替换成$1加一个

  1. //例如1,568,153,48  
  2. function format (number) {    
  3.     return number.toString().replace(/(\d)(?=(\d{3})+$)/g, ‘$1,’);    
  4. };  

一行代码实现随机颜色值。
随机数转换成十六进制,然后截取6个字符长度。

(更多…)

2015/07/08 0 /
未分类
/
标签:  暂无标签

css3实现loading的点点点动画

css3实现loading的点点点动画…

css代码:

  1. .loading{  
  2.     min-width:2px;  
  3.     min-height:2px;  
  4.     display:inlineblock;  
  5.     box-shadow:  
  6.         2px 0 currentColor ,  
  7.         6px 0 currentColor ,  
  8.         10px 0 currentColor ;  
  9.     animation:dot 2.4s infinite steps(1,start);  
  10. }  

(更多…)

2015/07/08 0 /
未分类
/
标签:  暂无标签

JSONP跨域的原理解析…


跨域的方法有很多,这里给大家解释一下什么是JSONP
JSON相比大家都已经很了解了,那么JSONP又是个什么鬼,JSONP是利用在页面中动态创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP,通俗的来说,就是在服务端输出JSON数据并执行回调函数。

  1. var _script= document.createElement(“script”);  
  2. _script.type = “text/javascript”;  
  3. _script.src = “xxxxx”;  
  4. document.getElementsByTagName(“head”)[0].appendChild(_script);  

我们以百度为例,打开浏览器调试工具,点击网络,然后再百度搜索里面输入关键字,网络里面会出现一个请求,具体看下图:

(更多…)

2015/07/07 0 /
未分类
/
标签:  暂无标签

双色球投注js详解…

最近项目做了一个双色球投注的效果,双色球的规则,从1-33选六个不重复数字为红球,1-16选一个为蓝球,组成一个6+1就为一注,下面就是一个实例,大家可以点击看看…

  • 01
  • 01
  • 01
  • 01
  • 01
  • 01
  • 10
  • 换一注

下面是代码解释,首先要取到红球和篮球的数字,肯定要获取随机数,写一个Random方法,传入开始数字,和结束数字,然后通过Math.random来获取随机数…

  1. //获取随机数  
  2. function Random(start,end){  
  3.     return Math.round(Math.random()*(end-start)+start);  
  4. };  

咋们随机数已经可以获取,接下来就是要写一个获取数组的方法,把上面的随机数写进一个数组。用来保存红球和篮球的号码。

(更多…)

2015/07/07 0 /
未分类
/
标签:  暂无标签

Ajax的基本封装…

大家在写页面的时候,使用jQuery往往只是用到几个功能,比如dom选择器、Ajax或者Animate,其它或许用不到;这种情况在移动端尤其明显,html5提供了方便的dom选择器,还有css3的高效率动画,庞大的jq显得不再那么重要,原生js一样很方便,下面是一个Ajax基本的封装。

  1. Ajax.init({    
  2.     type : ‘get’,  //请求方式 POST or GET(默认)    
  3.     url : ‘xxx’,   //请求的地址    
  4.     async : true,  //是否异步,默认true    
  5.     timeout : 2000  //超时处理,默认10000    
  6.     data : {name:1,age:2},  //发送的数据,json格式    
  7.     dataType : ‘json’,   //返回数据的格式,有text/xml/json三种,默认text  
  8.     success : function(d){      
  9.         //成功回调函数       
  10.     },       
  11.     error : function(d){        
  12.         //失败回调函数       
  13.     }    
  14. })   

注意:json返回使用了JSON.parse来解析的,如果ie7报错,需要引入json2.js,可前往这里下载:https://github.com/douglascrockford/JSON-js,写可以自行下载源码修改成 eval(“(“+xhr.responseText+”)”)

点击这里下载JS

2015/07/06 0 / /
标签:  暂无标签

事件委托…

事件委托有以下好处;
1、提升效率
2、阻止冒泡
3、动态添加的DOM元素也继承有该事件

  1. var _li= document.querySelectorAll(‘li’);    
  2. for(var i=0;i<_li.length;i++){    
  3.      _li[i].onclick = function(){    
  4.         alert(this);    
  5.     };    
  6. };  

↑上面的代码,是我们正常情况下给多个元素绑定事件,利用for循环,但是假如元素有100个,1000个,10000个同样的元素…这样效率不是很低吗?

(更多…)

2015/07/04 1 /
未分类
/
标签:  暂无标签
10/10
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
回到顶部