用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>

赞 (0)

相关推荐

  • PHP 万年历实现代码

    PHP 万年历实现代码

    使用PHP实现万年历功能的要点: •得到当前要处理的月份总共有多少天$days •得到当前要处理的月份的一号是星期几$dayofweek $days的作用:知道要处理的月份共有多少天,就可以通过循环输出天数了 $dayofweek的作用:只有知道每个月的1号是星期几,才能知道在输出天数之前需要输出多少空格(空白) 最终效果图如下: "万年历类"的代码如下: 复制代码 代码如下: <?php /** * PHP万年历 * @author Fly 2012/10/16 */ clas

  • js制作简易年历完整实例

    js制作简易年历完整实例

    本文实例讲述了js制作简易年历的方法.分享给大家供大家参考.具体如下: 今天学习了一下用js来实现年历的制作,顺便复习了一下this的用法,跟选项卡的制作有点差别,新用到了innerHTML,希望自己坚持下去,各位js大神也多多指点. innerHtml的用法 现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了. 例如top.innerHTML="";就可以在top对应的位置出现一个button了! 程序实现思

  • Python实现的简单万年历例子分享

    复制代码 代码如下: #!/usr/bin/env python2#-*- coding:utf-8 -*-__author__ = 'jalright' """使用python实现万年历""" def is_leap_year(year):    """判断是否是闰年,返回boolean值    """    if year/4==0 and  year/400 !=0:       

  • JS制作类似选项卡切换的年历

    本文实例为大家分享了用JS制作简易的可切换的年历,类似于选项卡,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ background-color: green; border-radius: 20px; pad

  • [转帖]PHP世纪万年历

    <?  //世纪万年历  #这是唯一的设置-请输入php文件的位置  $file="http://192.168.1.168/php/rl/s2m.php";  //#农历每月的天数  $everymonth=array(  0=>array(8,0,0,0,0,0,0,0,0,0,0,0,29,30,7,1),  1=>array(0,29,30,29,29,30,29,30,29,30,30,30,29,0,8,2),  2=>array(0,30,29,3

  • c#实现万年历示例分享 万年历农历查询

    复制代码 代码如下: using System.Collections.Generic;using System.Text; using System; namespace yangliToyinli{    #region ChineseCalendarException    /// <summary>    /// 中国日历异常处理    /// </summary>    public class ChineseCalendarException : System.Exce

  • PHP制作万年历

    PHP制作万年历

    使用PHP实现万年历功能的要点: 得到当前要处理的月份总共有多少天$days 得到当前要处理的月份的一号是星期几$dayofweek $days的作用:知道要处理的月份共有多少天,就可以通过循环输出天数了 $dayofweek的作用:只有知道每个月的1号是星期几,才能知道在输出天数之前需要输出多少空格(空白) 最终效果图如下: "万年历类"的代码如下: 复制代码 代码如下: <?php /**  * PHP万年历  * @author Fly 2012/10/16  */ cla

  • C语言实现的一个万年历小程序

    C语言实现的一个万年历小程序

    该程序简单地输入一个年份(1901年之后的年份),随后程序输出该年份十二个月的日历. #include<stdio.h> #define Mon 1 #define Tues 2 #define Wed 3 #define Thur 4 #define Fri 5 #define Sat 6 #define Sun 0 #define January_days 31 #define February_days 28 #define March_days 31 #define April_day

  • AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通

    '转发时请保留此声明信息,这段声明不并会影响你的速度! '****天枫AJAX集天气\IP\多国语言翻译MP3(可同步LRC歌词显示)\万年历查询通******** '作者:天枫 '网站:http://www.52515.net '电子邮件:chenshaobo@gmail.com 'WEB开发群:4635188 19182747 'QQ:76994859 '版权声明:版权所有,源代码公开,各种用途均可免费使用,但是修改后必须把修改后的文件 '发送一份给作者.并且保留作者此版权信息 '*****

  • JAVA实现的简单万年历代码

    本文实例讲述了JAVA实现的简单万年历.分享给大家供大家参考,具体如下: import java.util.Scanner; public class PrintCalendar { public static void main(String[] args) { int years = 0; int month = 0; int days = 0; boolean isRun = false; //從控制台輸入年,月 Scanner input = new Scanner(System.in)

随机推荐