关闭

最近写的一些js脚本,拿过来和大家分享

789人阅读 评论(1) 收藏 举报

在简伯特的最后一天了,进来参加的项目是用asp做,这样的古董还有人用我真是佩服,没有办法,dr都拍板了,我直接CODING也就行了。首先是一个JS版本的calendar:

//author Cage
//Date 2007/09/05
//description Modify
var oCalendarEn=new PopupCalendar("oCalendarEn");    //ウシサッソリシハア,ヌ・オタテ﨤ニネ・oCalendarEn
oCalendarEn.Init();


var oCalendarChs=new PopupCalendar("oCalendarChs");    //ウシサッソリシハア,ヌ・オタテ﨤ニ:oCalendarChs
oCalendarChs.weekDaySting=new Array("ネユ","メサ","カ","ネ","ヒト","ホ・,"チ・);
oCalendarChs.monthSting=new Array("メサヤツ","カヤツ","ネヤツ","ヒトヤツ","ホ袂ツ","チツ","ニ゚ヤツ","ーヒヤツ","セナヤツ","ハョヤツ","ハョメサヤツ","ハョカヤツ");
oCalendarChs.oBtnTodayTitle="ス・;
oCalendarChs.oBtnCancelTitle="ネ。マ・;
oCalendarChs.Init();

function load()
{
    document.getElementById("flag").checked=true;
    document.getElementById("aas").disabled=!document.getElementById("flag").checked;
    var b=new Date();
    document.getElementById("aas").value=b.toString();
}
function PopupCalendar(InstanceName)
{
 ///Global Tag
 this.instanceName=InstanceName;
 ///Properties
 this.separator="-"
 this.oBtnTodayTitle="Today"
 this.oBtnCancelTitle="Cancel"
 this.weekDaySting=new Array("S","M","T","W","T","F","S");
 this.monthSting=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
 this.Width=200;
 this.currDate=new Date();
 this.today=new Date();
 this.startYear=1970;
 this.endYear=2010;
 ///Css
 this.normalfontColor="#666666";
 this.selectedfontColor="red";
 this.divBorderCss="1px solid #BCD0DE";
 this.titleTableBgColor="#98B8CD";
 this.tableBorderColor="#CCCCCC"
 ///Method
 this.Init=CalendarInit;
 this.Fill=CalendarFill;
 this.Refresh=CalendarRefresh;
 this.Restore=CalendarRestore;
 ///HTMLObject
 this.oTaget=null;
 this.oPreviousCell=null;
 this.sDIVID=InstanceName+"_Div";
 this.sTABLEID=InstanceName+"_Table";
 this.sMONTHID=InstanceName+"_Month";
 this.sYEARID=InstanceName+"_Year";
 this.sTODAYBTNID=InstanceName+"_TODAYBTN";
 
}
function CalendarInit()    ///Create panel
{
 var sMonth,sYear
 sMonth=this.currDate.getMonth();
 sYear=this.currDate.getYear();
 htmlAll="<div id='"+this.sDIVID+"' style='display:none;position:absolute;width:"+this.Width+";border:"+this.divBorderCss+";padding:2px;background-color:#FFFFFF'>";
 htmlAll+="<div align='center'>";
 /// Month
 htmloMonth="<select id='"+this.sMONTHID+"' onchange=CalendarMonthChange("+this.instanceName+") style='width:50%'>";
 for(i=0;i<12;i++)
 {   
  htmloMonth+="<option value='"+i+"'>"+this.monthSting[i]+"</option>";
 }
 htmloMonth+="</select>";
 /// Year
 htmloYear="<select id='"+this.sYEARID+"' onchange=CalendarYearChange("+this.instanceName+") style='width:50%'>";
 for(i=this.startYear;i<=this.endYear;i++)
 {
  htmloYear+="<option value='"+i+"'>"+i+"</option>";
 }
 htmloYear+="</select></div>";
 /// Day
 htmloDayTable="<table id='"+this.sTABLEID+"' width='100%' border=0 cellpadding=0 cellspacing=1 bgcolor='"+this.tableBorderColor+"'>";
 htmloDayTable+="<tbody bgcolor='#ffffff'style='font-size:13px'>";
 for(i=0;i<=6;i++)
 {
  if(i==0)
   htmloDayTable+="<tr bgcolor='" + this.titleTableBgColor + "'>";
  else
   htmloDayTable+="<tr>";
  for(j=0;j<7;j++)
  {

   if(i==0)
   {
    htmloDayTable+="<td height='20' align='center' valign='middle' style='cursor:hand'>";
    htmloDayTable+=this.weekDaySting[j]+"</td>"
   }
   else
   {
    htmloDayTable+="<td height='20' align='center' valign='middle' style='cursor:hand'";
    htmloDayTable+=" onmouseover=CalendarCellsMsOver("+this.instanceName+")";
    htmloDayTable+=" onmouseout=CalendarCellsMsOut("+this.instanceName+")";
    htmloDayTable+=" onclick=CalendarCellsClick(this,"+this.instanceName+")>";
    htmloDayTable+="&nbsp;</td>"
   }
  }
  htmloDayTable+="</tr>"; 
 }
 htmloDayTable+="</tbody></table>";
 /// Today Button
 htmloButton="<div align='center' style='padding:3px'>"
 htmloButton+="<button id='"+this.sTODAYBTNID+"' style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
 htmloButton+=" onclick=CalendarTodayClick("+this.instanceName+")>"+this.oBtnTodayTitle+"</button>&nbsp;"
 htmloButton+="<button style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
 htmloButton+=" onclick=CalendarCancel("+this.instanceName+")>"+this.oBtnCancelTitle+"</button> "
 htmloButton+="</div>"
 /// All
 htmlAll=htmlAll+htmloMonth+htmloYear+htmloDayTable+htmloButton+"</div>";
 document.write(htmlAll);
 this.Fill(); 
}
function CalendarFill()   ///
{
 var sMonth,sYear,sWeekDay,sToday,oTable,currRow,MaxDay,iDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYear
 sMonth=this.currDate.getMonth();
 sYear=this.currDate.getYear();
 sWeekDay=(new Date(sYear,sMonth,1)).getDay();
 sToday=this.currDate.getDate();
 iDaySn=1
 oTable=document.all[this.sTABLEID];
 currRow=oTable.rows[1];
 MaxDay=CalendarGetMaxDay(sYear,sMonth);
 
 oSelectMonth=document.all[this.sMONTHID]
 oSelectMonth.selectedIndex=sMonth;
 oSelectYear=document.all[this.sYEARID]
 for(i=0;i<oSelectYear.length;i++)
 {
  if(parseInt(oSelectYear.options[i].value)==sYear)oSelectYear.selectedIndex=i;
 }
 ////
 for(rowIndex=1;rowIndex<=6;rowIndex++)
 {
  if(iDaySn>MaxDay)break;
  currRow = oTable.rows[rowIndex];
  cellIndex = 0;
  if(rowIndex==1)cellIndex = sWeekDay;
  for(;cellIndex<currRow.cells.length;cellIndex++)
  {
   if(iDaySn==sToday)
   {
    currRow.cells[cellIndex].innerHTML="<font color='"+this.selectedfontColor+"'><i><b>"+iDaySn+"</b></i></font>";
    this.oPreviousCell=currRow.cells[cellIndex];
   }
   else
   {
    currRow.cells[cellIndex].innerHTML=iDaySn; 
    currRow.cells[cellIndex].style.color=this.normalfontColor;
   }
   CalendarCellSetCss(0,currRow.cells[cellIndex]);
   iDaySn++;
   if(iDaySn>MaxDay)break; 
  }
 }
}
function CalendarRestore()     /// Clear Data

 var i,j,oTable
 oTable=document.all[this.sTABLEID]
 for(i=1;i<oTable.rows.length;i++)
 {
  for(j=0;j<oTable.rows[i].cells.length;j++)
  {
   CalendarCellSetCss(0,oTable.rows[i].cells[j]);
   oTable.rows[i].cells[j].innerHTML="&nbsp;";
  }
 } 
}
function CalendarRefresh(newDate)     ///
{
 this.currDate=newDate;
 this.Restore(); 
 this.Fill(); 
}
function CalendarCellsMsOver(oInstance)    /// Cell MouseOver
{
 var myCell = event.srcElement;
 CalendarCellSetCss(0,oInstance.oPreviousCell);
 if(myCell)
 {
  CalendarCellSetCss(1,myCell);
  oInstance.oPreviousCell=myCell;
 }
}
function CalendarCellsMsOut(oInstance)    ////// Cell MouseOut
{
 var myCell = event.srcElement;
 CalendarCellSetCss(0,myCell); 
}
function CalendarYearChange(oInstance)    /// Year Change
{
 var sDay,sMonth,sYear,newDate
 sDay=oInstance.currDate.getDate();
 sMonth=oInstance.currDate.getMonth();
 sYear=document.all[oInstance.sYEARID].value
 newDate=new Date(sYear,sMonth,sDay);
 oInstance.Refresh(newDate);
}
function CalendarMonthChange(oInstance)    /// Month Change
{
 var sDay,sMonth,sYear,newDate
 sDay=oInstance.currDate.getDate();
 sMonth=document.all[oInstance.sMONTHID].value
 sYear=oInstance.currDate.getYear();
 newDate=new Date(sYear,sMonth,sDay);
 oInstance.Refresh(newDate); 
}
function CalendarCellsClick(oCell,oInstance)
{
 var sDay,sMonth,sYear,newDate
 sYear=oInstance.currDate.getFullYear();
 sMonth=oInstance.currDate.getMonth();
 sDay=oInstance.currDate.getDate();
 if(oCell.innerText!=" ")
 {
  sDay=parseInt(oCell.innerText);
  if(sDay!=oInstance.currDate.getDate())
  {
   newDate=new Date(sYear,sMonth,sDay);
   oInstance.Refresh(newDate);
  }
 }
 sDateString=sYear+oInstance.separator+CalendarDblNum(sMonth+1)+oInstance.separator+CalendarDblNum(sDay);  ///return sDateString
 if(oInstance.oTaget.tagName.toLowerCase()=="input")oInstance.oTaget.value = sDateString;
 CalendarCancel(oInstance);
 return sDateString;
}
function CalendarTodayClick(oInstance)    /// "Today" button Change

 oInstance.Refresh(new Date());  
}
function getDateString(oInputSrc,oInstance)
{
 if(oInputSrc&&oInstance)
 {
  var CalendarDiv=document.all[oInstance.sDIVID];
  oInstance.oTaget=oInputSrc;
  CalendarDiv.style.pixelLeft=CalendargetPos(oInputSrc,"Left");
  CalendarDiv.style.pixelTop=CalendargetPos(oInputSrc,"Top") + oInputSrc.offsetHeight;
  CalendarDiv.style.display=(CalendarDiv.style.display=="none")?"":"none"; 
 } 
}
function CalendarCellSetCss(sMode,oCell)   /// Set Cell Css
{
 // sMode
 // 0: OnMouserOut 1: OnMouseOver
 if(sMode)
 {
  oCell.style.border="1px solid #5589AA";
  oCell.style.backgroundColor="#BCD0DE";
 }
 else
 {
  oCell.style.border="1px solid #FFFFFF";
  oCell.style.backgroundColor="#FFFFFF";
 } 
}
function CalendarGetMaxDay(nowYear,nowMonth)   /// Get MaxDay of current month
{
 var nextMonth,nextYear,currDate,nextDate,theMaxDay
 nextMonth=nowMonth+1;
 if(nextMonth>11)
 {
  nextYear=nowYear+1;
  nextMonth=0;
 }
 else 
 {
  nextYear=nowYear; 
 }
 currDate=new Date(nowYear,nowMonth,1);
 nextDate=new Date(nextYear,nextMonth,1);
 theMaxDay=(nextDate-currDate)/(24*60*60*1000);
 return theMaxDay;
}
function CalendargetPos(el,ePro)    /// Get Absolute Position
{
 var ePos=0;
 while(el!=null)
 {  
  ePos+=el["offset"+ePro];
  el=el.offsetParent;
 }
 return ePos;
}
function CalendarDblNum(num)
{
 if(num < 10)
  return "0"+num;
 else
  return num;
}
function CalendarCancel(oInstance)   ///Cancel
{
 var CalendarDiv=document.all[oInstance.sDIVID];
 CalendarDiv.style.display="none";  

使用方法是:

<HTML>
<HEAD>

<TITLE>calendar</TITLE>
<script language="javascript" src="calendar.js" ></script>
</head>

<BODY onload="load()">
<script >

var oCalendarEn=new PopupCalendar("oCalendarEn");    //ウシサッソリシハア,ヌ・オタテ﨤ニネ・oCalendarEn
oCalendarEn.Init();


var oCalendarChs=new PopupCalendar("oCalendarChs");    //ウシサッソリシハア,ヌ・オタテ﨤ニ:oCalendarChs
oCalendarChs.weekDaySting=new Array("ネユ","メサ","カ","ネ","ヒト","ホ・,"チ・);
oCalendarChs.monthSting=new Array("メサヤツ","カヤツ","ネヤツ","ヒトヤツ","ホ袂ツ","チツ","ニ゚ヤツ","ーヒヤツ","セナヤツ","ハョヤツ","ハョメサヤツ","ハョカヤツ");
oCalendarChs.oBtnTodayTitle="ス・;
oCalendarChs.oBtnCancelTitle="ネ。マ・;
oCalendarChs.Init();
function go()
{
    var a=document.getElementById("flag");
    document.getElementById("aas").disabled=!a.checked;
}
function ungo()
{
    var a=document.getElementById("aa");
    a.disabled=true;
}
function load()
{
    document.getElementById("flag").checked=true;
    document.getElementById("aas").disabled=!document.getElementById("flag").checked;
    var b=new Date();
    document.getElementById("aas").value=b.toString();
}
</script>

<br><br><br><br>
。。。。。。<input readonly type="text" name="dd" id="aa" onclick="getDateString(this,oCalendarEn)" value="Test"> <input type="radio" name="r1" value="use" onclick="go()" id="iuse">use<input type="radio" name="r1" value="unuse" onclick="ungo()">unuse<br><br>
     <div style="border-style:inset;border-width:thin;width:175"><input id="flag" type="checkbox" value="a" onclick="go()"><input readonly type="text" name="dd" id="aas" onclick="getDateString(this,oCalendarEn)"></div>                                 

</BODY>
</HTML>

上边的js主要来自网络,我只是拿过来修改了下,封装了下。

第二个是关于table排序的,也就是使显示数据的table能够在点表头的时候,所有的数据能够按一定的逻辑排序,我这里主要有按数字排序,日期,字符,和日语,其实就是js内建支持的数组的sort方法。这个方法可以接受一个函数,只要这个函数返回true或者false就可以:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
 <title>Table Sorting</title>
 <style type="text/css">
 <!--
 table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
 }
 a {text-decoration:none}
 -->
 </style>
 <script language="JavaScript" type="text/javascript">
 <!--
 var sortedOn = 0;
 
 function SortTable(sortOn) {
 
  var table = document.getElementById('results');// get table variable
  var tbody = table.getElementsByTagName('tbody')[0];//get tbody variables
  var rows = tbody.getElementsByTagName('tr');//get tr collections

  var rowArray = new Array();//init row array
  for (var i=0, length=rows.length; i<length; i++) {
   rowArray[i] = new Object;//use the first value as rank number in the new array
   rowArray[i].oldIndex = i;//old rank number
   rowArray[i].value = rows[i].getElementsByTagName('td')[sortOn].firstChild.nodeValue;//old value
  }
  
  if (sortOn == sortedOn) { rowArray.reverse(); }//the first column is selected
  else {
   sortedOn = sortOn;
   if (sortedOn == 0) {
      
    rowArray.sort(RowCompareNumbers);
   }
   else if (sortedOn == 3) {
      
    rowArray.sort(RowCompareDollars);
   }
   else {
       //alert(sortedOn);
    rowArray.sort(RowCompare);
   }
  }
  
  var newTbody = document.createElement('tbody');
  for (var i=0, length=rowArray.length; i<length; i++) {
   newTbody.appendChild(rows[rowArray[i].oldIndex].cloneNode(true));
  }
  
  table.replaceChild(newTbody, tbody);
 }
 
 function RowCompare(a, b) {
 
  var aVal = a.value;
  var bVal = b.value;
  return (aVal == bVal ? 0 : (aVal > bVal ? 1 : -1));
 }

 function RowCompareNumbers(a, b) {
 
  var aVal = parseInt(a.value);
  var bVal = parseInt(b.value);
  return (aVal - bVal);
 }

 function RowCompareDollars(a, b) {
 
  var aVal = parseFloat(a.value.substr(1));
  var bVal = parseFloat(b.value.substr(1));
  return (aVal - bVal);
 }
    function RowCompareDate(a,b)
    {
        //var
    }
 //-->
 function Check(ori)
 {
     HideOther(ori);
     var a=ori.getElementsByTagName("img");
     if(a[0].style.display=="none" && a[1].style.display=="none")
     {
         a[1].style.display="inline";
     }
     else
     {
         if(a[0].style.display=="inline")
         {
            a[0].style.display="none";
            a[1].style.display="inline";
         }
         else
         {
             a[0].style.display="inline";
             a[1].style.display="none";
         }
     }
 }
 function HideOther(ori)
 {
     var theme=document.getElementById("title").getElementsByTagName("th");
     for(var i=0;i<theme.length;i++)
     {
         if(ori==theme[i])
         {
             continue;
         }
         else
         {
    var imgs=theme[i].getElementsByTagName("img");
    for(var j=0;j<imgs.length;j++)
    {
        imgs[j].style.display="none";
    }
         }
     }
 }
 </script>
</head>

<body>
<table id="results">
<thead>
<tr id="title">
 <th onclick="Check(this);SortTable(0);"><a href="javascript:;">Rank<img src="143.gif" id="jiang" style="border-width:0;width:1;display:none"><img src="142.gif" id="sheng" style="border-width:0;width:1;display:none"></a></th>
 <th onclick="Check(this);SortTable(1);"><a href="javascript:;">Album<img src="143.gif" style="border-width:0;width:1;display:none"><img src="142.gif" id="sheng" style="border-width:0;width:1;display:none"></a></th>
 <th><a href="javascript:;" onclick="SortTable(2);">Artist</a></th>
 <th><a href="javascript:;" onclick="SortTable(3);">Price</a></th>
 <th><a href="javascript:;" onclick="SortTable(4);">Date</a></th>
 <th onclick="Check(this);SortTable(5);"><a href="javascript:;">Japanese<img src="143.gif" style="border-width:0;width:1;display:none"><img src="142.gif" id="sheng" style="border-width:0;width:1;display:none"></a></th>
</tr>
</thead>
<tbody>
<tr>
 <td>1</td>
 <td>Before Your Love/A Moment Like This</td>
 <td>Z70112FB</td>
 <td class="currency">$4.49</td>
 <td>2001/10/24</td>
 <td>用デスクトップPCセット</td>
</tr>
<tr>
 <td>2</td>
 <td>Home</td>
 <td>Z70112FV</td>
 <td class="currency">$12.99</td>
 <td>1998/10/24</td>
 <td>用デスクトップPCセッ</td>
</tr>
<tr>
 <td>3</td>
 <td>Rising, The</td>
 <td>z70112FB</td>
 <td class="currency">$13.49</td>
 <td>2005/10/24</td>
 <td>ス</td>
</tr>
<tr>
 <td>4</td>
 <td>October Road</td>
 <td>Taylor, James</td>
 <td class="currency">$13.49</td>
 <td>2003/10/24</td>
 <td>用デスクトップPCセット</td>
</tr>
<tr>
 <td>5</td>
 <td>Bounce [Digipack]</td>
 <td>123</td>
 <td class="currency">$12.99</td>
 <td>2001/10/24</td>
 <td>あ</td>
</tr>

</tbody>
</table>
</body>
</html>

最后还有一些验证用的正则表达试:

function check(original,flag)
{
 var returnvalue;
 if(original.value=="")
 {
     return;
 }
 switch (flag)
 {
  case 0:
  returnvalue=EmailCheck(original);
  break;
  case 1:
  returnvalue=NumCheck(original);
  break;
  case 2:
  returnvalue=PhoneNumCheck(original);
  break;
  case 3:
  returnvalue=DateCheck(original);
  break;
  case 4:
  returnvalue=NumAndVocaCheck(original);
  break;
  defualt:
  returnvalue=true;
 }
 if(returnvalue)
 {
     alert("yes");
 }
 else
 {
     alert("no");
 }
}
function EmailCheck(ori)
{

  //check email
    var a=//w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*/;
    var email=ori.value;
    return a.test(email);
}
function NumCheck(ori)
{

   //check number
    var b=/^[0-9]+$/;
    var num=ori.value;
    return b.test(num);
}
function PhoneNumCheck(ori)
{

   //check japan phone number
    var c=/^[0-9]+[-]{1}[0-9]+[-]{1}[0-9]+$/;
    var phonenum=ori.value;
    return c.test(phonenum);
}
function DateCheck(ori)
{

  //check date type
    var d=/^[1,2]{1}[0-9]{3}//(([0]{1}[0-9]{1})||([1]{1}[0,1,2]{1}))//(([0,1,2]{1}[0-9]{1})||([3]{1}[0,1]{1}))$/;
    var e=ori.value;
    return d.test(e);
}
function NumAndVocaCheck(ori)
{

   //check character and number only
    var e=/^[0-9a-zA-Z]+$/;
    var f=ori.value;
    return e.test(f);
}

以上的代码肯定有一些不太准确的地方,希望大家指正。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30463次
    • 积分:551
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:4篇
    • 译文:2篇
    • 评论:9条
    文章分类
    最新评论