CFXIXI工作室首页
CF西西的博客 | javascript

如何给元素样式增加动画

30. 十一月 2016
举例: transition: opacity .4s; 针对opacity增加一个0.4秒的补间动画。 .index_more_pop .mask { position: absolute; z-index: 999; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); opacity: 0; transition: opacity .4s;}.index_more_pop .enter { opacity: 1; transform: translate(0, 0);}.index_more_pop ul { position: fixed; bottom: 0; display: block; width: 100%; z-index: 9999; transform: translate(0, 100%); transition: transform .4s;}

javascript

NPM淘宝镜像

30. 十一月 2016
http://www.thinksaas.cn/topics/0/400/400616.html

javascript

正则表达式示例

14. 十一月 2016
假设希望截取特定数字 /TTJJ\/(\d{1}\.\d{1}\.\d{1})/假设希望排除TTJJ ([^TTJJ\/]+)$

javascript

underscore源码分析

4. 六月 2016
underscore源码分析 https://github.com/hanzichi/underscore-analysis  

javascript

如何在Javascript中获取字典类型的Key和Value值

2. 六月 2016
看一个简单的示例: for (prop in items) { var itemKey = prop; var itemValue = items[prop]; } prop 字段 即字典类的的Key值,而items[prop]可以获得Value值。

javascript

Ios日期截取

18. 十二月 2015
var arr = resultLogin["time"].split(/[- :]/),dt = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);

javascript

React编译jsx方法

28. 十一月 2015
**JSX文件编译:**安装nodejs(话说这个是必装的啊),npm install -g react-tools  执行命令:jsx -w -x jsx myreact/ static/hello/src/buildjsx -w -x jsx vendor/ vendor_build在主目录下(hello-react-backbone)下执行-w 是观察文件修改,并自动重新生产js文件到指定的目录下-x 文件扩展名的处理,默认是jsmyreact/    目录是jsx文件的目录, static/hello/src/build 是生产js文件目录ps:你要想在define作用域内直接使用JSXTransformer.js,请确定能其引入作用域中,我看到github上有人用requirejs做了插件处理,可以直接使用JSXTransformer.js编译Jsx文件,不过最好还是编辑成js文件吧,别老想着让自己认识,你得让机器认识这些代码才行啊。。。可参考此处:         **有做组件分离哦**参考:react-backbone的TodoMVC

javascript

控制Iscroll5的滑动速度

12. 十一月 2015
options.deceleration 滚动动量减速越大越快,建议不大于0.01 数字越大滑动越慢

javascript

关于游览器浮层被拖动问题(元素冒泡到系统事件)

11. 十一月 2015
可以参考将touchmove事件禁掉  阻止冒泡到游览器触发不该触发的事件 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

javascript

Javascript判断时间对象是星期几

14. 十月 2015
/*判断传入时间类型是星期几*/numOfWeek:function(dateObj){ /*0 为星期日 1 为星期一 2 为星期二 3 为星期三 4 为星期四 5 为星期五 6 为星期六*/var num = dateObj.getDay(); switch(num) { case 0: return "星期日"; break; case 1: return "星期一"; break; case 2: return "星期二"; break; case 3: return "星期三"; break; case 4: return "星期四"; break; case 5: return "星期五"; break; case 6: return "星期六"; break; }},

javascript

Javascript数组去重的方法

18. 九月 2015
  /*方法一: 1,'1' 会被认为是相同的; 所有hash对象,如:{x;1},{y:1}会被认为是相同的 //10ms */ Array.prototype.unique=function(){ var newArr=[],obj={}; for(var i=0,len=this.length;i<len;i++){ if(!obj[this[i]]){ newArr.push(this[i]); obj[this[i]]=true; } } return newArr; } /*方法一改进版:所有hash对象,如:{x;1},{y:1}会被认为是相同的 //30ms*/ Array.prototype.unique=function(){ var newArr=[],obj={}; for(var i=0,len=this.length;i<len;i++){ if(!obj[typeof(this[i])+this[i]]){ newArr.push(this[i]); obj[typeof(this[i])+this[i]]=this[i]; } } return newArr; } /*方法二: 去重结果最好,但耗性能 //250ms*/ Array.prototype.unique=function(){ var newArr=this.concat(); for(var i=0,len=newArr.length;i<len;i++) { for(var j=i+1,len=newArr.length;j<len;j++) { //注意 === if(newArr[i]===newArr[j]) { newArr.splice(j,1); j--; } } } return newArr; } /*方法三: 不能去重hash对象 //25ms */ Array.prototype.unique = function(){ var newArr = []; //一个新的临时数组 for(var i = 0,len=this.length; i < len; i++){ if (newArr.indexOf(this[i]) == -1){ //如果当前数组的第i已经保存进了临时数组,那么跳过,否则把当前项push到临时数组里面 newArr.push(this[i]); } } return newArr; } var arr0=[11,21,221,13,24,"134","1",{x:1,y:1},{name:"pobaby",age:"12",hobby:"football"},{name:"pobaby1",age:"121",hobby:"football1"},{x:134},{y:132},{x:143},{y:3421},"神秘人物", "火柴人技巧格斗", "超音速战场", "小小辛打砖块", "火柴人技巧格斗", "加菲猫超人", "小小辛打砖块", "卑鄙的我2", "电流导线", "飞天手推车","神D秘人物", "火柴人S技巧格斗", "超音SD速战场", "小小SD辛打砖块", "火柴人SD技巧格斗", "加菲S猫超人", "小小DF辛打砖块", "卑鄙的FS我2", "电D流导线", "飞天SD手推车","神秘SD人物", "火柴人技D巧格斗", "超音ASD速战场", "小小辛打SAD砖块", "火柴人技SD巧格斗", "加菲FDS猫超人", "小小辛打SDF砖块", "卑鄙SDF的我2", "电流SDF导线", "飞天手DF推车","神秘SD人物", "火柴人技AS巧格斗", "超音速战FS场", "小小辛SDF打砖块", "火柴人SDF技巧格斗", "加菲SD猫超人",113,231,2221,123,234,"1334","21",{x:13,y:132},{name:"pobaby2",age:"122",hobby:"football2"},{name:"pobaby13",age:"1231",hobby:"football41"},{x:13544},{y:1352},{x:14543},{y:34521},"神秘人sd物", "火柴人技sd巧格斗", "超音速sd战场", "小小辛sd打砖块", "火柴人技巧gw格斗", "加菲猫ui超人", "小小辛yi打砖块", "卑鄙的yi我2", "电流yt导线", "飞天手ytui推车","神Dyu秘人物", "火yui柴人S技yui巧格斗", "超音SDyu速战场", "小小SD辛打砖uyi块", "火柴yui人SD技巧格斗", "加yui菲S猫超人", "小小DF辛打砖ui块", "卑鄙uyi的FS我2", "电D流导yui线", "飞天SD手推uyi车","神i秘SD人物", "火柴人技Dhk巧格斗", "超音ASD速战hk场", "小小辛打SAhkD砖块", "火柴人技SD巧ghk格斗", "加菲FDS猫k超人", "小小辛打SDF砖ytui块", "卑鄙SDF的yui我2", "电流SDyuF导线", "飞天手yuiDF推车","神iy秘SD人hk物", "火柴uyi人技AS巧格hk斗", "超音hg速战FS场", "小小辛SDF打砖hjk块", "火柴人SDF技hj巧格斗", "加菲SDhk猫超人" ]; /*十万个随机数据*/ var arr=[],num; for(var i = 0; i < 100000; i++){ num=Math.floor(Math.random()*50); arr.push(arr0[num]); } var t1= new Date().getTime(); console.log(t1); //开始时间 arr.unique(); //去重 var t2 = new Date().getTime(); console.log(t2); //结束时间 console.log(t2-t1);

javascript

针对iScroll 4 checkDOMChanges: true"属性 IScroll5中如何实现

16. 九月 2015
参考:https://groups.google.com/forum/#!topic/iscroll/vDOvdA89WGA 没有办法做实时的监听,用一个0.5秒的循环,动态检测滑轮的高度吧 var scrollerHeight = window.indexScroll.scrollerHeight; setInterval(function () { if ( scrollerHeight == window.indexScroll.scrollerHeight ) return; scrollerHeight = window.indexScroll.scrollerHeight; window.indexScroll.refresh(); }, 500);

javascript

阻止游览器滑动事件代码

14. 九月 2015
  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

javascript

如何不用iscroll做页面回弹(缓冲)

14. 九月 2015
"overflow-y":"scroll", "-webkit-overflow-scrolling" : "touch"

javascript

如何格式化JSON生成漂亮的格式

7. 七月 2015
转自:http://stackoverflow.com/questions/2614862/how-can-i-beautify-json-programmatically The JSON.stringify method supported by many modern browsers (including IE8) can output a beautified JSON string: JSON.stringify(jsObj,null,"\t");// stringify with tabs inserted at each level JSON.stringify(jsObj,null,4);// stringify with 4 spaces at each level

javascript

使用 SourceMap 来进行压缩后的代码调试,以underscore为例(underscore.map由来)

6. 三月 2015
转自:http://ju.outofmemory.cn/entry/34885 JS发布后通常会经过压缩和混淆,所有代码被压缩成一行代码,如果发生错误,无法定位错误,SourceMap因此而生。说起SourceMap,不得不说说uglifyjs,uglifyjs是nodejs下一款优秀的JS压缩优化工具,支持SourceMap的生成。 一、uglifyjs的使用及SourceMap文件的生成方法1、安装nodejs:http://nodejs.org,windows下直接安装即可,安装好后自带npm.2、打开CMD,输入node -v查看,nodejs是否安装成功,如果成功会返回一个版本号。3、安装uglifyjs:执行命令:npm install uglify-js -g4、uglifyjs使用方法及API:https://github.com/mishoo/UglifyJS25、压缩JS并生成SourceMap文件 uglifyjs underscore.js --source-map underscore.js.map --source-map-root ./-m -c -o underscore-mini.js 会生成两个文件:underscore-mini.js(压缩文件)underscore.js.map(SourceMap文件) 二、用 SourceMap 调试有了SourceMap文件,放置underscore-mini.js同一目录,引用underscore-mini.js时,就可以调试,看到未压缩的代码 调试方法:打开chrome – F12(打开调试工具)- 调试工具右下角有一个设置,打开设置 – General – Enable source maps这样就打开了SourceMap调试功能。在Sources面板下,左侧展开,就能看到SourceMap解出来的未压缩文件,多个压缩文件都可以看到。 三、SourceMap的原理解析单说,Source map就是一个信息文件,里面储存着位置信息。也就是说,转换后的代码的每一个位置,所对应的转换前的位置。有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码。这无疑给开发者带来了很大方便。 1、SourceMap基本结构如下: - version:Source map的版本,目前为3。- file:转换后的文件名。- sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。- sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。- names:转换前的所有变量名和属性名。- mappings:记录位置信息的字符串,下文详细介绍。 2、重点在于mappings的解码第一层是行对应,以分号(;)表示,每个分号对应一行代码;第二层是位置对应,以逗号(,)表示,每个逗号对应转换后源码的一个位置。第三层是位置转换,以VLQ编码表示,代表该位置对应的转换前的源码位置。 VLQ编码相关,请查询更多资料~~

javascript

js加密解密

8. 一月 2015
转自:http://www.cnblogs.com/mofish/archive/2012/02/25/2367858.html   1、base64加密   在页面中引入base64.js文件,调用方法为:     <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>base64加密</title><script type="text/javascript" src="base64.js"></script><script type="text/javascript"> var b = new Base64(); var str = b.encode("admin:admin"); alert("base64 encode:" + str);      //解密 str = b.decode(str); alert("base64 decode:" + str); </script> </head><body></body></html>   2、md5加密   在页面中引用md5.js文件,调用方法为    <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>md5加密</title><script type="text/ecmascript" src="md5.js"></script><script type="text/javascript"> var hash = hex_md5("123dafd"); alert(hash)</script> </head><body></body></html>   3、sha1加密   据说这是最安全的加密   页面中引入sha1.js,调用方法为    <!DOCTYPE HTML><html><head><meta charset="utf-8"><title>sha1加密</title><script type="text/ecmascript" src="sha1.js"></script><script type="text/javascript"> var sha = hex_sha1('mima123465') alert(sha) </script> </head><body></body></html>   base64.js md5.js sha1.js

javascript

javascript如何截取url地址中的参数并保存为参数

8. 十二月 2014
    var pairs = location.hash.slice(1).split('&&'), param = {}; pairs.forEach(function (pair) { pair = pair.split('='); param[pair[0]] = decodeURIComponent(pair[1] || ''); }); param.goPage = param.goPage || "transferIndexView"; document.getElementById(param.goPage).style.display = "block";

javascript

Jquery 拓展一个点击按钮自动高亮的方法

24. 四月 2014
其实原理很简单,我们点击的时候我们给元素加上一个自定义的attr,加上后便会有有一个匹配的样式去自动适配背景,几秒后去掉该样式恢复原状 首先在自己的js中拓展一个方法hoverEl $.extend($.fn, { hoverEl:function(){ var _this = $(this); var _t = setTimeout(function(){ _this.attr("hover", "on"); }, 10); _this.attr("hoverTimeout", _t); setTimeout(function(){ clearTimeout( _this.attr("hoverTimeout") ); var _t = setTimeout(function(){ _this.removeAttr("hover"); }, 100); _this.attr("hoverTimeout", _t); },200); } }); 其次定义样式,当特定attr被加上时 li[hover=on]{ background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important; background-image: -webkit-linear-gradient(top, #4286F5, #194FDB)!important; color: white!important; cursor: pointer!important; } 调用示例: $(e.target).hoverEl();

javascript , ,

Javascript 堆栈跟踪

28. 三月 2014
Javascript 堆栈跟踪 https://github.com/stacktracejs/stacktrace.js

javascript

FullscreenOverlay全局菜单层效果

20. 二月 2014
      实现方法: 1.载入css文件: @charset "utf-8"; /* CSS Document */ .overlay-hugeinc.open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .overlay-hugeinc { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } /* Effects */ .overlay-slidedown { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s; transition: transform 0.4s ease-in-out, visibility 0s 0.4s; } .overlay-slidedown.open { visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; } /* Effects */ .overlay-corner { opacity: 0; visibility: hidden; -webkit-transform: translateY(50px) translateX(50px); transform: translateY(50px) translateX(50px); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, transform 0.5s, visibility 0s 0.5s; } .overlay-corner.open { opacity: 1; visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; } .overlay-scale { visibility: hidden; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s; transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; } .overlay-scale.open { visibility: visible; opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; } .overlay-contentpush { background: rgba(153,204,51,1); visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s; } .overlay-contentpush.open { visibility: visible; -webkit-transform: translateX(0%); transform: translateX(0%); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .overlay-contentscale { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s; transition: transform 0.5s, visibility 0s 0.5s; } .overlay-contentscale.open { visibility: visible; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .overlay { z-index: 1; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(153,204,51,0.9); } .overlay .overlay-close { width: 80px; height: 80px; position: absolute; right: 20px; top: 20px; overflow: hidden; border: none; background: url(../../img/cross.png) no-repeat center center; text-indent: 200%; color: transparent; outline: none; z-index: 100; } .overlay-hugeinc nav { -webkit-perspective: 1200px; perspective: 1200px; } .overlay nav { text-align: center; position: relative; top: 50%; height: 60%; font-size: 54px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .overlay-hugeinc.open nav ul { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .overlay-hugeinc nav ul { opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg); -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s; } .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative; } .overlay ul li { display: block; height: 20%; height: calc(100% / 5); min-height: 54px; } .overlay ul li a { font-weight: 300; display: block; color: #fff; -webkit-transition: color 0.2s; transition: color 0.2s; } /* a { color: #99cc33; text-decoration: none; outline: none; }*/ 2.载入js文件 modernizr.custom.js 和 classie.js   操作的JS: /** * Created with JetBrains WebStorm. * User: ChenFeng * Date: 14-2-20 * Time: 上午10:14 * To change this template use File | Settings | File Templates. */ define(function(require, exports, module){ var common = require('../common'); var triggerBttn = document.getElementById( 'bbb' ), overlay = document.querySelector( 'div.overlay' ), closeBttn = overlay.querySelector( 'button.overlay-close' ); transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], support = { transitions : Modernizr.csstransitions }; common.toggleOverlay1=function(){ if( classie.has( overlay, 'open' ) ) { classie.remove( overlay, 'open' ); classie.add( overlay, 'close' ); var onEndTransitionFn = function( ev ) { if( support.transitions ) { if( ev.propertyName !== 'visibility' ) return; this.removeEventListener( transEndEventName, onEndTransitionFn ); } classie.remove( overlay, 'close' ); }; if( support.transitions ) { overlay.addEventListener( transEndEventName, onEndTransitionFn ); } else { onEndTransitionFn(); } } else if( !classie.has( overlay, 'close' ) ) { classie.add( overlay, 'open' ); } }; /*triggerBttn.addEventListener( 'click', common.toggleOverlay1 ); closeBttn.addEventListener( 'click', common.toggleOverlay1 );*/ $("#bbb").hover().on("click",common.toggleOverlay1); $("div.overlay button.overlay-close").hover().on("click",common.toggleOverlay1); }); Html代码: <div class="overlay overlay-hugeinc"> <button type="button" class="overlay-close">Close</button> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div>   示例下载: plugin.rar (83.79 kb)

javascript

不用JQuery如何对元素绑定一个Click事件

20. 二月 2014
举个例子: 假设有一个id为bbb的元素 triggerBttn = document.getElementById( 'bbb' ) triggerBttn.addEventListener( 'click', function(){ alert(123); } );

javascript

backbones.localStorage清除数据方法

18. 二月 2014
将整个collection中的数据条目删除 weiboStore.each(function(model) { model.destroy(); } )

Backbones, javascript

javascript生成时间戳

19. 十一月 2013
+new Date()

javascript

javascript内嵌iframe刷新

16. 十一月 2013
document.getElementById("sinaLoginIframe").src = common.webWeiboLoginUrl;

javascript

javascript获得内嵌同域iframe的url

16. 十一月 2013
window.frames["sinaLoginIframe"].location.href;

javascript

jquery手机上的keyup事件的代替方案

16. 十一月 2013
使用input事件

javascript

更加好的使用javascript原生方法改变radio控件的选中值

30. 八月 2013
var _this=e.currentTarget; 复制代码 $(" li input.radio").removeAttr("checked"); _this.find("input.radio").attr("checked", "checked");* 复制代码 可以更好的替换为: _this.find("input.radio")[0].checked = true; 复制代码

javascript, JQuery

Javascript如何清除金额中的逗号

21. 八月 2013
Javascript如何清除金额中的,号 使用replace方法 示例: .replace(/\,/g,''));  

javascript