一.写在前面的话
最近一直忙于项目,加班回家已好晚,洗洗就睡了!但心里知道这样的生活不能持久,人活着就应该学习!所以正好项目迭代计划完成,今天可以对最近项目中用到的一些代码,进行一次总结,也是避免今后重复造轮子。我一直对自己说:撑不住的时候,可以对自己说声“我好累”,但永远不要在心里承认说“我不行”。夜深人静的时候,想想年迈的父母,想想那些比我们更努力的人还在奋斗,我知道自己没理由不学习。最近武汉的天气闷热,时而下雨,时而大太阳,永远无法预知这转瞬即变的天气。就像我们无法预知将来的自己能成为怎样的人,将来的生活是怎样的一样,唯一能做的就是沉静下来,锤炼自己,学习进步,未雨绸缪!即使将来来临的是狂风暴雨,我们依然可以用强大的内心抵挡。
二.判断浏览器类型
1 var Browser={}; 2 function GetBrowserType() 3 { 4 if(/msie/.test(navigator.userAgent.toLowerCase())) 5 { 6 Browser.Type=‘msie‘; 7 } 8 else if(/webkit/.test(navigator.userAgent.toLowerCase())) 9 { 10 Browser.Type=‘webkit‘; 11 } 12 else if(/firefox/.test(navigator.userAgent.toLowerCase())) 13 { 14 Browser.Type=‘firefox‘; 15 } 16 else{ 17 Browser.Type=‘‘; 18 } 19
在chrome浏览器下可以看到运行的测试结果:
三.表格表头浮动
最近项目上财务报表涉及到数据比较多,而前台全部是手拼的表格,数据量大,下拉无法看到表头,故将表头浮动起来,让用户可以看到对应项的数据看板展示。
1 var menu_height=parseInt($("#table_BudegtAssign").offset().top); 2 var bodyObj=$("body"); 3 var scrollLeft=0; 4 $(window).scroll(function(){ 5 if(isGuideMode){ 6 return ; 7 } 8 $("#costto").find(".cost_table").css("width",$("#costto").css("width")); 9 temp=Math.max(document.body.scrollTop||document.documentElement.scrollTop); 10 if(temp>=menu_height&&!bodyObj.hasClass("fixed")) 11 { 12 bodyObj.addClass("fixed"); 13 } 14 else if(temp<menu_height&&bodyObj.hasClass("fixed")) 15 { 16 bodyObj.removeClass("fixed"); 17 } 18 19 //解决浮动表头无法横向同步滚动问题 20 if($(this).scrollLeft()!=scrollLeft) 21 { 22 scrollLeft=$(this).scrollLeft(); 23 $("divinfo tr.table_header").css({ 24 ‘left‘:0-scrollLeft 25 }); 26 } 27 });
代码分析:
(1)首先,table外层嵌套一个div包裹,所以先找到内层的table,将table的宽度社会自成外层div的宽度。
$("#costto").find(".cost_table").css("width",$("#costto").css("width"));
(2)其次,取出页面元素或者body滚动时,距离页面top的最大值。
temp=Math.max(document.body.scrollTop||document.documentElement.scrollTop); (3)然后判断页面滚动时,是否大于这个距离,大于或者等于时候,为table添加fixed样式。
if(temp>=menu_height&&!bodyObj.hasClass("fixed"))
{
bodyObj.addClass("fixed");
}
(4)当滚动回到top位置时候,小于当前页面元素或者body距离top的距离大小时,取消掉表头浮动。
else if(temp<menu_height&&bodyObj.hasClass("fixed"))
{
bodyObj.removeClass("fixed");
}
四.JSON日期转换
一般后台的时间类型,如股票不经过处理直接返回给前台,那么就需要在前台进行处理,一般后台返回json日期格式为/Date(1410340800000)/.同时Js转换时间格式还包括:
var d = new Date();
console.log(d); // 输出:Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间)
console.log(d.toDateString()); // 日期字符串,输出:Mon Nov 04 2013
console.log(d.toGMTString()); // 格林威治时间,输出:Mon, 04 Nov 2013 14:03:05 GMT
console.log(d.toISOString()); // 国际标准组织(ISO)格式,输出:2013-11-04T14:03:05.420Z
console.log(d.toJSON()); // 输出:2013-11-04T14:03:05.420Z
console.log(d.toLocaleDateString()); // 转换为本地日期格式,视环境而定,输出:2013年11月4日
console.log(d.toLocaleString()); // 转换为本地日期和时间格式,视环境而定,输出:2013年11月4日 下午10:03:05
console.log(d.toLocaleTimeString()); // 转换为本地时间格式,视环境而定,输出:下午10:03:05
console.log(d.toString()); // 转换为字符串,输出:Mon Nov 04 2013 22:03:05 GMT+0800 (中国标准时间)
console.log(d.toTimeString()); // 转换为时间字符串,输出:22:03:05 GMT+0800 (中国标准时间)
console.log(d.toUTCString()); // 转换为世界时间,输出:Mon, 04 Nov 2013 14:03:05 GMT
function formatDate(now) { now=now.replace(/\/Date\(/,"").replace(/000\)\//,""); now= new Date(parseInt((now*1000).toLocaleString().substr(0,24))); var year=now.getFullYear(); var month=jia0(now.getMonth()+1); var date=jia0(now.getDate()); var hour=jia0(now.getHours()); var minute=jia0(now.getMinutes()); var second=jia0(now.getSeconds()); return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; } function jia0(n){ if(n<10) n="0"+n; return n; } var date="/Date(1410340800000)/"; formatDate(date);
chrome下执行结果如图所:
说到这里想到C#中常用的日期转为总结一下:
DateTime.ToString("yyyy-MM-dd hh:mm:ss");
DateTime dt = DateTime.Now;
dt.ToString();//2005-11-5 13:21:25
dt.ToFileTime().ToString();//127756416859912816
dt.ToFileTimeUtc().ToString();//127756704859912816
dt.ToLocalTime().ToString();//2005-11-5 21:21:25
dt.ToLongDateString().ToString();//2005年11月5日
五.验证input输入为有效数字(是否属于合法的金融数据(包括负数))
项目中进行预算录入时候,需要验证输入的文本框是否是核发的预算数据,所以进行了处理,当输入多余符号或者小数点,以及其他非法字符,文本框会自动清除掉,确保输入的是有效的金额数字。
1 $(".ValidateNumber").live(‘keyup‘, function () { 2 var input = $(this).id; 3 if (event.keyCode == 13) { 4 event.keyCode = 0; 5 6 document.getElementById(input).blur(); 7 event.returnValue = false; 8 return; 9 } 10 var re = /^(-]\+)?\d+(\.\d+)?$/; //验证字符串是否数字 11 var number = document.getElementById(input).value; 12 var result = ""; 13 var isFirstDom = true; 14 var isFirstSubtract = true; 15 if (!re.test(number) && number != "-") { 16 for (var i = 0; i < number.length ; i++) { 17 if ((number[i].charCodeAt() <= 57 && number[i].charCodeAt() >= 48) || (number[i] == "." &&isFirstDom)||( number[i] == "-"&&isFirstSubtract)) { 18 if((result==""&&number[i]==".")||(result=="-"&&number[i]==".")) 19 { 20 result += "0"; 21 } 22 23 } 24 else if (!(result != "" && number[i] == "-")) { 25 result += number[i]; 26 } 27 } 28 if (number[i] == ".") { 29 isFirstDom = false; 30 } 31 if (number[i] == "-") { 32 isFirstSubtract == false; 33 34 } 35 } 36 37 document.getElementById(input).value = result; 38 39 });