寫了個三個月的日曆

原創 无缘Di爱你 2020-02-22 10:17

效果圖：


HTML文件:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/Schedule.css">
</head>
<body>
<div class="top-nav">
    <ul>
        <li>
            <a>
                <p><span class="glyphicon glyphicon-menu-left"></span><span>日程安排</span></p>
            </a>
        </li>
    </ul>
</div>
<div class="topHeight">

</div>
<div class="schedule">
    <div class="scheduleMonth">
        <h4 id="tHeader_0"></h4>
        <table id="tableList_0">
            <tr>
                <th>週日</th>
                <th>週一</th>
                <th>週二</th>
                <th>週三</th>
                <th>週四</th>
                <th>週五</th>
                <th>週六</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div class="scheduleMonth">
        <h4 id="tHeader_1"></h4>
        <table id="tableList_1">
            <tr>
                <th>週日</th>
                <th>週一</th>
                <th>週二</th>
                <th>週三</th>
                <th>週四</th>
                <th>週五</th>
                <th>週六</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    <div class="scheduleMonth">
        <h4 id="tHeader_2"></h4>
        <table id="tableList_2">
            <tr>
                <th>週日</th>
                <th>週一</th>
                <th>週二</th>
                <th>週三</th>
                <th>週四</th>
                <th>週五</th>
                <th>週六</th>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
<div class="scheduleXx">
    <h5>任務信息</h5>
</div>
<div id="taskMain_1">
    <ul>
    </ul>
</div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/Schedule.js"></script>
</body>
</html>

css樣式 

.topHeight{
    width: 100%;
    height: 54px;
}
a:focus {
    color: #000000;
    text-decoration: underline;
}
@media(device-height:667px) and (-webkit-min-device-pixel-ratio:2){
    /* 兼容iphone6 */
    .top-nav{
        height: 45px!important;
    }
    .topHeight{
        height: 50px!important;
    }
    .top-nav a p{
        padding-top: 12px!important;
        font-size: 16px!important;
    }
    .taskSearchShow{
        width: 30px!important;
        height: 30px!important;

    }
    .top-nav ul li img{
        width: 30px!important;
    }
}
@media(device-height:736px) and (-webkit-min-device-pixel-ratio:3){
    /* 兼容iphone6Plu*/
    .top-nav{
        height: 45px!important;
    }
    .topHeight{
        height: 50px!important;
    }
    .top-nav a p{
        padding-top: 12px!important;
        font-size: 16px!important;
    }
    .taskSearchShow{
        width: 30px!important;
        height: 30px!important;

    }
    .top-nav ul li img{
        width: 30px!important;
    }
}
/*.showSchedule{*/
    /*position: fixed;*/
    /*display: none;*/
    /*z-index: 1;*/
    /*width: 90%;*/
    /*height: 300px;*/
    /*background: rgba(255, 255, 255, 0);*/
/*}*/
.top-nav{
    background-color: #222222;
    box-shadow: 1px 1px 1px #003e71;
    height: 50px;
    position: fixed;
    z-index: 6;
    width: 100%;
}
.top-nav a{
    /*width: 80px;*/
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}
.top-nav a:hover{
    text-decoration: none;
}
.top-nav a p{
    width: 120px;
    padding: 12px 2px;
}
.top-nav a p span:first-child{
    margin-top: 1px;
}
.top-nav ul{
    list-style: none;
    -webkit-padding-start: 0px;
}
.top-nav ul li{
    float: left;
}
.top-nav ul li img{
    width: 20px;
    float: right;
    right: 9px;
    top:7px;
    position: fixed;
}
/*表單*/
h4{
    -webkit-margin-before: 0.33em;
    -webkit-margin-after: 0.33em;
    width: 265px;
    text-align: center;
}
table{
    border: 0;
    border-collapse: separate;
    border-spacing: 0px;
    border-color: grey;
}
td{
    border-right: 1px solid #474747;
    border-bottom: 1px solid #474747;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}
th{
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}
td:first-child{
    border-left: 1px solid #000000;
}
.tdBG{
    background: #d7d9db;
}
.tdBGB{
    background: #d7d9db !important;
}
/*表單end*/
.schedule{
    text-align: center;
    height: 300px;
    overflow: hidden;
    overflow-y: auto;
    border-bottom: 1px solid #ddd;
}
.scheduleMonth{
    margin-left: 10%;
}
.monthBg{
    background: #66faaa;
    color: #fff;
}
.thisMonth{
    background: #d84750 !important;
    color: #fff;
}
.nTodayBg{
    background: #f99f4c;
    color: #fff;
}
.scheduleXx{
    width: 100%;
    border-bottom: 2px solid #d84750;
}
.scheduleXx h5{
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 3px;
}
#taskMain_1{
    margin-bottom: 10px;
}
#taskMain_1 ul{
    list-style: none;
    -webkit-padding-start: 0px;
}
#taskMain_1 ul li{
    padding-left: 5px;
    height: 63px;
    border-bottom: 1px solid #ddd;
}
.taskMain_1_list h5{
    -webkit-margin-before: 0;
    padding-top: 10px;
}
.taskMain_1_list img{
    width: 31px;
}
.taskMain_1_list p{
    font-size: 11px;
    color: #afafaf;
    height: 17px;
    width: 100%;
}
.taskMain_1_list p img{
    width: 14px;
}
.taskMain_1_list p span{
    min-width: 100px!important;
    text-align: left;
    padding-right: 10%;
    /*float: right;*/
}
a{
    color: #000;
}
a:hover{
    color: #000;
    text-decoration: none;
}
.divFinish{
    /*position: absolute;*/
    float: right;
    /*left: 295px;*/
    z-index: 3;
}
js腳本： 

/**
 * Created by Administrator on 2015/7/28.
 */
$(function(){
    //當前月
    var currentDate = new Date();//當前月的日期
    var currentYear=currentDate.getFullYear();//當前年
    var currentMonth=(currentDate.getMonth()+1);//當前年
    currentDate.setDate(1);//當前月第一天
    var  firstWeekday=currentDate.getDay();//一週的節點
//        alert(currentMonth);
    currentDate.setMonth(currentDate.getMonth() + 1);
    var currentLastDate = new Date(currentDate - 3600000*24);//本月的最後一天
//        alert(currentDate.getMonth());
    $("#tHeader_1").append(currentYear+"年"+currentMonth+"月");
    $("#tableList_1").addClass("Month_"+currentMonth);
//        alert(currentDate.getDate());

    //當前月end

    //上一個月
    var beforeDate=new Date();
    beforeDate.setFullYear(currentYear,(currentMonth-2),1);//上月的日期
//        beforeDate.setMonth(beforeDate.getMonth());
    var  beforeDateWeekday=beforeDate.getDay();//一週的節點
    beforeDate.setMonth(beforeDate.getMonth() + 1);
    //alert(beforeDateWeekday)
    var beforeLastDate = new Date( beforeDate- 3600000*24);//上月的最後一天
    $("#tHeader_0").append(beforeDate.getFullYear()+"年"+beforeDate.getMonth()+"月");
    $("#tableList_0").addClass("Month_"+beforeDate.getMonth());
    //上一個月end
    //上上一個月
    var beforeBeforeDate =new Date();
    beforeBeforeDate.setFullYear(currentYear,(currentMonth-2),1);//上上月的日期
    var beforeBeforeLastDate = new Date( beforeBeforeDate - 3600000*24);//上月的最後一天
    //上上一個月end

    //下個月
    var nextDate =new Date();//上月的日期
    nextDate.setFullYear(currentYear,currentMonth,1);//下月的日期
    var nextDateWeekday=nextDate.getDay();//一週的節點
    nextDate.setMonth(nextDate.getMonth() +1);
    // alert(nextDateWeekday)
    var nextLastDate = new Date( nextDate- 3600000*24);//上月的最後一天
    $("#tHeader_2").append(nextDate.getFullYear()+"年"+nextDate.getMonth()+"月");
    $("#tableList_2").addClass("Month_"+nextDate.getMonth());
    //下個月end


    showMessage(0,beforeBeforeLastDate,beforeDateWeekday,beforeLastDate);//上一個月
    showMessage(1,beforeLastDate,firstWeekday,currentLastDate);//當前月
    showMessage(2,currentLastDate,nextDateWeekday,nextLastDate);//下一個月
    $(".schedule").scrollTop($(".scheduleMonth").height());//鎖定位置
    $.post(conn,{GID:GID,TASKUSERID:TASKUSERID},function(data){
        //localStorage.taskGroupTaskList_0 = data;
        data=setTranscoding(data);
        console.log(data);
        for(var m=0;m<data.body.rows.length;m++){
            var getData=data.body.rows[m];
            var Month=getData.ENDDATE.split("-")[1].replace(/0/g,'');
            var DateNow=getData.ENDDATE.split("-")[2].replace(/0/g,'');

            if( $(".Month_"+Month+" .td_"+DateNow).hasClass("tdBG")){
                //$(".tdBG").addClass("tdBGB");
                $(".Month_"+Month+" .td_"+DateNow).addClass("monthBg");
                $(".Month_"+Month+" .td_"+DateNow).addClass("Z"+getData.ENDDATE);
                $(".tdBG").removeClass("monthBg");
            }else{
                $(".Month_"+Month+" .td_"+DateNow).addClass("monthBg");
                $(".Month_"+Month+" .td_"+DateNow).addClass("Z"+getData.ENDDATE);
            }

            //console.log(getData.ENDDATE.split("-")[1].replace(/0/g,''));
            //console.log(getData.ENDDATE.split("-")[2]);
        }
    });
  //今天
    var nToday= new Date();
//    alert("月："+(nToday.getMonth()+1)+"，囸："+nToday.getDate())
    $(".Month_"+(nToday.getMonth()+1)+" .td_"+nToday.getDate()).addClass("nTodayBg");
    $(".nTodayBg").addClass("thisMonth");
    if($(".Month_"+(nToday.getMonth()+1)+" .td_"+nToday.getDate()).hasClass("tdBG")){
        $(".tdBG").addClass("tdBGB");
        $(".tdBG").removeClass("thisMonth");
        $(".tdBG").removeClass("nTodayBg");
    }
  //console.log(nToday.getDate());
  //今天end
    //$(".schedule td").bind("touchstart",function(e){
    $(".schedule td").bind("click",function(e){
    //    e.preventDefault();
        //console.log($(this).attr("class"));
        //console.log($(this).attr("class").split("Z")[1]);
        $("td").removeClass("thisMonth");
        $(this).addClass("thisMonth");
        $("#taskMain_1 ul").empty();
        if(undefined!=$(this).attr("class").split("Z")[1]){
            var END_DATE=$(this).attr("class").split("Z")[1].replace(/ thisMonth/g,'');
            //console.log(END_DATE);
            $.post(conn+"",{END_DATE:END_DATE,GID:GID,TASKUSERID:TASKUSERID},function(Schedule){
               
            });
        }

    });

    $(".top-nav a:eq(0) p").bind("touchstart",function(e) {
        e.preventDefault();

        timeOutEvent1 = setTimeout(function(){
            if(g==3){
                location.replace(localStorage.taskGroupUrl+"&g="+g);
            }
            clearTimeout(timeOutEvent1);//清除定時器
        },100);
        //location.replace(document.referrer);
    });
    //body: Object
    //rows: Array[3]
    //0: Object
    //ENDDATE: "2015-07-31"
    //STATUS: "0"
//        alert(beforeDateWeekday);
//        alert(beforeLastDate.getDate());
//        當前月

});
/*
 @num div的下表
 @beforeLastDate 上一個月的最後一天
 @firstWeekday 第一天星期幾的位置
 @currentLastDate 這個月的最後一天
 */
function showMessage(num,beforeLastDate,firstWeekday,currentLastDate){
    $("#tableList_"+num+" tr:eq(1) td:eq("+firstWeekday+")").append("1");
    $("#tableList_"+num+" tr:eq(1) td:eq("+firstWeekday+")").addClass("td_1");
    var BeforeLastDate=beforeLastDate.getDate();
    if(firstWeekday>0){
        for(var i=1;i<=firstWeekday;i++){
            $("#tableList_"+num+" tr:eq(1) td:eq("+(firstWeekday-i)+")").append(BeforeLastDate);
            $("#tableList_"+num+" tr:eq(1) td:eq("+(firstWeekday-i)+")").addClass("tdBG");
            $("#tableList_"+num+" tr:eq(1) td:eq("+(firstWeekday-i)+")").addClass("td_"+BeforeLastDate);
            BeforeLastDate--;
        }
    }
    var k=2;
    for(var j=(firstWeekday+1);j<=7;j++){
        $("#tableList_"+num+" tr:eq(1) td:eq("+j+")").append(k);
        $("#tableList_"+num+" tr:eq(1) td:eq("+j+")").addClass("td_"+k);
        k++;
    }
//        alert(currentLastDate.getDate())
    var m=Math.ceil((currentLastDate.getDate()-(6-firstWeekday))/7);
    for(var k=0;k<m;k++){
        $("#tableList_"+num).append("<tr></tr>");
    }
    var temp=parseInt($("#tableList_"+num+" tr:eq(1) td:eq(6)").text());
    for(i=2;i<(m+2);){
        for (var j = 0; j < 7; j++){
            if(temp<currentLastDate.getDate()) {
                temp++;
                $("#tableList_"+num+" tr:eq(" + i+ ")").append("<td class='td_"+temp+"'>" + temp + "</td>");
//                    if(temp<6)  $("#tableList tr:eq(" + i+ ")").append("<td class='tdBG td_"+i+"'>" + temp + "</td>");
                temp1=1;
            }
            else{
                $("#tableList_"+num+" tr:eq(" + i+ ")").append("<td class='tdBG td_"+temp1+"'>" + temp1 + "</td>");
                temp1++;
            }
            if(j==6){
                i++;
            }
        }
    }
    $("#tableList_"+num+" tr:eq(1) td").css({"border-top": "1px solid #474747"});
//        當前月end
}
//var timeOutEvent=0;//定時器
//function gTouchStart(){
//    timeOutEvent = setTimeout("longPress()",500);
//    return false;
//};
//function longPress(){
//    timeOutEvent = 0;
//}
//function gtouchend(){
//    clearTimeout(timeOutEvent);//清除定時器
//    if(timeOutEvent!=0){
//    }
//    return false;
//};
//function gtouchmove(){
//    clearTimeout(timeOutEvent);
//    timeOutEvent = 0;
//};



無緣Di愛你
發佈了29 篇原創文章 · 獲贊 11 · 訪問量 4萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

大模型應用之基於Langchain的測試用例生成

一 用例生成實踐效果 在組內的日常工作安排中，持續優化測試技術、提高測試效率始終是重點任務。近期，我們在探索實踐使用大模型生成測試用例，期望能夠藉助其強大的自然語言處理能力，自動化地生成更全面和高質量的測試用例。 當前，公司已經普及使用J

原創 2024-06-06 23:55:14

基於阿里雲服務網格流量泳道的全鏈路流量管理（三）：無侵入式的寬鬆模式泳道

作者：尹航 在前文《基於阿里雲服務網格流量泳道的全鏈路流量管理（一）：嚴格模式流量泳道》、《基於阿里雲服務網格流量泳道的全鏈路流量管理（二）：寬鬆模式流量泳道》中，我們介紹了流量泳道的概念、使用流量泳道進行全鏈路灰度管理的方案，以及阿里雲服

原創 2024-06-05 21:13:51

簡單4步，帶你用華爲雲MetaStudio製作數字人短片

本文分享自華爲雲社區《使用MetaStudio生產線四步製作數字人視頻》，作者： yd_298097624。 隨着AIGC新技術尤其是大模型技術的發展，音視頻行業、數字內容生產行業正在經歷這從生產方式和生產效率上的一個巨大變化。預測到203

原創 2024-06-05 10:56:56

自動化Reddit圖片收集：Python爬蟲技巧

引言 Reddit，作爲一個全球性的社交平臺，擁有海量的用戶生成內容，其中包括大量的圖片資源。對於數據科學家、市場研究人員或任何需要大量圖片資源的人來說，自動化地從Reddit收集圖片是一個極具價值的技能。本文將詳細介紹如何使用Pyth

原創 2024-06-05 00:06:19

交互式流程圖組件DHTMLX Diagram v6.0 - 擁有更靈活的高度可定製功能

DHTMLX Diagram庫允許用幾行代碼構建JavaScript流程圖，通過自動佈局和實時編輯器，它可以更容易地將複雜數據可視化到一個整潔的層次結構中。 DHTMLX Diagram v6.0版本發佈，帶來了衆多令人興奮的新功能和改進，

原創 2024-06-04 12:32:11

記一次疑似JVM內存泄漏的排查過程

一、背景 在日常部門OpsReview過程中，部門內多次遇到應用容器所在的宿主機磁盤繁忙導致的接口響應緩慢，TP99增高等影響服務性能的問題，其中比較有效的解決方案是開啓日誌的異步打印，可以有效避免同步日誌打印在磁盤IO高起的情況下拖慢業

原創 2024-06-04 12:09:32

告別內存OOM，解決MySQL內存增長問題

本文分享自華爲雲社區《【華爲雲MySQL技術專欄】MySQL內存增長問題分析案例》，作者：GaussDB 數據庫。 前言 在現網環境中，偶爾會遇到客戶實例內存OOM（Out Of Memory，即內存耗盡或溢出）的情況。MySQL數據庫

原創 2024-06-04 11:09:29

深入跨域 - 解決方案

1 前言 前文 《深入跨域 - 從初識到入門》 中，大家已經對同源與跨域的產生歷史與重要性等有了一個初步的瞭解了，那麼我們應該如何解決在日常開發中遇到的跨域引起的問題呢？  2 一覽圖 我們將日常開發中的跨域解決方案大體分爲兩類：if

原創 2024-06-04 02:38:29

深入跨域 - 解決方案

1 前言 前文 《深入跨域 - 從初識到入門》 中，大家已經對同源與跨域的產生歷史與重要性等有了一個初步的瞭解了，那麼我們應該如何解決在日常開發中遇到的跨域引起的問題呢？  2 一覽圖 我們將日常開發中的跨域解決方案大體分爲兩類：if

原創 2024-06-04 02:36:27

深入跨域 - 解決方案

1 前言 前文 《深入跨域 - 從初識到入門》 中，大家已經對同源與跨域的產生歷史與重要性等有了一個初步的瞭解了，那麼我們應該如何解決在日常開發中遇到的跨域引起的問題呢？  2 一覽圖 我們將日常開發中的跨域解決方案大體分爲兩類：if

原創 2024-06-04 02:34:07

「實戰應用」如何用圖表控件LightningChart JS創建SQL儀表板應用（一）

LightningChart JS是Web上性能特高的圖表庫，具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫，常用於貿易，工程，航空

原創 2024-06-03 12:21:43

破除軟件開發困局，基於容器平臺的DevOps轉型實踐

本文分享自華爲雲社區《DevOps賦能行業雲原生數字化轉型》，作者：雲容器大未來。 企業軟件開發困局 隨着信息化的進程不斷加速，帶來的各種業務應用、平臺應用等軟件資產的複雜度也快速上升。隨之而來的信息化基礎設施能力與軟件工程全生命週期的管

原創 2024-06-03 10:59:23

如何去掉DedeCMS首頁index.html後綴

在使用織夢DedeCMS程序的時候是否有看到在打開網站首頁的時候會有index.html這樣子的後綴跟着。有些朋友可能忌諱這樣的樣式，有的會說對網站SEO有影響，實際上影響是不大的，只不過看着確實不是特別好看，如果我們有需要去掉的話也是可以

原創 2024-06-01 12:55:20

spark udtf自定義函數 spark explode函數

大數據,函數相關視頻講解：  013爲什麼說未來系統是linux  008_ 輸出h字符_REPL_引號_括號_什麼是函數  數據結構與算法-棧-Go代碼演示版  微積分基本想法  數據科學中的函數 1.如何生成多行的序列 spark sq

xiaomin0322 2024-06-01 00:06:20

Haskell網絡爬蟲：視頻列表獲取案例分析

摘要 隨着短視頻平臺的興起，如何高效地獲取視頻內容成爲了一個熱門話題。本文將通過構建一個Haskell網絡爬蟲來爬取抖音平臺的視頻列表，深入分析網絡爬蟲的設計和實現過程。我們將探討Haskell在網絡爬蟲開發中的優勢，以及如何利用Has

原創 2024-05-30 00:08:28