开发学院 WEB开发 ASP Javascript+HTML仿造VB里的MonthView控件阅读

Javascript+HTML仿造VB里的MonthView控件

　2002-08-06 11:09:53　来源：WEB开发网　　　

核心提示：<html><head><title>MonthView Demo</title><script language=javascript>/***程序功能：日期选择特点：Javascript+HTML仿造VB里的MonthView控件作者：ken 联系：b

<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=http://www.cncms.com/"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>