JSカレンダーを説明_javascriptネイティブプラグインを説明するプラグイン

その他 2019-12-19 21:25:43 訪問数: null

次のような効果があります
JSカレンダーコントロール

htmlコード

<div class="date-control" id="date-control">
    <span id="pre-month">-</span>
    <p><span id="table-year">2017</span>/<span id="table-month">12</span></p>
    <span id="next-mont">+</span>
</div>
<table id="date-table">
    <thead>
    <tr>
        <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>日</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script>
var c = new Calendar();
//c.calendarInit(false,2017,11);//第一个参数代表是否是今天的日历，如果第一个参数为false，还需要传递俩个参数，年和月。
c.calendarInit(true);
</script>

CSSコード

table{
    width: 300px;
    border-collapse:collapse;
}
th{
    border-bottom: 2px solid springgreen;
}
td{
    text-align: center;
    color: #999;
}
.this-month{
    color: #333;
}
.today{
    color: crimson;
}
.date-control{
    width: 300px;
    height: 20px;
    background: silver;
    position: relative;
}
.date-control p{
    text-align: center;
    line-height: 20px;
    color: #fff;
}
#pre-month,#next-mont{
    display: block;
    height: 20px;
    width: 20px;
    color: #fff;
    position: absolute;
    top: 0;
    text-align: center;
    background: #01cd78;
    cursor: pointer;
    user-select: none;
}
#pre-month{
    left: 0;
}
#next-mont{
    right: 0;
}

JSコード

function Calendar() {
    this.today = new Date();
    this.table = document.getElementById("date-table").getElementsByTagName("tbody")[0];
    this.preMontBtn = document.getElementById("pre-month");
    this.nextMontBtn = document.getElementById("next-mont");
    this.yearText = document.getElementById("table-year");
    this.monthText = document.getElementById("table-month");
}
Calendar.prototype={
    constructor:Calendar,
    calendarInit:function (_isToday,_y,_m) {
        if(_isToday){
            this.drawTable(this.today.getFullYear(),this.today.getMonth());
            this.titleInit(this.today.getFullYear(),this.today.getMonth()+1);
        }else {
            this.drawTable(_y,_m-1);
            this.titleInit(_y,_m)
        }
        this.btnListener();
    },
    getMontInfo:function (_year,_month) {
        var firstDate = new Date(_year,_month,1);
        var lastDate = new Date(_year,_month+1,0);
        return {
            firstDay:firstDate.getDay()===0?7:firstDate.getDay(),
            lastDay:lastDate.getDay()===0?7:lastDate.getDay(),
            days:lastDate.getDate()
        }
    },
    drawTable:function (_year,_month) {
        this.table.innerHTML = "";
        var allDayNum = this.getDateNum(_year,_month);
        var rows = allDayNum.length/7;
        var index = 0;
        for(var i=0;i<rows;i++){
            var tr = document.createElement("tr");
            for(var j=0;j<7;j++){
                var td = document.createElement("td");
                console.log(allDayNum[index].date,index);
                td.innerText = allDayNum[index].date;
                if(allDayNum[index].info==="this month"){
                    td.className="this-month"
                }else if(allDayNum[index].info==="today"){
                    td.className="today";
                }
                tr.appendChild(td);
                index++;
            }
            this.table.appendChild(tr);
        }
    },
    getDateNum:function (_year,_month) {
        var allDayNum = [];
        var today = new Date();
        var todayInfo = {
            year:today.getFullYear(),
            month:today.getMonth(),
            date:today.getDate()
        };
        var thisMonthInfo = this.getMontInfo(_year,_month);
        var preMontInfo = this.getMontInfo(_year,_month-1);
        var info;
        for(var i=0;i<thisMonthInfo.days;i++){
            info = {
                date:i+1,
                info:"this month"
            };
            if(_year===todayInfo.year&&_month===todayInfo.month&&i+1===todayInfo.date){
                info.info = "today";
            }
            allDayNum[i]=info;
        }
        for(i=0;i<thisMonthInfo.firstDay-1;i++){
            info = {
                date:preMontInfo.days-i,
                info:"pre month"
            };
            allDayNum.unshift(info)
        }
        for(i=0;i<7-thisMonthInfo.lastDay;i++){
            info = {
                date:i+1,
                info:"next month"
            };
            allDayNum.push(info);
        }
        return allDayNum;
    },
    btnListener:function () {
        var that = this;
        that.preMontBtn.addEventListener("click",function () {
            var dateInfo = {
                year:that.yearText.innerText*1,
                month:that.monthText.innerText*1
            };
            var newDateInfo = {
                year:dateInfo.month-1===0?dateInfo.year-1:dateInfo.year,
                month:dateInfo.month-1===0?12:dateInfo.month-1
            };
            that.yearText.innerText = newDateInfo.year;
            that.monthText.innerText = newDateInfo.month;
            that.drawTable(newDateInfo.year,newDateInfo.month-1);
        });
        that.nextMontBtn.addEventListener("click",function () {
            var dateInfo = {
                year:that.yearText.innerText*1,
                month:that.monthText.innerText*1
            };
            var newDateInfo = {
                year:dateInfo.month+1===13?dateInfo.year+1:dateInfo.year,
                month:dateInfo.month+1===13?1:dateInfo.month+1
            };
            that.yearText.innerText = newDateInfo.year;
            that.monthText.innerText = newDateInfo.month;
            that.drawTable(newDateInfo.year,newDateInfo.month-1);
        });
    },
    titleInit:function (y,m) {
        this.yearText.innerText = y;
        this.monthText.innerText = m;
    }
};

知識ポイント：

1は、今日の日付オブジェクトを取得します。var今日=新しい日付を（）;

2、Dateオブジェクトの最終日を取得するには、月の最初の日：
VAR =新しい新firstDate日（_year、_month、1）; //指定された（年）月、Dateオブジェクトの最初の日
VAR lastDate =新しいDate（_yearを、_month + 1,0）; //指定します（オブジェクトの最終日の日付のヶ月）で

3、Viewオブジェクト関連情報：
と仮定dが（のような：VARさd =新しいDate（）Dateオブジェクトである 、 または、D =新新VAR日（2017,12,17））
d.getFullYear（）; // GET D対応年
d.getMonth（）; //取得dの対応月
d.getDateは（）; // D対応の週を取得します

図4は、日付オブジェクト情報を表示：
d.toLocaleString（）//結果を出力である：2017年12月16日午前9時55分26秒AM

逆思考の概要:(）
結果：カレンダー描き
、123457週テーブルヘッドを描画を
描画日付番号を
数字の日付の配列を取得するために
、今月の週の最初の日を数日を知るために、週の最後の日を（日付の配列が得られるように）。

メソッドの分析：

1.どのようにして、週の最初の日に、何日、月、週の最後の日を知っていますか？

ここに方法は次のとおりです。

function getThisMontInfo(_year,_month) {
    var firstDate = new Date(_year,_month,1);//当前月第一天
    var lastDate = new Date(_year,_month+1,0);//当前月最后一天
    return {//返回一个对象
        firstDay:firstDate.getDay()===0?7:firstDate.getDay();//当前月第一天的星期（星期日为0，如果其为零，让其变为7）、
        lastDay:lastDate.getDay()===0?7:lastDate.getDay(),//当前月最后一天的星期
        days:lastDate.getDate()//当前月有多少天，即最后一天的日期。
    }
}

2、どのように日付の配列を取得するには？

ここに方法は次のとおりです。

//前提知道年和月，即y和m
//利用了上面的方法
thisMonthInfo = getThisMontInfo(y,m);//当前月相关信息
preMontInfo = getThisMontInfo(y,m-1);//上个月的相关信息
var allDayNum = [];
//向数组中添加当前月日期。
for(i=0;i<thisMonthInfo.days;i++){//thisMonthInfo.days为指定月的天数
    allDayNum[i]=i+1;
}
//补上上个月的最后几天
for(i=0;i<thisMonthInfo.firstDay-1;i++){//thisMonthInfo.firstDay这个月第一天的星期
    allDayNum.unshift(preMontInfo.days-i)//preMontInfo.days是上个月的天数
}
//补上下个月的前几天
for(i=0;i<7-thisMonthInfo.lastDay;i++){//thisMonthInfo.lastDay这个月最后一天的星期
    allDayNum.push(i);
}

JSカレンダーコントロール

テーブルを描画するには？

手順：
1.計算多くの行を描画する必要TR
2、プロットTR番号行対応
の各行TR 7 TD延伸3
の番号TDを追加、4
月および最後の日付番号を区別CSSを使用して、5日付デジタル月または翌月。
ここに方法は次のとおりです。

function drawTable(_year,_month) {
    table.innerHTML = "";
    var allDayNum = getDateNum(_year,_month);//通过上面的方法获得了日期数组
    var rows = allDayNum.length/7;//计算需要绘制多少行tr
    var index = 0;//日期数组的坐标
    for(var i=0;i<rows;i++){
        var tr = document.createElement("tr");
        for(var j=0;j<7;j++){//每行tr绘制7个td
            var td = document.createElement("td");
            td.innerText = allDayNum[index].date;//在tr中填入数字
//如果是这个月的日期，让其clss为this-month（颜色加深）
            if(allDayNum[index].info==="this month"){
                td.className="this-month"
            }else if(allDayNum[index].info==="today"){//如果日期为今天，让其颜色变红。
                td.className="today";
            }
            tr.appendChild(td);
            index++;
        }
        table.appendChild(tr);
    }
}

月にコントロールを作成する方法？

ここに方法は次のとおりです。

//得到页面上的对象控件。
var preMontBtn = document.getElementById("pre-month");
var nextMontBtn = document.getElementById("next-mont");
//为控件添加监听事件
preMontBtn.addEventListener("click",function () {
//获得页面上显示的年月
    var dateInfo = {
        year:document.getElementById("table-year").innerText*1,
        month:document.getElementById("table-month").innerText*1
    };
//计算上个月的年和月
    var newDateInfo = {
        year:dateInfo.month-1===0?dateInfo.year-1:dateInfo.year,
        month:dateInfo.month-1===0?12:dateInfo.month-1
    };
//修改页面上的年月信息
    document.getElementById("table-year").innerText = newDateInfo.year;
    document.getElementById("table-month").innerText = newDateInfo.month;
//重新绘制表格，利用的是上文的方法
    drawTable(newDateInfo.year,newDateInfo.month-1);
});
//对下个月按钮的监听
nextMontBtn.addEventListener("click",function () {
    var dateInfo = {
        year:document.getElementById("table-year").innerText*1,
        month:document.getElementById("table-month").innerText*1
    };
    var newDateInfo = {
        year:dateInfo.month+1===13?dateInfo.year+1:dateInfo.year,
        month:dateInfo.month+1===13?1:dateInfo.month+1
    };
    document.getElementById("table-year").innerText = newDateInfo.year;
    document.getElementById("table-month").innerText = newDateInfo.month;
    drawTable(newDateInfo.year,newDateInfo.month-1);
});

開口部に完全なコード。

おすすめ

転載: www.cnblogs.com/jlfw/p/12070134.html
おすすめ
NetBSD は AI によって生成されたコードの提出を禁止します
ランキング
C＃の変数インスタンス、クレジット・カードケース
通过uniCloud白捡一个在线图库管理工具
Linuxのいくつかの基本的なコマンドに関する洞察（20ベース）
vueエントリーの基礎知識、コア知識をマスターするならこの記事で十分
食品化学クエスチョンバンク
CentOSの7制御システムは、ファイルを占めます
単一の el-form 内の el-form-item テキストの左揃えを解決する方法
ノードJSベースノート
関数にSQL Serverの文字列：
sparksql_相関分析
アーカイブ
もっと
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)

コードワールド

© 2018 codetd.com