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

最新推荐文章于 2024-09-08 20:47:19 发布

qigaopan

最新推荐文章于 2024-09-08 20:47:19 发布

阅读量1.1k

点赞数

文章标签：脚本 function javascript date table border

本文链接：https://blog.csdn.net/qigaopan/article/details/1783672

版权

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

//author Cage
//Date 2007/09/05
//description Modify
var oCalendarEn=new PopupCalendar("oCalendarEn"); //ｳｼｻｯｿﾘｼﾊｱ,ﾇ・ｵﾀﾃ﨤ﾆﾈ・oCalendarEn
oCalendarEn.Init();

   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+=" οnmοuseοver=CalendarCellsMsOver("+this.instanceName+")";
    htmloDayTable+=" οnmοuseοut=CalendarCellsMsOut("+this.instanceName+")";
    htmloDayTable+=" οnclick=CalendarCellsClick(this,"+this.instanceName+")>";
    htmloDayTable+=" </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+=" οnclick=CalendarTodayClick("+this.instanceName+")>"+this.oBtnTodayTitle+"</button> "
htmloButton+="<button style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
htmloButton+=" οnclick=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=" ";
  }
}
}
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";
}

使用方法是：

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

var oCalendarEn=new PopupCalendar("oCalendarEn"); //ｳｼｻｯｿﾘｼﾊｱ,ﾇ・ｵﾀﾃ﨤ﾆﾈ・oCalendarEn
oCalendarEn.Init();

<br><br><br><br>
｡｡｡｡｡｡<input readonly type="text" name="dd" id="aa" οnclick="getDateString(this,oCalendarEn)" value="Test"> <input type="radio" name="r1" value="use" οnclick="go()" id="iuse">use<input type="radio" name="r1" value="unuse" οnclick="ungo()">unuse<br><br>
<div style="border-style:inset;border-width:thin;width:175"><input id="flag" type="checkbox" value="a" οnclick="go()"><input readonly type="text" name="dd" id="aas" οnclick="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">

</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

function RowCompareNumbers(a, b) {

  var aVal = parseInt(a.value);
  var bVal = parseInt(b.value);
  return (aVal - bVal);
}

<body>
<table id="results">
<thead>
<tr id="title">
<th οnclick="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 οnclick="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:;" οnclick="SortTable(2);">Artist</a></th>
<th><a href="javascript:;" οnclick="SortTable(3);">Price</a></th>
<th><a href="javascript:;" οnclick="SortTable(4);">Date</a></th>
<th οnclick="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>

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

//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);
}

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