控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

Javascript+HTML仿造VB里的MonthView控件

作者:Ken 出处:不详 2010年01月27日 阅读:

<html>
 <head>
 <title>MonthView Demo</title>
 <script language=javascript>
 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.okasp.com/techinfo/"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>
                                                     【注:本文由控件中国网转载】

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统