常用代码总结（一）

一.写在前面的话

最近一直忙于项目，加班回家已好晚，洗洗就睡了！但心里知道这样的生活不能持久，人活着就应该学习！所以正好项目迭代计划完成，今天可以对最近项目中用到的一些代码，进行一次总结，也是避免今后重复造轮子。我一直对自己说：撑不住的时候，可以对自己说声“我好累”，但永远不要在心里承认说“我不行”。夜深人静的时候，想想年迈的父母，想想那些比我们更努力的人还在奋斗，我知道自己没理由不学习。最近武汉的天气闷热，时而下雨，时而大太阳，永远无法预知这转瞬即变的天气。就像我们无法预知将来的自己能成为怎样的人，将来的生活是怎样的一样，唯一能做的就是沉静下来，锤炼自己，学习进步，未雨绸缪！即使将来来临的是狂风暴雨，我们依然可以用强大的内心抵挡。

          

二.判断浏览器类型

var Browser={};
function GetBrowserType()
{
  if(/msie/.test(navigator.userAgent.toLowerCase()))
  {
     Browser.Type='msie';
  }
  else if(/webkit/.test(navigator.userAgent.toLowerCase()))
  {
    Browser.Type='webkit';
  }
  else if(/firefox/.test(navigator.userAgent.toLowerCase()))
  {
    Browser.Type='firefox';
  }
  else{
    Browser.Type='';
  }

在chrome浏览器下可以看到运行的测试结果：

三.表格表头浮动

最近项目上财务报表涉及到数据比较多，而前台全部是手拼的表格，数据量大，下拉无法看到表头，故将表头浮动起来，让用户可以看到对应项的数据看板展示。

var menu_height=parseInt($("#table_BudegtAssign").offset().top);
var bodyObj=$("body");
var scrollLeft=0;
$(window).scroll(function(){
   if(isGuideMode){
     return ;
   }
   $("#costto").find(".cost_table").css("width",$("#costto").css("width"));
   temp=Math.max(document.body.scrollTop||document.documentElement.scrollTop);
   if(temp>=menu_height&&!bodyObj.hasClass("fixed"))
   { 
      bodyObj.addClass("fixed");
   }
   else if(temp<menu_height&&bodyObj.hasClass("fixed"))
   {
      bodyObj.removeClass("fixed");
   }
   
   //解决浮动表头无法横向同步滚动问题
   if($(this).scrollLeft()!=scrollLeft)
   {
       scrollLeft=$(this).scrollLeft();
       $("divinfo tr.table_header").css({
       'left':0-scrollLeft
       });
   }
});

代码分析：

  （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输入为有效数字（是否属于合法的金融数据（包括负数））

项目中进行预算录入时候，需要验证输入的文本框是否是核发的预算数据，所以进行了处理，当输入多余符号或者小数点，以及其他非法字符，文本框会自动清除掉，确保输入的是有效的金额数字。

    $(".ValidateNumber").live('keyup', function () {
        var input = $(this).id;
        if (event.keyCode == 13) {
            event.keyCode = 0;

            document.getElementById(input).blur();
            event.returnValue = false;
            return;
        }
        var re = /^(-]+)?d+(.d+)?$/;   //验证字符串是否数字
        var number = document.getElementById(input).value;
        var result = "";
        var isFirstDom = true;
        var isFirstSubtract = true;
        if (!re.test(number) && number != "-") {
            for (var i = 0; i < number.length ; i++) {
                if ((number[i].charCodeAt() <= 57 && number[i].charCodeAt() >= 48) || (number[i] == "." &&isFirstDom)||( number[i] == "-"&&isFirstSubtract)) {
                    if((result==""&&number[i]==".")||(result=="-"&&number[i]=="."))
                    {
                        result += "0";
                    }
                 
                }
                else if (!(result != "" && number[i] == "-")) {
                    result += number[i];
                }
            }
            if (number[i] == ".") {
                isFirstDom = false;
            }
            if (number[i] == "-") {
                isFirstSubtract == false;

            }
        }

        document.getElementById(input).value = result;
    
    });

六.事件冒泡

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Exercise.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/Test.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试Li当前位置</title>
</head>
<body>
<div>
    <ul id="showContent">

    </ul>
</div>
    <div>
     输入创建Li的个数： <input type="text"  value="10"  id="liNum"  /><br/>
     输入创建Li的Text： <input type="text" value="我是li" id="liText" /><br/>
    <input type="button" value="新增Li" onclick="addElement()"/>
    </div>
</body>
</html>

(function() {

});


//创建li元素
function addElement() {
    var liNum = document.getElementById("liNum").value;
    var liContent = document.getElementById("liText").value;
    var showObj = document.getElementById("showContent");
    if (!Number(liNum)) {
        alert("只能输入大于0的数字！不要问为什么！");
        return;
    }
    var nodes = [];
    for (var i = 0; i < liNum; i++) {
        nodes.push(i);
        var li = document.createElement("li");
        li.innerHTML = liContent + nodes[i];
        li.id = nodes[i];
        showObj.appendChild(li);
    }
    showObj.addEventListener('click', showCurrentId, false);
}


//显示当前Id
function showCurrentId(e) {
    var x = e.target;
    if (x.nodeName.toLowerCase() === 'li') {
        alert('The Id is ' + x.id);
    }
}

显示结果：