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

JS定义小数位

24. 四月 2013
参考:http://www.w3school.com.cn/js/jsref_tofixed.asp 使用tofixed方法 Show the number 13.37 with one decimal: <script type="text/javascript"> var num = new Number(13.37); document.write (num.toFixed(1)) </script>

javascript

JS获得当前日期

24. 四月 2013
参考:http://stackoverflow.com/questions/1056728/formatting-a-date-in-javascript 写一个函数方法:http://www.cnblogs.com/zhangpengshou/archive/2012/07/19/2599053.html 或者: I love 10 ways to format time and date using JavaScript and Working with Dates. Basically, you have three methods and you have to combine the strings for yourself: getDate():Returns the date getMonth():Returns the month getFullYear():Returns the year Example: <script type="text/javascript"> var d = new Date(); var curr_date = d.getDate(); var curr_month = d.getMonth() + 1; //Months are zero based var curr_year = d.getFullYear(); document.write(curr_date + "-" + curr_month + "-" + curr_year); </script>

javascript

js 格式化数字金额

15. 四月 2013
转自:http://yafei.iteye.com/blog/728978 这个问题今天花了十分钟,好不容易找到一个,别人写的,分享一下。 例如: 12345格式化为12,345.00 12345.6格式化为12,345.60 12345.67格式化为 12,345.67 只留两位小数。 回来后写了个格式化函数。可以控制小数位数,自动四舍五入。 代码如下:  Java代码   function fmoney(s, n)   {      n = n > 0 && n <= 20 ? n : 2;      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";      var l = s.split(".")[0].split("").reverse(),      r = s.split(".")[1];      t = "";      for(i = 0; i < l.length; i ++ )      {         t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");      }      return t.split("").reverse().join("") + "." + r;   }   调用:fmoney("12345.675910", 3),返回12,345.676 还原函数:  Java代码   function rmoney(s)   {      return parseFloat(s.replace(/[^\d\.-]/g, ""));   }   示例(可保存一下代码为html文件,运行查看效果):  Java代码   <SCRIPT>   function fmoney(s, n)   {      n = n > 0 && n <= 20 ? n : 2;      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";      var l = s.split(".")[0].split("").reverse(),      r = s.split(".")[1];      t = "";      for(i = 0; i < l.length; i ++ )      {         t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");      }      return t.split("").reverse().join("") + "." + r;   }   function rmoney(s)   {      return parseFloat(s.replace(/[^\d\.-]/g, ""));   }   function g(id)   {      return document.getElementById(id);   }   window.onload = function()   {      var num,      txt = g("txt"),      txt2 = g("txt2"),      btn = g("btn"),      btn2 = g("btn2"),      span = g("span");      btn.onclick = function()      {         num = parseInt(g("num").value);         txt.value = fmoney(txt.value, num);         txt2.value = fmoney(txt2.value, num);      }      ;      btn2.onclick = function()      {         num = parseInt(g("num").value);         span.innerHTML = "=" + fmoney(rmoney(txt.value) + rmoney(txt2.value), num);      }      ;   }   ;   </SCRIPT>   小数点位数:   <select id="num">   <option value="2">2</option>   <option value="3">3</option>   <option value="4">4</option>   <option value="5">5</option>   </select>   <input type="text" id="txt" value="12345.675910"> +   <input type="text" id="txt2" value="1223"> <span id="span"></span>   <br>   <input type="button" id="btn" value="格式化">   <input type="button" id="btn2" value="相加">  

javascript

Jquery Easing 插件制作Jquery的滑动弹出效果

11. 四月 2013
  如何使用 1.引用script <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>         <script type="text/javascript" src="js/jquery.easing.js"></script>   2.调用方法: $(me.attr("for")).stop(true, true).delay(300).slideToggle  ({                        duration: 100,                        easing: "easeOutExpo"                    }); 参考:http://gsgd.co.uk/sandbox/jquery/easing/#example

javascript

JS防止脚本注入(替换特殊字符)

10. 四月 2013
htmlEncode: (function() { var entities = { '&': '&amp;', '>': '&gt;', '<': '&lt;', '"': '&quot;' }, keys = [], p, regex; for (p in entities) { keys.push(p); } regex = new RegExp('(' + keys.join('|') + ')', 'g'); return function(value) { return (!value) ? value : String(value).replace(regex, function(match, capture) { return entities[capture]; }); }; })() 使用时再将html字符转回 htmlDecode: (function() { var entities = { '&amp;': '&', '&gt;': '>', '&lt;': '<', '&quot;': '"' }, keys = [], p, regex; for (p in entities) { keys.push(p); } regex = new RegExp('(' + keys.join('|') + '|&#[0-9]{1,5};' + ')', 'g'); return function(value) { return (!value) ? value : String(value).replace(regex, function(match, capture) { if (capture in entities) { return entities[capture]; } else { return String.fromCharCode(parseInt(capture.substr(2), 10)); } }); }; })(),

javascript

JavaScript isNaN() 函数

27. 三月 2013
参考:http://www.w3school.com.cn/js/jsref_isnan.asp 简单来说就是判断一个变量是否是字符串,是字符串返回true,不是返回false,经常用来判断变量是否是数字。 举例: 检查数字是否非法: <script> document.write(isNaN(123)); document.write(isNaN(-1.23)); document.write(isNaN(5-2)); document.write(isNaN(0)); document.write(isNaN("Hello")); document.write(isNaN("2005/12/12")); </script> 输出: false false false false true true

javascript

javascrip中radix(基数)的意思

27. 三月 2013
参考:http://zhidao.baidu.com/question/349879872.html 经常我们会在parseInt(string, radix)方法中看到这个参数,说白了就是配置10进制或者2进制,用了一个专业的名词大家可能不明白。 举例: parseInt() 函数可解析一个字符串,并返回一个整数。函数格式:parseInt(string, radix)参数 描述: string 必需。要被解析的字符串。 radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0,则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头,将以 16 为基数。如果该参数小于 2 或者大于 36,则 parseInt() 将返回 NaN。 返回值:返回解析后的数字。说明:当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。举例,如果 string 以 "0x" 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。例如parseInt("10"); //返回 10parseInt("19",10); //返回 19 (10+9)parseInt("11",2); //返回 3 (2+1)parseInt("17",8); //返回 15 (8+7)parseInt("1f",16); //返回 31 (16+15)parseInt("010"); //未定:返回 10 或 8  

javascript

如何在javascript中将一个string变量转成decimal/money

27. 三月 2013
转自:http://stackoverflow.com/questions/6095795/convert-a-javascript-string-variable-to-decimal-money 方法一: 使用parseFloat 注意:最好配置基数,这里因为配置了10参数系统会根据10进制转换这个string变量 例如: parseFloat(document.getElementById(amtid4).innerHTML, 10) 添加小数的话:使用 toFixed: 例如: var num = parseFloat(document.getElementById(amtid4).innerHTML, 10).toFixed(2); 方法二: 使用number方法 举例: Number('09');/=>9Number('09.0987');/=>9.0987 对于做金额输入框来说可以是必备的js方法

javascript

javascript中的keydown事件中的参数问题(附键盘按钮事件编码)

26. 三月 2013
javascript中的keydown事件中的参数问题 转自:http://www.iteye.com/problems/20698 我们经常可以看到的keydown事件是有参数,这个参数我们暂定其为event,通过event参数我们可以获得用户键盘点击的情况 举例: function KeyDown(event) {  alert(event.keyCode);} 如此我们就可以根据keycode判断用户点击的是哪一个参数了 其中除了变量event的keycode参数外还有: event.keyCode == 13(回车?)//判断输入的键代码是不是13, event.returnValue = false; // 事件返回值false event.cancel = true  //取消事件  附按钮事件参考: 另附:event.keycode值,方便以后查阅 event.keycode值大全   1 keycode 8 = BackSpace BackSpace   2 keycode 9 = Tab Tab   3 keycode 12 = Clear   4 keycode 13 = Enter   5 keycode 16 = Shift_L   6 keycode 17 = Control_L   7 keycode 18 = Alt_L   8 keycode 19 = Pause   9 keycode 20 = Caps_Lock 10 keycode 27 = Escape Escape 11 keycode 32 = space space 12 keycode 33 = Prior 13 keycode 34 = Next 14 keycode 35 = End 15 keycode 36 = Home 16 keycode 37 = Left 17 keycode 38 = Up 18 keycode 39 = Right 19 keycode 40 = Down 20 keycode 41 = Select 21 keycode 42 = Print 22 keycode 43 = Execute 23 keycode 45 = Insert 24 keycode 46 = Delete 25 keycode 47 = Help 26 keycode 48 = 0 equal braceright 27 keycode 49 = 1 exclam onesuperior 28 keycode 50 = 2 quotedbl twosuperior 29 keycode 51 = 3 section threesuperior 30 keycode 52 = 4 dollar 31 keycode 53 = 5 percent 32 keycode 54 = 6 ampersand 33 keycode 55 = 7 slash braceleft 34 keycode 56 = 8 parenleft bracketleft 35 keycode 57 = 9 parenright bracketright 36 keycode 65 = a A 37 keycode 66 = b B 38 keycode 67 = c C 39 keycode 68 = d D 40 keycode 69 = e E EuroSign 41 keycode 70 = f F 42 43 keycode 71 = g G 44 keycode 72 = h H 45 keycode 73 = i I 46 keycode 74 = j J 47 keycode 75 = k K 48 keycode 76 = l L 49 keycode 77 = m M mu 50 keycode 78 = n N 51 keycode 79 = o O 52 keycode 80 = p P 53 keycode 81 = q Q at 54 keycode 82 = r R 55 keycode 83 = s S 56 keycode 84 = t T 57 keycode 85 = u U 58 keycode 86 = v V 59 keycode 87 = w W 60 keycode 88 = x X 61 keycode 89 = y Y 62 keycode 90 = z Z 63 keycode 96 = KP_0 KP_0 64 keycode 97 = KP_1 KP_1 65 keycode 98 = KP_2 KP_2 66 keycode 99 = KP_3 KP_3 67 keycode 100 = KP_4 KP_4 68 keycode 101 = KP_5 KP_5 69 keycode 102 = KP_6 KP_6 70 keycode 103 = KP_7 KP_7 71 keycode 104 = KP_8 KP_8 72 keycode 105 = KP_9 KP_9 73 keycode 106 = KP_Multiply KP_Multiply 74 keycode 107 = KP_Add KP_Add 75 76 keycode 108 = KP_Separator KP_Separator 77 keycode 109 = KP_Subtract KP_Subtract 78 keycode 110 = KP_Decimal KP_Decimal 79 keycode 111 = KP_Divide KP_Divide 80 keycode 112 = F1 81 keycode 113 = F2 82 keycode 114 = F3 83 keycode 115 = F4 84 85 86 keycode 116 = F5 87 keycode 117 = F6 88 keycode 118 = F7 89 keycode 119 = F8 90 keycode 120 = F9 91 keycode 121 = F10 92 keycode 122 = F11 93 keycode 123 = F12 94 keycode 124 = F13 95 keycode 125 = F14 96 keycode 126 = F15 97 keycode 127 = F16 98 keycode 128 = F17 99 keycode 129 = F18 100 keycode 130 = F19 101 keycode 131 = F20 102 keycode 132 = F21 103 keycode 133 = F22 104 keycode 134 = F23 105 keycode 135 = F24 106 keycode 136 = Num_Lock 107 keycode 137 = Scroll_Lock 108 keycode 187 = acute grave 109 keycode 188 = comma semicolon 110 keycode 189 = minus underscore 111 keycode 190 = period colon 112 keycode 192 = numbersign apostrophe 113 keycode 210 = plusminus hyphen macron 114 keycode 211 = 115 keycode 212 = copyright registered 116 keycode 213 = guillemotleft guillemotright 117 keycode 214 = masculine ordfeminine 118 keycode 215 = ae AE 119 keycode 216 = cent yen 120 keycode 217 = questiondown exclamdown 121 keycode 218 = onequarter onehalf threequarters 122 keycode 220 = less greater bar 123 keycode 221 = plus asterisk asciitilde 124 keycode 227 = multiply division 125 126 keycode 228 = acircumflex Acircumflex 127 keycode 229 = ecircumflex Ecircumflex 128 keycode 230 = icircumflex Icircumflex 129 keycode 231 = ocircumflex Ocircumflex 130 keycode 232 = ucircumflex Ucircumflex 131 keycode 233 = ntilde Ntilde 132 keycode 234 = yacute Yacute 133 keycode 235 = oslash Ooblique 134 keycode 236 = aring Aring 135 keycode 237 = ccedilla Ccedilla 136 keycode 238 = thorn THORN 137 keycode 239 = eth ETH 138 keycode 240 = diaeresis cedilla currency 139 keycode 241 = agrave Agrave atilde Atilde 140 keycode 242 = egrave Egrave 141 keycode 243 = igrave Igrave 142 keycode 244 = ograve Ograve otilde Otilde 143 keycode 245 = ugrave Ugrave 144 keycode 246 = adiaeresis Adiaeresis 145 keycode 247 = ediaeresis Ediaeresis 146 keycode 248 = idiaeresis Idiaeresis 147 keycode 249 = odiaeresis Odiaeresis 148 keycode 250 = udiaeresis Udiaeresis 149 keycode 251 = ssharp question backslash 150 keycode 252 = asciicircum degree 151 keycode 253 = 3 sterling 152 keycode 254 = Mode_switch 153 154 使用event对象的keyCode属性判断输入的键值 155 eg:if(event.keyCode==13)alert(“enter!”); 156 键值对应表 157 A  0X65  U   0X85 158 B  0X66  V   0X86 159 C  0X67  W   0X87 160 D  0X68  X   0X88 161 E  0X69  Y   0X89 162 F  0X70  Z   0X90 163 G  0X71  0   0X48 164 H  0X72  1   0X49 165 I   0X73  2   0X50 166 J   0X74  3   0X51 167 K  0X75  4   0X52 168 L  0X76  5   0X53 169 M  0X77  6   0X54 170 N  0X78  7   0X55 171 O  0X79  8   0X56 172 P  0X80  9   0X57 173 Q  0X81 ESC  0X1B 174 R  0X82 CTRL  0X11 175 S  0X83 SHIFT 0X10 176 T  0X84 ENTER 0XD 177 178 如果要使用组合键,则可以利用event.ctrlKey,event.shiftKey,event .altKey判断是否按下了ctrl键、shift键以及alt键

javascript

js身份证15位转18

26. 三月 2013
15位转18位是有一个算法的: exports.C15ToC18 = function(c15) {         var cId;         if (!exports.isdate("19" + c15.substring(4, 8), c15.substring(8, 10), c15.substring(10, 12))) {             alert("身份证号码中所含日期不正确");             return false;         }         cId = c15.substring(0, 6) + "19" + c15.substring(6, 15);         var strJiaoYan = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];         var intQuan = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];         var intTemp = 0;         for (i = 0; i < cId.length; i++)             intTemp += cId.substring(i, i + 1) * intQuan[i];         intTemp %= 11;         cId += +strJiaoYan[intTemp];         return cId;     };   exports.isdate = function (intYear, intMonth, intDay) {         if (isNaN(intYear) || isNaN(intMonth) || isNaN(intDay)) return false;         if (intMonth > 12 || intMonth < 1) return false;         if (intDay < 1 || intDay > 31) return false;         if ((intMonth == 4 || intMonth == 6 || intMonth == 9 || intMonth == 11) && (intDay > 30)) return false;         if (intMonth == 2) {             if (intDay > 29) return false;             if ((((intYear % 100 == 0) && (intYear % 400 != 0)) || (intYear % 4 != 0)) && (intDay > 28)) return false;         }         return true;     }

javascript

如何用JS判断IE浏览器的版本

21. 三月 2013
转自:http://zhidao.baidu.com/question/313361308.html <script type="text/javascript"> var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0") { alert("IE 7.0"); } else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0") { alert("IE 6.0"); } </script>

javascript

js防止用户回退操作

21. 三月 2013
window.history.forward(1);

javascript

coffeejs判断变量是否为undefined以及非null

19. 三月 2013
示例: if typeof(param)!="undefined" and param!=null

javascript

js判断360游览器(区分高渲染模式与低渲染模式)

19. 三月 2013
判断低渲染模式: if(window.external&&window.external.twGetRunPath&&window.external.twGetRunPath().toLowerCase().indexOf("360se")>-1&&document.documentMode!=9) {      alert("360低渲染模式(z-index属性可能有bug)"); }   判断高渲染模式 if(window.external&&window.external.twGetRunPath&&window.external.twGetRunPath().toLowerCase().indexOf("360se")>-1&&document.documentMode==9) {      alert("360高渲染模式"); }

javascript

一个封装了localStorage的增删改查的方法

14. 三月 2013
一个封装了localStorage的增删改查的方法 原文:http://www.haogongju.net/art/1743299 localStorage的增删改查都其实比较简单,每次需要判断浏览器是否禁用,这挺麻烦的; 而且没有像COOKIE一样的,自动过期时间,长期下去会有垃圾数据在里面;我们知道android的系统只支持5M存储空间,iphon是10MB,一旦超过限制会提示用户,甚至报错。   一、包含一下功能: 1、定时清理localStorage; 2、支持过期时间; 3、检测浏览器是否禁用localStorage; 二、顺便贴一个COOKIE的存取方法,接口类似: (function($){ /* * $.cookie('name', 'test',{expires: 7}); //设置 * * */ $.cookie = function(name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); return this; } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } }; /* * * $.localStorage('test') //get * $.localStorage('test',123) //set * $.localStorage('test',{value:123}) //set * $.localStorage('test',{value:123}, 1) //set * $.localStorage('test',null) //remove * */ var isCache=true, minutes = 1000*60, now = Date.now(); try { localStorage.setItem('cache','test'); } catch (e) { isCache= false; } resetCache = function(time){//定时清理 if(!isCache) return ; var expires, day= minutes*60*24; time = time || 0; if((expires=localStorage.getItem('_expires')) && expires>now){ return false; } var len= localStorage.length,item,key,t; for(var i=0; i<len; i++){ key= localStorage.key(i); item=localStorage.getItem(key); if(item && item.indexOf('_expires')!=-1){ t=item.match(/_expires":(\d+)/)[1]; if(now<t){ continue; } } localStorage.removeItem(key); } return localStorage.setItem('_expires', day*time); } resetCache(60); //2个月检测一遍 $.localStorage = function(name, value, time) { if(!isCache) return false; if (typeof value != 'undefined') { //set if(value===null){ return localStorage.removeItem(name); } if(!isNaN(+time)){ value = {value: value, _expires : now+time*minutes}; } localStorage.setItem(name,JSON.stringify(value)); return value.value || value; }else{ //get var localValue = null,st,et; localValue = localStorage.getItem(name); try { localValue = JSON.parse(localValue); } catch (e) { return localValue; } if($.isObject(localValue) && (et=localValue._expires) ){ if(now > et){ localStorage.removeItem(name); localValue=null; }else{ localValue = localValue['value']; } } return localValue; } }; })(Zepto);

javascript

18位身份证号如何转成15位

12. 三月 2013
就是把18位的生日年份,由4位改为2位,如1980改为80。还有去掉18位的最后一位,即可 js方法:   //cfxixi code 新增身份证18位转15位的逻辑 exports.C18ToC15 = function (c18) { var cId; if (!exports.isdate(c18.substring(6, 10), c18.substring(10, 12), c18.substring(12, 14))) { alert("身份证号码中所含日期不正确"); return false; } cId = c18.substring(0, 6) + c18.substring(8, 17); return cId; }; //cfxixi code end exports.isdate = function (intYear, intMonth, intDay) { if (isNaN(intYear) || isNaN(intMonth) || isNaN(intDay)) return false; if (intMonth > 12 || intMonth < 1) return false; if (intDay < 1 || intDay > 31) return false; if ((intMonth == 4 || intMonth == 6 || intMonth == 9 || intMonth == 11) && (intDay > 30)) return false; if (intMonth == 2) { if (intDay > 29) return false; if ((((intYear % 100 == 0) && (intYear % 400 != 0)) || (intYear % 4 != 0)) && (intDay > 28)) return false; } return true; }  

javascript, 综合

【Javascript】解决window.location.origin在ie下显示undefined的问题

7. 三月 2013
【Javascript】解决window.location.origin在ie下显示undefined的问题 pathArray = window.location.pathname.split( '/' ) host = pathArray[0] 以host基础拼上你希望去到的url就能替代使用window.location.origin p.s window.location.origin只有webkit的游览器上能够使用,也就是说chrome和safari上才有效 参考:http://stackoverflow.com/questions/1420881/javascript-jquery-method-to-find-base-url-from-a-string

javascript

Javascript倒计时三秒然后跳转

5. 三月 2013
Javascript倒计时三秒然后跳转    <script type="text/javascript" language="javascript">         function reloadlogin() {             window.location.href = "/home/index";         }         window.setTimeout("reloadlogin();", 3000);         var iTime = 3;         function sett() {             document.getElementById("next").innerHTML = iTime;             iTime--;             if (iTime >= 0) {                  setTimeout("sett()", 1000);             }         }         sett();     </script>

javascript

JQuery Validation如何启用

4. 三月 2013
引入jq_validation.js以及jquery然后调用 $('form').first().validationEngine();

javascript

Javascript 时间比较方法

28. 二月 2013
var duetTimeVal = duetTimeInput.replace("-", "/"); var vald = new Date(duetTimeVal); var nowDate = new Date(); if (vald <= nowDate)alert "日期不能小于等于今天" return false

javascript

javascript动态加载一个script

27. 二月 2013
假设有一个cfy对象 配置sUrl(文件地址),sBianMa(编码),fCallback(回调函数) var CFY={  CFY.prototype.$jsLoad = function (sUrl, sBianMa, fCallback) {         var _js = document.createElement('script');         _js.setAttribute('charset', sBianMa);         _js.setAttribute('type', 'text/javascript');         _js.setAttribute('src', sUrl);         document.getElementsByTagName('head')[0].appendChild(_js);         _js.onload = _js.onreadystatechange = function () {             if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {                 fCallback(_js);             }         }     } }  

javascript

初探使用artdialog弹出一个输入框

27. 二月 2013
一般弹出artdialog及其简单 首先下载插件:http://aui.github.com/artDialog/ 或 https://code.google.com/p/artdialog/downloads/list 引用js <script src="./artDialog.plugins.min.js"></script>   var Win = $.dialog({           width: '550px',           height: '200px',           padding: 0,           title: 'bbb',           content: 'aaa'         });         Win.lock();//背景阴影化     如此便可弹出一个artdialog 文档参数以及详细api文档:http://www.planeart.cn/demo/artDialog/_doc/API.html 高级应用: 初始化一个带loading的空对话框使用ajax,然后通过ajax取数据   var myDialog = art.dialog();// 初始化一个带有loading图标的空对话框 jQuery.ajax({ url: 'http://web5.qq.com/content?id=1', success: function (data) { myDialog.content(data);// 填充对话框内容 } });  

javascript

Javascript中"._"什么意思

27. 二月 2013
参考:http://stackoverflow.com/questions/5418279/what-does-means-here 我们经常在underscore.js中看到 varobject={}; _.extend(object,Backbone.Events); 这一写法实际上 _ is the object created by Underscore.js, in the same way as $ is the jQuery object 也就是说_等同于jquery中的$ 详细参考:http://documentcloud.github.com/underscore/#extend

javascript

仿照天天基金网的在线客服banner写了一个js滑动banner的效果

26. 二月 2013
仿照天天基金网的在线客服banner写了一个js滑动banner的效果效果:做法:通过写一个左右布局的样式,将两张图片固定并排显示在游览器最右侧(将最右边的图片右移置于游览器看不到的地方)当用户鼠标hover左侧图片时,可以调用jquery中的slide动画或者自己写javascript将图片滑出(实际上市修改图片的margin-right)这样就形成了我们看到的滑动客户效果 Demo下载: http://www.cfxixi.com/showtopic-568.aspx或http://bbs.cfxixi.com/showtopic-568.aspx  

javascript

Javascript 读取游览器的url

25. 二月 2013
假设url:http://localhost:2925/FundtradePage/redemption?aaa=77 通过location.href 得到的是http://localhost:2925/FundtradePage/redemption location.orign得到:http://localhost:2925 location.pathname得到:/FundtradePage/redemption location.port得到2925 location.protocol:http:// location.host得到:localhost:2925 location.hostname得到:localhost

javascript

用javascript判断一个html元素是否存在的五种方法

22. 二月 2013
转自:http://www.phpzixue.cn/detail1041.shtml 用javascript判断一个html元素是否存在的五种方法: 1. 判断表单元素是否存在(一) if("periodPerMonth" in document.theForm){ return true; }else{ return false; } 2. 判断页面元素是否存在 if(document.getElementById("XXX")){ //存在 } 3. 判断表单元素是否存在(二) if(document.theForm.periodPerMonth){ //存在 } 或 if(typeof(document.theForm.periodPerMonth)=="object"){ //存在 } 4. 判断表单是否存在 if(document.theForm){ //存在 } 5.用Jquery写脚本 if ( $("#someID").length > 0 ){ $("#someID").text("hi"); } 

javascript

Javascript获得某元素的第一个子元素然后插入一个元素

21. 二月 2013
获得某元素的第一个子元素: var element = document.getElementById('tbb-0'); var firstChild=element.firstChild;   插入的方式有两种: 第一种是在某元素之前插入: 首先js动态生成一个dom(id:aaa) var newEle = document.createElement('div');                     newEle.innerHTML = '请输入验证码!人工帮助请拨打:aaa<span class="close" title="关闭"></span>';                     newEle.className = "w303 notifi errorr";                     newEle.setAttribute("id", "aaa");   然后添加在某元素之前: element.insertBefore(newEle, firstChild);   第二种是成为某元素的子级元素中的最后一个 element.appendChild(newEle);

javascript

Javascript动态添加删除dom实现(不用Jquery的append)

21. 二月 2013
参考:http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/ Javascript动态添加删除dom(不用Jquery的append)js的方法代码: function addElement() { var ni = document.getElementById('myDiv'); var numi = document.getElementById('theValue'); var num = (document.getElementById('theValue').value -1)+ 2; numi.value = num; var newdiv = document.createElement('div'); var divIdName = 'my'+num+'Div'; newdiv.setAttribute('id',divIdName); newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement("'+divIdName+'")\'>Remove the div "'+divIdName+'"</a>'; ni.appendChild(newdiv); } function removeElement(divNum) { var d = document.getElementById('myDiv'); var olddiv = document.getElementById(divNum); d.removeChild(olddiv); } Html代码: <input type="hidden" value="0" id="theValue" /> <p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p> <div id="myDiv"> </div> 附件下载: Javascript动态添加删除dom(不用Jquery的append).rar (971.00 bytes)

javascript

如何对anchor元素绑定click事件

20. 二月 2013
参考:http://stackoverflow.com/questions/7347786/html-anchor-tag-with-javascript-onclick-event 如果return false  默认取消游览器的点击事件   If your onclick function returns false the default browser behaviour is cancelled. As such: <a href='http://www.google.com' onclick='return check()'>check</a> <script type='text/javascript'> function check() { return false; } </script> Either way, wether google does it or not isnt of much importance. Its cleaner to bind your onclick functions within javascript, that way you seperate your HTML from other code.  

javascript

CSS+JS实现DIV蒙板效果(弹出一个浮层)

20. 二月 2013
参考:http://hi.baidu.com/renee990/item/5fad5808ff055d1ceafe38d2 点击Show covert DIV,弹出popWindow窗口,背景被透明蒙板覆盖,下层内容操作失效,代码如下: <html> <head> <style type="text/css"> .popWindow{ text-align: center; z-index:2; width:500px; height:300px; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; position: absolute; background:#FFFFFF; } .head-box{ width:500px; height:25px; background:#4A4AFF; } .maskLayer { background-color:#9D9D9D; width: 100%; height: 100%; left: 0; top: 0; filter: alpha(opacity=50); opacity: 0.5; z-index: 1; position: absolute; } </style> <script language="javascript" type="text/javascript"> function showDiv() { document.getElementById('popWindow').style.display = 'block'; document.getElementById('maskLayer').style.display = 'block'; } function closeDiv() { document.getElementById('popWindow').style.display = 'none'; document.getElementById('maskLayer').style.display = 'none'; } </script> </head> <body> <div onclick="showDiv()" style="display:block; cursor:pointer"> Show covert DIV </div> <div id="popWindow" class="popWindow" style="display: none;"> <div class="head-box" style="text-align:right;"> <a href="#" onclick="closeDiv()" style="cursor:pointer;text-decoration: none;"> <font style="font-size :20px;"> X </font></a> </div> <div class="body-box"> <input type="button" value="Back" onclick="closeDiv()" style="cursor:pointer"/> </div> </div> <div id="maskLayer" class="maskLayer" style="display: none;"> </div> </body> </html> 附件: CSS+JS实现DIV蒙板效果.rar (1.10 kb)

javascript

不用jquery实现$(document).ready()效果

19. 二月 2013
参考:http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery 方法1: (function() {     alert(2); }).call(this);   I stitched together a "ready" function like jQuery.ready() based on jQuery 1.6.2 source var ReadyObj = { // Is the DOM ready to be used? Set to true once it occurs. isReady: false, // A counter to track how many items to wait for before // the ready event fires. See #6781 readyWait: 1, // Hold (or release) the ready event holdReady: function( hold ) { if ( hold ) { ReadyObj.readyWait++; } else { ReadyObj.ready( true ); } }, // Handle when the DOM is ready ready: function( wait ) { // Either a released hold or an DOMready/load event and not yet ready if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( !document.body ) { return setTimeout( ReadyObj.ready, 1 ); } // Remember that the DOM is ready ReadyObj.isReady = true; // If a normal DOM Ready event fired, decrement, and wait if need be if ( wait !== true && --ReadyObj.readyWait > 0 ) { return; } // If there are functions bound, to execute readyList.resolveWith( document, [ ReadyObj ] ); // Trigger any bound ready events //if ( ReadyObj.fn.trigger ) { // ReadyObj( document ).trigger( "ready" ).unbind( "ready" ); //} } }, bindReady: function() { if ( readyList ) { return; } readyList = ReadyObj._Deferred(); // Catch cases where $(document).ready() is called after the // browser event has already occurred. if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready return setTimeout( ReadyObj.ready, 1 ); } // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", ReadyObj.ready, false ); // If IE event model is used } else if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", ReadyObj.ready ); // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } } }, _Deferred: function() { var // callbacks list callbacks = [], // stored [ context , args ] fired, // to avoid firing when already doing so firing, // flag to know if the deferred has been cancelled cancelled, // the deferred itself deferred = { // done( f1, f2, ...) done: function() { if ( !cancelled ) { var args = arguments, i, length, elem, type, _fired; if ( fired ) { _fired = fired; fired = 0; } for ( i = 0, length = args.length; i < length; i++ ) { elem = args[ i ]; type = ReadyObj.type( elem ); if ( type === "array" ) { deferred.done.apply( deferred, elem ); } else if ( type === "function" ) { callbacks.push( elem ); } } if ( _fired ) { deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] ); } } return this; }, // resolve with given context and args resolveWith: function( context, args ) { if ( !cancelled && !fired && !firing ) { // make sure args are available (#8421) args = args || []; firing = 1; try { while( callbacks[ 0 ] ) { callbacks.shift().apply( context, args );//shifts a callback, and applies it to document } } finally { fired = [ context, args ]; firing = 0; } } return this; }, // resolve with this as context and given arguments resolve: function() { deferred.resolveWith( this, arguments ); return this; }, // Has this deferred been resolved? isResolved: function() { return !!( firing || fired ); }, // Cancel cancel: function() { cancelled = 1; callbacks = []; return this; } }; return deferred; }, type: function( obj ) { return obj == null ? String( obj ) : class2type[ Object.prototype.toString.call(obj) ] || "object"; } } // The DOM ready check for Internet Explorer function doScrollCheck() { if ( ReadyObj.isReady ) { return; } try { // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ document.documentElement.doScroll("left"); } catch(e) { setTimeout( doScrollCheck, 1 ); return; } // and execute any waiting functions ReadyObj.ready(); } // Cleanup functions for the document ready method if ( document.addEventListener ) { DOMContentLoaded = function() { document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); ReadyObj.ready(); }; } else if ( document.attachEvent ) { DOMContentLoaded = function() { // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443). if ( document.readyState === "complete" ) { document.detachEvent( "onreadystatechange", DOMContentLoaded ); ReadyObj.ready(); } }; } function ready( fn ) { // Attach the listeners ReadyObj.bindReady(); var type = ReadyObj.type( fn ); // Add the callback readyList.done( fn );//readyList is result of _Deferred() } return ready; })(); How to use: <script> ready(function(){ alert('it works!'); }); ready(function(){ alert('also works!'); }); </script> I am not sure how functional this code is, but it worked fine with my superficial tests. This took quite a while, so I hope you and others can benefit from it. p.s. I suggest compiling it Edit: or you can use http://dustindiaz.com/smallest-domready-ever function r(f){/in/(document.readyState)?setTimeout(r,9,f):f()} r(function(){/*code to run*/}); or the native function if you only need to support the new browsers document.addEventListener('DOMContentLoaded',function(){/*fun code to run*/})  

javascript

js 识别 ie 游览器

19. 二月 2013
参考:http://feilong.org/shortest-ie6-judge-means js 识别 ie 游览器 var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; var isIE8=isIE&&!!document.documentMode; var isIE7=isIE&&!isIE6&&!isIE8; if (isIE){ if (isIE6){ alert(”ie6′); }else if (isIE8){ alert(”ie8′); }else if (isIE7){ alert(”ie7′); } }

javascript

js实现滑动效果(通过修改dom的width)

18. 二月 2013
调用方式传入dom元素和起始宽度和最终宽度三个参数 js代码如下:     CFY.prototype.showing = function(obj, b, e) { var _this = this; _this.obj = obj; this.b = b; this.e = e; this.c = this.e - this.b; this.d = 20; this.t = 1; this.w = function(t, b, c, d) { //return c*(t/=d)*t + b; return -c * (t /= d) * (t - 2) + b; }; function run() { _this.obj.style.width = _this.w(_this.t, _this.b, _this.c, _this.d) + "px"; if (_this.t < _this.d) { _this.t++; setTimeout(run, 10); } } run(); };

javascript

javascript元素渐隐动画(不用jquery)

18. 二月 2013
不用jquery关于渐隐的实现 function fade(element) { var op = 1; // initial opacity var timer = setInterval(function () { if (op <= 0.1){ clearInterval(timer); element.style.display = 'none'; } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); } 改良后: 渐显与渐隐 fadeOut: function(element) { var op = 1; // initial opacity var timer = setInterval(function () { if (op <= 0.1) { clearInterval(timer); element.style.visibility='hidden'; } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op -= op * 0.1; }, 50); }, fadeIn: function (element) { var op = 0.01; // initial opacity var timer = setInterval(function () { if (op >= 0.9) { clearInterval(timer); element.style.visibility = 'visible'; } element.style.opacity = op; element.style.filter = 'alpha(opacity=' + op * 100 + ")"; op += op * 0.1; }, 50); },  

javascript

mouseover和mouseout多次触发解决方法(兼容ie和firefox)

18. 二月 2013
转自:http://www.cnblogs.com/shaojun/archive/2011/03/16/1986249.html 在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复 的触发mouseover和mouseout事件。因为内部元素在鼠标移上的时候会向它的父对象派发事件,所以外面元素相当于也触发了mouseover 事件。  为了阻止mouseover和mouseout的反复触发,这里要用到event对象的一个属性relatedTarget,这个属性就是用来判断 mouseover和mouseout事件目标节点的相关节点的属性。简单的来说就是当触发mouseover事件时,relatedTarget属性代 表的就是鼠标刚刚离开的那个节点,当触发mouseout事件时它代表的是鼠标移向的那个对象。由于MSIE不支持这个属性,不过它有代替的属性,分别是 fromElement和toElement。 有了这个属性,我们就能够清楚的知道我们的鼠标是从哪个对象移过来,又是要移动到哪里去了。这样我们就能够通过判断这个相关联的对象是否在我们要触发事件的对象的内部,或者是不是就是这个对象本身。通过这个判断我们就能够合理的选择是否真的要触发事件。 这里我们还用到了一个用于检查一个对象是否包含在另外一个对象中的方法,contains方法。MSIE和FireFox分别提供了检查的方法,这里封装了一个函数。   function contains(parentNode, childNode) { if (parentNode.contains) { return parentNode != childNode && parentNode.contains(childNode); } else { return!!(parentNode.compareDocumentPosition(childNode) &16); }}   这个函数用于检查一个对象是否被包含在我们的触发对象里面。 下面就是我们的重点了,我封装了一个用于检查鼠标是否真正从外部移入或者移出对象的函数checkHover(e,target),这个函数需要传入当前的事件对象和目标对象。 function checkHover(e,target){ if (getEvent(e).type=="mouseover") { return!contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) &&!((getEvent(e).relatedTarget||getEvent(e).fromElement)===target); } else { return!contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) &&!((getEvent(e).relatedTarget||getEvent(e).toElement)===target); }}function getEvent(e){ return e||window.event;} 函数里面用到的getEvent()函数用于在MSIE或者FF下返回一个可用的event对象,这里你可以自己封装成别的函数。 函数的逻辑很简单,首先判断事件的类型,这个主要是为了迁就MSIE,当是mouseover的时候relatedTarget在MSIE下应该是 fromElement,而mouseout则应该返回toElement,当然在FF下面就好办了,都是同一个属性relatedTarget。首先判 断我们的relatedTarget是否在目标对象的内部,如果是的话则直接返回假如果不在内部的话则判断是否是目标对象本身,如果是的话返回假,要是两 种情况都不成立则返回真。 到这里我们的主要工作做完了,有了这个函数我们在进行编程的时候只要在mouseover或者mouseout事件内部先检查一下,再进行下一步操作就能轻松实现hover的效果。 myElement.onmouseover=function(e){ if(checkHover(e,this)){ do someting... }}myElement.onmouseout=function(e){ if(checkHover(e,this)){ do someting... }}

javascript

js动态构建脚本

18. 二月 2013
用的时候直接调用aaa.builderScript();就能动态在header上动态附加一个tag /* 构建脚本 */ aaa.prototype.builderScript = function() { myScript = document.createElement("script"); document.getElementsByTagName('HEAD').item(0).appendChild(myScript); myScript.type = "text/javascript"; myScript.src = "/js/jquery-1.8.0.min.js"; };

javascript

window.open()弹出居中的窗口

18. 二月 2013
转自:http://www.jb51.net/article/6635.htm avascript代码 function openwindow(url,name,iWidth,iHeight){var url; //转向网页的地址;var name; //网页名称,可为空;var iWidth; //弹出窗口的宽度;var iHeight; //弹出窗口的高度;var iTop = (window.screen.availHeight-30-iHeight)/2; //获得窗口的垂直位置;var iLeft = (window.screen.availWidth-10-iWidth)/2; //获得窗口的水平位置;window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');} 使用时调用这个函数即可。如: <a href="javascript:void(0);" onclick="javascript:openwindow('a.html','',400,200);">转到a</a> 缺点:与原窗口的大小,位置无关。   开发中使用:   var iWidth=800; //弹出窗口的宽度; var iHeight=500; //弹出窗口的高度; var iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置; var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置; window.open(url, name, 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');  

javascript

iscroll中如何根据class实现滚动条

4. 一月 2013
参考:https://github.com/cubiq/iscroll/issues/180 通过选中对象的方式不一定通过id iScroll(document.querySelector('.myclass'))  

javascript, iScroll

Javascript根据tag获得dom对象

22. 十二月 2012
document.getElementsByTagName("p");

javascript, 前端开发

JavaScript join() 方法

17. 十二月 2012
join() 方法用于把数组中的所有元素放入一个字符串。 元素是通过指定的分隔符进行分隔的。   例子 1 在本例中,我们将创建一个数组,然后把它的所有元素放入一个字符串: <script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join()) </script> 输出: George,John,Thomas 例子 2 在本例中,我们将使用分隔符来分隔数组中的元素: <script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.join(".")) </script> 输出: George.John.Thomas

javascript