【前端】html+js+css實現日曆，jquery+js實現監聽點選

阿新 • • 發佈：2020-12-28

技術標籤：前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="../../static/js/jquery.min.js"></script>
</head>
<style>
    *{
        padding: 0;
        margin 
: 0;
    }
    .calendar{
        width:253px;
        height:250px;
        background:#fff;
        box-shadow:0px 1px 1px rgba(0,0,0,0.1);
        padding: 12px;
    }

    .body-list ul{
        width:100%;
        font-family:arial;
        font-weight:bold;
        font-size:14px;
    }
    .body-list ul li 
{
        width:26px;
        height:26px;
        margin: 5px;
        line-height:26px;
        list-style-type:none;
        display:block;
        box-sizing:border-box;
        float:left;
        text-align:center;
        cursor: pointer;
        transition: 0.3ms;
        border-radius: 50%;
    } 

    .body-list ul li:hover{
        color: #6ac13c;
        border:1px solid #6ac13c;
        background:#e9f8df; /*淺綠色背景*/
    }


    .lightgrey{
        color:#a8a8a8; /*淺灰色*/
    }
    .darkgrey{
        color:#565656; /*深灰色*/
    }
    .green{
        color:#6ac13c!important; /*綠色*/
        border:1px solid #6ac13c;
        background:#e9f8df; /*淺綠色背景*/
    }
</style>
<body>
<!--  資料，包含，選中的資料，和全部的資料，選中的資料如果沒有引數，則就是空物件  -->
<div class="calendar">
    <div class="title" style="font-size: 10px">
<!--        <h1 class="green" id="calendar-title">Month月</h1>-->
        <h2 class="green small" id="calendar-year-month">Year年</h2>
        <a href="" id="prev">Prev Month</a>
        <a href="" id="next">Next Month</a>
    </div>
    <div class="body">
        <div class="lightgrey body-list">
            <ul>
                <li>MON</li>
                <li>TUE</li>
                <li>WED</li>
                <li>THU</li>
                <li>FRI</li>
                <li>SAT</li>
                <li>SUN</li>
            </ul>
        </div>
        <div class="darkgrey body-list">
            <ul id="days">
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
    var month_olympic = [31,29,31,30,31,30,31,31,30,31,30,31];
    var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];
    var month_name = ["1","2","3","4","5","6","7","8","9","10","11","12"];

    var holder = document.getElementById("days");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    // var ctitle = document.getElementById("calendar-title");
    var cyear = document.getElementById("calendar-year-month");

    var my_date = new Date();
    var my_year = my_date.getFullYear();
    var my_month = my_date.getMonth();
    var my_day = my_date.getDate();

    //獲取某年某月第一天是星期幾
    function dayStart(month, year) {
        var tmpDate = new Date(year, month, 1);
        return (tmpDate.getDay());
    }

    //計算某年是不是閏年，通過求年份除以4的餘數即可
    function daysMonth(month, year) {
        var tmp = year % 4;
        if (tmp === 0) {
            return (month_olympic[month]);
        } else {
            return (month_normal[month]);
        }
    }

    function refreshDate(){
        var str = "";
        var totalDay = daysMonth(my_month, my_year); //獲取該月總天數
        var firstDay = dayStart(my_month, my_year); //獲取該月第一天是星期幾
        var myclass;
        for(var i=1; i<firstDay; i++){
            str += "<li></li>"; //為起始日之前的日期建立空白節點
        }
        //根據下面方法得到的資料，如果是今天之後的資料，則顯示藍色表示可以修改。
        //如果是以前完成過的資料，則顯示綠色的勾勾
        for(var i=1; i<=totalDay; i++){
            if((i<my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()) || my_year<my_date.getFullYear() || ( my_year==my_date.getFullYear() && my_month<my_date.getMonth())){
                myclass = " class='lightgrey'"; //當該日期在今天之前時，以淺灰色字型顯示
            }else if (i==my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()){
                myclass = " class='green lightgrey'"; //當天日期以綠色背景突出顯示
            }else{
                myclass = " class='darkgrey'"; //當該日期在今天之後時，以深灰字型顯示
            }
            str += "<li"+myclass+">"+i+"</li>"; //建立日期節點
        }
        holder.innerHTML = str; //設定日期顯示
        // ctitle.innerHTML = month_name[my_month]; //設定英文月份顯示
        cyear.innerHTML = my_year+"年"+month_name[my_month]+"月"; //設定年份顯示



        let itemli = $("#days>li");
        console.log(itemli)
        //每個都可以點
        for(var i = 0; i<itemli.length; i++){
            itemli[i].index = i; //給每個li定義一個屬性索引值
            itemli[i].onclick = function(){
                console.log(this.index+" "+this.innerHTML);
            }
        }
    }
    refreshDate(); //執行該函式




    //每次切換都得到這一個月的資料，上面，如果這個月完成過，則變為對勾，否則顯示日期
    prev.onclick = function(e){
        e.preventDefault();
        my_month--;
        if(my_month<0){
            my_year--;
            my_month = 11;
        }
        //得到資料

        refreshDate();
    }
    next.onclick = function(e){
        e.preventDefault();
        my_month++;
        if(my_month>11){
            my_year++;
            my_month = 0;
        }
        //得到資料

        refreshDate();
    }


    // document.getElementsByTagName("li")

</script>
</body>
</html>

【前端】html+js+css實現日曆，jquery+js實現監聽點選

技術標籤：前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

【JavaWeb】HTML&CSS 基礎

HTML&CSS 基礎 HTML 基礎 HTML 標籤 HTML標題：HTML 標題（Heading）是通過 h1 - h6 等標籤進行定義的。

【前端】JavaScript學習筆記（六）——jQuery

✨課程連結【狂神說Java】JavaScript最新教程通俗易懂_嗶哩嗶哩_bilibili ✨學習筆記

【前端】css js 全屏 esc退出全屏滾動條隱藏相容火狐，文字超出容器長度省略號顯示

【前端】H5 + 微信小程式實現評價星級

評價星星的邏輯是先用五個未填充的星星顯示在介面上，然後當用戶點選到某一個星星，比如點選了第三個星星，則將前三個星星迴圈用有填充的星星替代，這樣便感覺是選中了三個星星一樣。

【知識分享】HTML 與 CSS

技術標籤：javahtmlcsspythonweb 主要內容 [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-Yat1ltCN-1608264035268)(/HTML + CSS.png)] HTML

【前端】GIS及JS題目

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title></title>

【前端】相對定位實現十字居中（上下左右居中）

我在寫視訊暫停時，出現暫停圖示的時候，遇到了定位的問題得出的解決方案，記錄如下：

【前端】【樣式】CSS居中的三種方式

@charset \"utf-8\"; /* CSS Document */ /** *開發者：萌狼藍天 *當前版本：v0.1[Debug] *最後更新日期：20210918

【前端】中國地圖資源與實現

【LeetCode】劍指 Offer 09. 用兩個棧實現佇列

【題目描述】用兩個棧實現一個佇列。佇列的宣告如下，請實現它的兩個函式 appendTail 和 deleteHead ，分別完成在佇列尾部插入整數和在佇列頭部刪除整數的功能。(若佇列中沒有元素，deleteHead操作返回 -1 )

【前端】使用者評價頁面評價圖片刪除

使用者在評價商品時，往往會有上傳圖片的可能，這次來實現一下上傳和刪除使用者上傳圖片的功能

【前端】textarea接入ACE程式碼編輯器

　　原文地址：https://blog.csdn.net/cgema/article/details/72458008 最近在做一個node.js的專案，有一處textarea需要編輯js指令碼，普通的textarea使用起來比較雞肋，於是決定找一個好用的指令碼編輯器接入使用

狂神說Java【SMBMS】——SMBMS超市訂單管理系統(二) ——登陸功能實現

頁面實現邏輯/流程 1、編寫前端頁面前端頁面直接使用已有的，我們主要編寫網頁背後的執行程式碼

【前端】我的刷題記錄（4）

1、結果輸出是什麼？ var a=[0]; if(a){ console.log(a==true); } else{ console.log(\"xxx\"); } 答：false。

【PHP】php 基於redis使用令牌桶演算法實現流量控制

整理自： https://www.cnblogs.com/itbsl/p/13407489.html https://www.cnblogs.com/myJuly/p/13608475.html

【Java】——連結串列增刪查改功能的模擬實現

技術標籤：Javajava連結串列 1.連結串列：連結串列是一種物理儲存結構上非連續儲存結構，資料元素的邏輯順序是通過連結串列中的引用連結次序來實現的。

【前端】貪吃蛇遊戲

技術標籤：筆記【前端】貪吃蛇遊戲用HTML和CSS繪製貪吃蛇的地圖以及佈局整個遊戲介面本程式碼只限於PC端執行，移動端無法操作。實際程式碼不長，只是註釋較多。本人只是菜鳥，所以必須多寫註釋。

【LeetCode】C++ ：簡單題 - 棧 232. 用棧實現佇列

技術標籤：LeetCodeleetcode棧佇列資料結構 232. 用棧實現佇列難度簡單261 請你僅使用兩個棧實現先入先出佇列。佇列應當支援一般佇列的支援的所有操作（push、pop、peek、empty）：

【前端】vue下載檔案，返回值為 blob 檔案流(新增這個屬性 responseType: ‘blob‘)，失敗後的錯誤資訊處理以及成功處理。

技術標籤：學習javascriptvuejs 1、當我們下載檔案時，成功可以直接下載，程式碼如下

【前端】html+js+css實現日曆，jquery+js實現監聽點選

相關推薦