Javascript+HTML仿造VB里的MonthView控件

2019-11-18 20:17:20

字體：大中小

來源：轉載

供稿：網友

<html>
<head>
<title>MonthView Demo</title>
<script language=javascript>
/***********************************    程序功能：日期選擇
    特點　　：Javascript+HTML仿造VB里的MonthView控件
    作者　　：ken            　
    聯系　　：boboshu@21cn.com 　
    開發日期：2002-8-5
/***********************************/

var languageName="cn"  //內容顯示的語言 value:"cn" "en"
var currentMonth,currentYear
var nowDate,nowMonth,nowYear

d=new Date();
nowDate=d.getDate()
nowMonth=d.getMonth()
nowYear=d.getYear()

currentMonth=nowMonth
currentYear=nowYear

arrWeekCaption_cn = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
arrWeekCaption_en = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
arrMonthCaption_cn= new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")
arrMonthCaption_en= new Array("January","February","March","APRil","May","June","July","August","September","October","November","December")

function MonthView(){}

/*******************************            初始化控件
/*******************************/
function MonthView.initialize(){


    output ='<table cellpadding=0 cellspacing=2 style="border: 1 solid black;width:300;cursor:default" id="tblMonthView" onselectstart="return false">'
    output+='   <tr>'
    output+='      <td>'
    output+='        <table width="100%" cellpadding=0 cellspacing=0>'
    output+='            <tr style="padding-top:10;padding-bottom:10;background:menu;" id="trCaption">'
    output+='                <td><input type="button"value="3" style="height:22;font-family:webdings" onclick="MonthView.showCurrentDate(/'preview/')"></td>'
    output+='                <td align="center"><span id="spanCurrentMonth" style="font-size:12;"></span><span style="padding-left:10;font-size:12" id="spanCurrentYear"></span></td>'
    output+='                <td align="right"><input type="button"value="4" style="height:22;font-family:webdings" onclick="MonthView.showCurrentDate(/'next/')"></td>'
    output+='            </tr>'
    output+='        </table>'
    output+='      </td>'
    output+='    </tr>'
    output+='    <tr>'
    output+='      <td>'
    output+='        <table width="100%" cellpadding=0 cellspacing=2 id="tblShowDay" style="font-size:12">'
    output+='            <tr align="center"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
    output+='            <tr><td colspan=7 height="1" style="background:black" id="tdLine"></td></tr>'
    output+='            <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
    output+='        </table>'
    output+='      </td>'
    output+='    </tr>'
    output+='    <tr>'
    output+='      <td>'
    output+='        <table width="100%" cellpadding=0 cellspacing=2 id="tblToday" style="font-size:12">'
    output+='            <tr><td width="20"></td><td></td></tr>'
    output+='        </table>'
    output+='      </td>'
    output+='    </tr>'
    output+='</table>'

    document.write (output)


    //*********當前年、月的顯示*********

    MonthView.setCurrentCaption()

    //*********************************
    //*********星期表頭的顯示*********

    MonthView.setWeekCaption()

    //*********************************

    //*********設置每月的日期*********

    MonthView.bulidDay()

    //*****************************

    //*********顯示隱藏今日日期*********

    MonthView.setShowHideToday(true)

    //*****************************
}

function MonthView.setCurrentCaption(){
    spanCurrentYear.innerHTML=currentYear
    if (languageName=="cn"){
        spanCurrentMonth.innerHTML=arrMonthCaption_cn[currentMonth]
    }else{
        spanCurrentMonth.innerHTML=arrMonthCaption_en[currentMonth]
    }
}
function MonthView.setWeekCaption(){

    if (languageName=="cn"){
        arrCaption=arrWeekCaption_cn
    }else{
        arrCaption=arrWeekCaption_en
    }

    for (var i=0; i<arrCaption.length; i++){
        tblShowDay.rows[0].cells[i].innerHTML=arrCaption[i]
    }
}
function MonthView.bulidDay(){

    arrMonthCount=new Array(31,28,31,30,31,30,31,31,30,31,30,31)
    if ((currentYear % 400 ==0) || ((currentYear % 100==0)&&(currentYear % 4==0))){
        arrMonthCount[1]=29
    }

    rowDay=2

    while (tblShowDay.rows.length>rowDay){
        tblShowDay.deleteRow(rowDay)
    }

    firstDay=new Date(currentYear,currentMonth,1)
    tempRow=tblShowDay.insertRow()

    //*********填充當月1號以前的日期*********
    for (var j=0 ;j<firstDay.getDay();j++){
        tempCell=tempRow.insertCell()
    }
    //*************************************
    for (var i=1 ;i<=arrMonthCount[currentMonth]; i++){

        tempCell=tempRow.insertCell()
        tempCell.style.textAlign="center"
        tempCell.innerHTML=i
        tempCell.onclick=MonthView.action
        if ((i+firstDay.getDay()) %7 == 0 && i!=arrMonthCount[currentMonth]){tempRow=tblShowDay.insertRow()}
    }
}

function MonthView.showCurrentDate(direction){
    if (direction=="preview"){
        currentMonth--
        if (currentMonth<0) {currentMonth=11 ;currentYear--}
    }
    if (direction=="next"){
        currentMonth++
        if (currentMonth>11) {currentMonth=0 ;currentYear++}
    }

    MonthView.setCurrentCaption()
    MonthView.bulidDay()
}
function MonthView.setLanguage(itsName){
    languageName=itsName
    MonthView.setCurrentCaption()
    MonthView.setWeekCaption()
    MonthView.setShowHideToday(true)
}
function MonthView.setCaptionBg(itsColor){
    trCaption.style.background=itsColor
}
function MonthView.setBorder(itsBorder){
    tblMonthView.style.border=itsBorder
}
function MonthView.setLineColor(itsColor){
    tdLine.style.background=itsColor
}
function MonthView.setShowHideToday(flag){
    el=tblToday.rows[0].cells[1]
    if (flag){
        if (languageName=="cn"){
            el.innerHTML="今日："+nowYear+"-"+(nowMonth+1)+"-"+nowDate
        }else{
            el.innerHTML="Today:"+nowYear+"-"+(nowMonth+1)+"-"+nowDate
        }

        el.style.display="block"
    }else{
        el.style.display="none"
    }
}
function MonthView.action(){
    //*********請修改此函數*********
    MonthView_value=currentYear+"-"+(currentMonth+1)+"-"+this.innerHTML
    alert(MonthView_value)

}
</script>
</head>

<body>
<div>
<script language=javascript>
MonthView.initialize()
</script>
</div>

<br><br>
<table border=1 style="font-size:12;width:95%">
    <tr>
        <td>方法</td><td>描述</td><td>演示</td>
    </tr>
    <tr>
        <td>MonthView.initialize()</td>
        <td>初始化控件</td>
        <td><image src="none.gif" width="1" height="1"></td>
    </tr>
    <tr>
        <td>MonthView.setLanguage(<i>par</i>)<br>參數："cn" "en"</td>
        <td>設置控件顯示語言</td>
        <td>
            <input type="button" value="中文" onclick="MonthView.setLanguage('cn')">
            <input type="button" value="英文" onclick="MonthView.setLanguage('en')">
        </td>
    </tr>
    <tr>
        <td>MonthView.setBorder(<i>par</i>)<br>參數："邊框寬度(int) 邊框形狀(solid|dot...) 邊框顏色"</td>
        <td>邊框設置</td>
        <td>
            <input type="button" value="ChangeBorder" onclick="MonthView.setBorder('2 solid darkred')">
        </td>
    </tr>
    <tr>
        <td>MonthView.setCaptionBg(<i>par</i>)<br>參數：十六進制顏色代碼</td>
        <td>設置當前年、月的背景色</td>
        <td>
            <input type="button" value="INFOBACKGROUND" onclick="MonthView.setCaptionBg('INFOBACKGROUND')">
        </td>
    </tr>
    <tr>
        <td>MonthView.setLineColor(<i>par</i>)<br>參數：十六進制顏色代碼</td>
        <td>設置分割線的顏色</td>
        <td>
            <input type="button" value="Darkred" onclick="MonthView.setLineColor('darkred')">
        </td>
    </tr>
    <tr>
        <td>MonthView.setShowHideToday(<i>par</i>)<br>參數：true|false</td>
        <td>顯示／隱藏今日日期</td>
        <td>
            <input type="button" value="Hide" onclick="MonthView.setShowHideToday(false)">
            <input type="button" value="Show" onclick="MonthView.setShowHideToday(true)">
        </td>
    </tr>
</table>
</body>
</html>

上一篇：用ASP動態生成JavaScript的表單驗證代碼

下一篇：XMLHTTP+Javascript+Asp寫得聊天室，無刷新實現（六）