Javascript+HTML仿造VB里的MonthView控件

厍浩广

2023-12-01

< 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="tbl MonthView" 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" οnclick=" 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" οnclick=" 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.inner HTML=currentyear
    if (languagename=="cn"){
        spancurrentmonth.inner HTML=arrmonthcaption_cn[currentmonth]
    }else{
        spancurrentmonth.inner HTML=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].inner HTML=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.inner HTML=i
        tempcell.οnclick= 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){
    tbl MonthView.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.inner HTML="今日："+nowyear+"-"+(nowmonth+1)+"-"+nowdate
        }else{
            el.inner HTML="today:"+nowyear+"-"+(nowmonth+1)+"-"+nowdate
        }

        el.style.display="block"
    }else{
        el.style.display="none"
    }
}
function MonthView.action(){
    //*********请修改此函数*********
     MonthView_value=currentyear+"-"+(currentmonth+1)+"-"+this.inner HTML
    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="中文" οnclick=" MonthView.setlanguage('cn')">
            <input type="button" value="英文" οnclick=" 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" οnclick=" MonthView.setborder('2 solid darkred')">
        </td>
    </tr>
    <tr>
        <td> MonthView.setcaptionbg(<i>par</i>)<br>参数：十六进制颜色代码</td>
        <td>设置当前年、月的背景色</td>
        <td>
            <input type="button" value="infobackground" οnclick=" MonthView.setcaptionbg('infobackground')">
        </td>
    </tr>
    <tr>
        <td> MonthView.setlinecolor(<i>par</i>)<br>参数：十六进制颜色代码</td>
        <td>设置分割线的颜色</td>
        <td>
            <input type="button" value="darkred" οnclick=" MonthView.setlinecolor('darkred')">
        </td>
    </tr>
    <tr>
        <td> MonthView.setshowhidetoday(<i>par</i>)<br>参数：true|false</td>
        <td>显示／隐藏今日日期</td>
        <td>
            <input type="button" value="hide" οnclick=" MonthView.setshowhidetoday(false)">
            <input type="button" value="show" οnclick=" MonthView.setshowhidetoday(true)">
        </td>
    </tr>
</table>
</body>
</ HTML>
< <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

Javascript+HTML仿造VB里的MonthView控件

相关阅读

相关文章

相关问答

相关文档