zoukankan      html  css  js  c++  java
  • Jquery日历

    <!DOCTYPE html>
    <html>
      <head lang="en">
        <meta charset="UTF-8">
        <title>日历</title>
        <style type="text/css">

          .mySelfDate{
            336px;
            height:auto;
            margin:100px auto;
            background-color:#fff;
            border-radius:5px;
            padding-bottom:20px;
            overflow:hidden;
          }
    .mySelfDate_Top{
    100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #E9B02D;
    }
    .mySelfDate_Top span{
    display:inline-block;
    }
    .myPrevMonth,.myNextMonth{
    10px;
    height: 13px;
    overflow: hidden;
    position: relative;
    }
    .myPrevMonth img {
    position: absolute;
    top: 1px;
    left: 4px;
    cursor:pointer;
    }
    .myNextMonth img {
    position: absolute;
    top: 1px;
    right: 4px;
    cursor:pointer;
    }
    #showDate{
    200px;
    font-size: 14px;
    color: #FFF;
    margin:0 20px;
    }
    .mySelfDate_Week{
    100%;
    height:30px;
    line-height:30px;
    }
    .mySelfDate_Week span{
    display: inline-block;
    48px;
    text-align: center;
    float: left;
    font-family: "宋体";
    font-size: 12px;
    color: #000;
    font-weight: bold;
    }
    #Container{
    100%;
    height: auto;
    overflow: hidden;
    }
    #Container div{
    line-height:30px;
    48px;
    float: left;
    text-align: center;
    }
    #Container div span{
    display: inline-block;
    30px;
    color: #000;
    border-radius: 5px;
    font-size: 12px;
    }
    .Container_Div_Span{
    cursor:pointer;
    }

    </style>

      </head>
      <body style="background-color:#000">

        <div class="mySelfDate">

          <div class="mySelfDate_Top">
            <span class="myPrevMonth"><img src="images/sj.png"></span>
            <span id="showDate">2017年7月4日</span>
            <span class="myNextMonth"><img src="images/sj.png"></span>
          </div>

          <div class="mySelfDate_Week">
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
            <span>七</span>
          </div>
          <!--表格日期主显示区域-->

          <div id="Container"></div>

        </div>
        <script type="text/javascript" src="javascript/jquery-1.7.min.js"></script>
        <script type="text/javascript">

    /**
    * Created by Administrator on 2015/12/3.
    */
    $(function(){

    var myShowHeiht = null;
    var today = new Date();
    var year = today.getFullYear(); //本年
    var month = today.getMonth()+1; //本月
    var myMonth = month;
    var day = today.getDate(); //本日
    $("#showDate").html(year+"年"+month+"月");
    calendar(year,month,day);


    //点击上一个月时触发的事件
    $(".myPrevMonth").click(
    function(){
    myArry = [];
    month = month-1;
    if(month >= 1){
    $("#showDate").html(year+"年"+month+"月");
    showDate_NowValue = $("#showDate").html().split("年")[1].split("月")[0] ;
    }else{
    year = year-1;
    month = 12;
    $("#showDate").html(year+"年"+month+"月");
    showDate_NowValue = $("#showDate").html().split("年")[1].split("月")[0] ;
    }
    calendar3(year,month,myMonth);
    }
    )
    //=================================点击上一个月时触发的事件结尾处========================================================================


    //点击下一个月时触发的事件
    $(".myNextMonth").click(
    function(){

    myArry = [];
    month = month+1;
    if(month <= 12){
    $("#showDate").html(year+"年"+month+"月");
    showDate_NowValue = $("#showDate").html().split("年")[1].split("月")[0] ;
    }else{
    year = year+1;
    month = 1;
    $("#showDate").html(year+"年"+month+"月");
    showDate_NowValue = $("#showDate").html().split("年")[1].split("月")[0] ;
    }

    calendar3(year,month,myMonth);
    }
    )
    //=================================点击下一个月时触发的事件结尾处========================================================================


    //实现日历
    function calendar(year,month,day) {
    //本月第一天是星期几(距星期一离开的天数)
    var startDay = new Date(year, month - 1, 1).getDay()==0?startDay=7: new Date(year, month - 1, 1).getDay();
    //本月有多少天(即最后一天的getDate(),但是最后一天不知道,我们可以用“上个月的0来表示本月的最后一天”)
    var nDays = new Date(year, month, 0).getDate();
    //上个月有多少天
    var prevMonthDays = new Date(year,month-1,0).getDate();
    //本月最后一天是星期几(距星期一离开的天数)
    var endDay = new Date(year, month - 1,nDays).getDay();

    //开始画日历
    var numRow = 0; //记录行的个数,到达7的时候创建tr
    var i; //日期
    var html = '';

    //第一行
    for (i = 1; i < startDay; i++) {
    html += '<div><span style="color:#999">'+(prevMonthDays-startDay+i+1)+'</span></div>';
    numRow++;
    }
    //中间
    for (var j = 1; j <= nDays; j++) {
    if( j == day ){
    html += '<div><span style="color:#fff;height:30px;background-color:#E9B02D;border-radius:50%;" class="Container_Div_Span">'+j+'</span></div>';
    }else{
    html += '<div><span class="Container_Div_Span">'+j+'</span></div>';
    }
    numRow++;
    }
    //最后一行
    for(i = 1 ; i <= 7-endDay;i++ ){
    html += '<div><span style="color:#999">'+i+'</span></div>';
    numRow++;
    }
    for( i = 1 ; i <= 42 - numRow ; i++ ){
    html += '<div><span style="color:#999">'+(6-endDay+i+1)+'</span></div>';
    }
    document.getElementById("Container").innerHTML = html;
    $(".Container_Div_Span").click(
    function(){
    var myDate = $(this).text();
    myDate = year+'-'+month+'-'+myDate
    console.log(myDate)
    }
    )

    }

    //实现日历2
    function calendar3(year,month,myMonth) {
    //本月第一天是星期几(距星期一离开的天数)
    var startDay = new Date(year, month - 1, 1).getDay()==0?startDay=7: new Date(year, month - 1, 1).getDay();
    //本月有多少天(即最后一天的getDate(),但是最后一天不知道,我们可以用“上个月的0来表示本月的最后一天”)
    var nDays = new Date(year, month, 0).getDate();
    //上个月有多少天
    var prevMonthDays = new Date(year,month-1,0).getDate();
    //本月最后一天是星期几(距星期一离开的天数)
    var endDay = new Date(year, month - 1,nDays).getDay();

    //开始画日历
    var numRow = 0; //记录行的个数,到达7的时候创建tr
    var i; //日期
    var html = '';

    //第一行
    for (i = 1; i < startDay; i++) {
    html += '<div><span style="color:#999">'+(prevMonthDays-startDay+i+1)+'</span></div>';
    numRow++;
    }
    //中间
    for (var j = 1; j <= nDays; j++) {
    if( j == day && month == myMonth ){
    html += '<div><span style="color:#fff;height:30px;background-color:#E9B02D;border-radius:50%;" class="Container_Div_Span">'+j+'</span></div>';
    }else{
    html += '<div><span class="Container_Div_Span">'+j+'</span></div>';
    }
    numRow++;
    }
    //最后一行
    for(i = 1 ; i <= 7-endDay;i++ ){
    html += '<div><span style="color:#999">'+i+'</span></div>';
    numRow++;
    }
    for( i = 1 ; i <= 42 - numRow ; i++ ){
    html += '<div><span style="color:#999">'+(6-endDay+i+1)+'</span></div>';
    }
    document.getElementById("Container").innerHTML = html;

    $(".Container_Div_Span").click(
    function(){
    var myDate = $(this).text();
    myDate = year+'-'+month+'-'+myDate
    console.log(myDate)
    }
    )

    }

    })

    </script>

      </body>
    </html>

  • 相关阅读:
    PATA 1071 Speech Patterns.
    PATA 1027 Colors In Mars
    PATB 1038. 统计同成绩学生(20)
    1036. 跟奥巴马一起编程(15)
    PATA 1036. Boys vs Girls (25)
    PATA 1006. Sign In and Sign Out (25)
    读取web工程目录之外的图片并显示
    DOS命令
    java连接oracle集群
    servlet
  • 原文地址:https://www.cnblogs.com/haonantong/p/7116513.html
Copyright © 2011-2022 走看看