首页>>程序代码>>Javascript动态产生日历代码
Javascript动态产生日历代码
来源: 易习特达网 时间: 2014-09-03 08:45:03

<html>
<head>
 <title>用JavaScript编写动态日历</title>
 <script type="text/javascript">
  <!--
  //函数是每个month对象的方法
  function getFirstDay(theYear, theMonth){
   var firstDate = new Date(theYear,theMonth,1);
   return firstDate.getDay();
  }
  //每个月的天数
  function getMonthLen(theYear, theMonth) {
   var oneHour = 1000 * 60 * 60;
   var oneDay = oneHour * 24;
   var thisMonth = new Date(theYear, theMonth, 1);
   var nextMonth = new Date(theYear, theMonth + 1, 1);
   var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime() - oneHour)/oneDay);
   return len;
  }
  //修正Y2K问题
  function getY2KYear(today) {
   var yr = today.getYear();
   return ((yr < 100) ? yr + 1900 : yr);
  }
  function populateFields(form) {
   //为用户最后选择初始化变量
   var theMonth = form.chooseMonth.selectedIndex;
   var theYear = form.chooseYear.options[form.chooseYear.selectedIndex].value;
   //初始化与日期相关的变量
   //选择月份的第一天
   var firstDay = getFirstDay(theYear, theMonth);
   //下列循环所需要的<TD>...</TD>标记的总数
   var howMany = getMonthLen(theYear, theMonth);
   //设置年份和月份
   form.oneMonth.value = theYear+"年"+theMonths[theMonth];
   //填充表域
   for (var i = 0; i < 42; i++) {
    if (i < firstDay || i >= (howMany + firstDay)) {
      // 在实际日期的前后清空表域
      form.oneDay[i].value = "";
     } else {
      // 输入日期值
      form.oneDay[i].value = i - firstDay + 1;
    }
   }
  }
  //-->
 </script>
</head>
<body>
 <center><h1>生成的月历(动态)</h1></center>
 <hr />
 <script type="text/javascript">
  <!--
  //初始化变量
  //创建month对象名数组
  theMonths = new Array("1月", "2月", "3月", "4月", "5月","6月",
     "7月", "8月", "9月", "10月", "11月", "12月");
  // 填充表域
  var oneField = "<input type='text' name='oneDay' size='2' onfocus=''>";
  //开始组合HTML表格
  var content = "<form><center><table border='1'>";
  //在月历顶部显示年份和月份
  content += "<tr><th colspan='7'><input type='text'name='oneMonth'></th></tr>";
  //列头的星期
  content += "<tr><th>&nbsp;日&nbsp;</th><th>&nbsp;一&nbsp;</th><th>&nbsp;二&nbsp;</th>";
  content += "<th>&nbsp;三&nbsp;</th><th>&nbsp;四&nbsp;</th><th>&nbsp;五&nbsp;</th>";
  content += "<th>&nbsp;六&nbsp;</th></tr><tr>";
  //布局6行
  for (var i = 1; i < 43; i++) {
   content += "<td align='middle'>" + oneField + "</td>";
   if (i % 7 == 0) {
    content += "</tr><tr>";
   }
  }
  content += "</table>";
  // 向文档写整个表的HTML
  document.write(content);
  //-->
 </script>
 <select name="chooseYear">
  <option value="2003" selected="selected">2003年</option>
  <option value="2004">2004年</option>
  <option value="2005">2005年</option>
  <option value="2006">2006年</option>
  <option value="2007">2007年</option>
  <option value="2008">2008年</option>
  <option value="2009">2009年</option>
  <option value="2010">2010年</option>
  <option value="2011">2011年</option>
  <option value="2012">2012年</option>
  <option value="2013">2013年</option>
  <option value="2014">2014年</option>
  <option value="2015">2015年</option>

 </select>
 <select name="chooseMonth">
  <option value="January" selected="selected">1月</option>
  <option value="February">2月</option>
  <option value="March">3月</option>
  <option value="April">4月</option>
  <option value="May">5月</option>
  <option value="June">6月</option>
  <option value="July">7月</option>
  <option value="August">8月</option>
  <option value="September">9月</option>
  <option value="October">10月</option>
  <option value="November">11月</option>
  <option value="December">12月</option>
 </select>
 <br />
 <input type="button" name="updater" value="更新月历" onclick="populateFields(this.form)" />
 </form>
</body>
</html>

网友评论留言

验证码 换一张
上一篇:JavaBean的特点及其优点 下一篇:Servlet中的基本类和接口使用说明