js實現(xiàn)周歷插件的方法

例簡介

1. 兼容IE8-11、360瀏覽器、chrome、firefox等主流瀏覽器，手機端也可使用；

2. 添加點擊前一周、后一周和高亮等功能。

實現(xiàn)原理

1、初始化周歷原理：

首先獲取表示當前星期幾的數(shù)字currDay=d.getDay()，一般是0（周日）-6（周六）；

然后把值取負數(shù)傳到方法creatWeeklyCalendar進行循環(huán)顯示一周時間；

Tips：方法calcTime是利用當前毫秒數(shù)+-循環(huán)數(shù)的毫秒數(shù)（someTime=d.getTime() + (24 * 60 * 60 * 1000) * num）算出這天的年月日。

for (var i=some, len=some + 7; i < len; i++) {
    if (this.calcTime(i).month==currMonth && this.calcTime(i).date==currDate) {
        html +='<li class="active"><a href="javascript：;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';
    } else {
        html +='<li><a href="javascript：;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';
    }
}

最后把html輸出到頁面。

2、前一周和后一周原理：

首先利用點擊前一周和后一周按鈕，對計算數(shù)clickedTimes進行+-；

然后把clickedTimes新值傳到方法changeWeek；

最后執(zhí)行this.creatWeeklyCalendar(-currDay - (7 * clickedTimes))，重新輸出新一周的數(shù)據(jù)。

3、最后把構造函數(shù)暴露window.WeeklyCalendar=WeeklyCalendar。

全部代碼

owerDesigner設計表

1.FILE-NEW-PhysicalDataModel,設置數(shù)據(jù)庫為MySql.

2 PK代表primary key ,fk代表外鍵，添加連線，指向被引用表。

3.joins指定外鍵列，雙擊連線，彈出如下圖。

4 Database-Generate Database可以生成sql，將sql在navicat執(zhí)行即可生成表結構。

5點保存按鈕可以生成pdm文件，暫時保存設計的表。

6 通過SQL腳本逆向生成PDM模型，這稱為逆向工程

File-reverse engineer-database

7 生成數(shù)據(jù)庫報表文件，即說明性的文檔,很方便的給其他人員查看。

report——report wizard

8 ElementUI學習

近在學習過程中需要通過日期來確定當天為星期幾，雖然很多編程語言有封裝好的方法，但每種語言在命名和使用上也不一定相同，那么是否能夠找到一種通用的方法呢，還真找到了。

背景知識介紹：

基姆拉爾森計算公式

W=(d+2*m+3*(m+1)/5+y+y/4-y/100+y/400) mod 7

在公式中d表示日期中的日數(shù)，m表示月份數(shù)，y表示年數(shù)。W為計算得出的星期幾（0~6 表示星期一到星期日）

注意：在公式中有個與其他公式不同的地方：把1月和2月看成是上一年的13月和14月，

例：如果是2017-01-01則換算成：2016-13-01來代入公式計算。

如果是2017-02-01則換算成：2016-14-01來代入公式計算。

開始布局界面

利用編程語言C#布局一個簡單界面，如下：

開始編寫代碼吧，先編程實現(xiàn)基姆拉爾森計算公式：

public static String GetWeekByDate(int year, int month, int day)
{
String dayoftheweek=String.Empty;
if (month==1 || month==2)
{
month +=12; //month=month + 12;
year--; //year=year - 1;
}
int w=(day + 2 * month + 3 * (month + 1) / 5 + year + year / 4 - year / 100 + year / 400) % 7;
switch (w)
{
case 0:
dayoftheweek="星期一";
break;
case 1:
dayoftheweek="星期二";
break;
case 2:
dayoftheweek="星期三";
break;
case 3:
dayoftheweek="星期四";
break;
case 4:
dayoftheweek="星期五";
break;
case 5:
dayoftheweek="星期六";
break;
case 6:
dayoftheweek="星期日";
break;
}
return dayoftheweek;
}

重點代碼已完成，接著給Button來個點擊事件吧

private void button1_Click(object sender, EventArgs e)
{
//獲取選擇的日期，以yyyy-MM-dd（例2017-01-01）顯示字符串
String date=dateTimePicker1.Value.ToString("yyyy-MM-dd");
//通過符號 - 將獲取的日期進行分割并組合成數(shù)組
String[] temp=dateTimePicker1.Value.ToString("yyyy-MM-dd").Split('-');
//獲取數(shù)組中年 -- temp[0] 月 -- temp[1] 日 -- temp[2]
//并且將值代入靜態(tài)方法GetWeekByDate中來得到星期幾
//Convert.ToInt32() 方法將string轉換為int
textBox1.Text=date + " 為 " + GetWeekByDate(Convert.ToInt32(temp[0]), Convert.ToInt32(temp[1]), Convert.ToInt32(temp[2]));
}

到這里，大功告成，直接來看運行的效果

用其他編程語言借助基姆拉爾森計算公式同樣可以寫出計算星期幾的程序，基本就實現(xiàn)通用啦，感興趣的小伙伴自己動手試試吧。你不去做，永遠不知道自己能力有強！加油

在線咨詢

上一篇：發(fā)福利啦！給大家分享幾個可以參加攝影比賽的網(wǎng)站（附鏈
下一篇：HTML特殊符號

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。