DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 用jquery寫的一個萬年歷
用jquery寫的一個萬年歷
編輯:JavaScript綜合知識     

 萬年歷,想必大家對它都不陌生吧,下面是使用jquery寫的一個萬年歷示例,喜歡的朋友可以參考下

代碼如下: <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>  <head>  <meta http-equiv=Content-Type content="text/html;charset=utf-8">  <style>  .main{  width:600px;  height:350px;  background:gray;  margin-left: auto;  margin-right: auto;  overflow:hidden;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  }  .title{  text-align:center;  }  .date{  float:left;  padding-left:31px;  }  .date1{  float:left;  width:20px;  height:20px;  padding-top:10px;  padding-left:30px;  padding-right:30px;  }  .content{  margin-left:25px;  }  </style>  <script type="text/javascript" src="jquery.min.js"></script>  <script>  function getTime(year,month,day){  y = year  m = month  d = day  var myDate = new Date(year,month-1,day);  return myDate;  }  function days_in_month(year, month) {  y = year;  m = month;  return 32 - new Date(y, m - 1, 32).getDate();  }  function view(year,month){    var w = getTime(year,month,1).getDay()-1;  var num = days_in_month(year,month);  var index = 1;  //console.log(w);  var data = new Array();  for(var d = 0; d < num+w; d++){  if(d<w){  data[d] = '';  }else{  data[d] = index;  index++;  }  }  $("#content").html('');  for(var k =0;k < data.length;k++){  if(k%7==0){  $("#content").append("<div id='t"+k+"' class='date1'>"+data[k]+"</div><br>");  }else{  $("#content").append("<div id='t"+k+"' class='date1'>"+data[k]+"</div>");  }  }  $("#content > div").mouseover(function(){  if($(this).text()!=''){  $(this).css('background','red');  }  });  $("#content > div").mouseout(function(){  if($(this).text()!=''){  $(this).css('background','gray');  }  });  }    $(document).ready(function (){  for(var t = 1970; t < 2999; t++){  $("#yearsel").append("<option value ='"+t+"'>"+t+"</option>");  }  for(var y = 1; y < 13;y++){  $("#monthsel").append("<option value ='"+y+"'>"+y+"</option>");  }  var year = new Date().getFullYear();  var month = new Date().getMonth()+1;  var day = new Date().getDate();  var w = getTime(year,month,1).getDay()-1;  var num = day + w -1;  $("#yearsel").change(function(){  year = $("#yearsel option:selected").text();  month = $("#monthsel option:selected").text();  view(year,month);  });  $("#monthsel").change(function(){  year = $("#yearsel option:selected").text();  month = $("#monthsel option:selected").text();  view(year,month);  });  var oDate = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日',];  for(var i = 0;i < 7;i++){  $("#title").append("<div class='date'><b>"+oDate[i]+"</b></div>");  }  $("#yearsel option[value='"+year+"']").attr("selected", true);  view(year,month);  //標記當前日期  $("#t"+num).css('background','yellow');  });  </script>  </head>  <body>  <div id="main" class="main">  <center><h3>萬年歷</h3></center>  <select id="yearsel">  </select>年  <select id="monthsel">  </select>月<br><br>  <div id="title" class="title">  </div>  <div id="content" class="content">  </div>  </div>  </body>  </html>   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved