原生Js實現日曆掛件
阿新 • • 發佈：2021-03-16
本文例項為大家分享了js實現日曆掛件的具體程式碼，供大家參考，具體內容如下
css code
/*************************
* 日曆樣式對應表
* #date 日曆塊
* table 表格
* th 頭部
* td 身體
* a.now 本月
* a.non-arrival 其他月
* a.day 今天
* a.href 連結
* #date_diglogs 記住對話方塊
*************************/
#date {
width: 220px;
padding-bottom: 5px;
box-shadow: 0 1px 3px #ccc;
border: 1px solid #EDEDED;
}
#date table {
width: inherit;
user-select: none;
font-size: 12px;
border-collapse: collapse;
border-spacing: 0px;
}
#date table tr th {
background-color: #f8f8f8;
color: #5e5f63;
}
#date table tr:nth-of-type(2) th {
font-weight: 300;
}
#date table tr td {
text-align: center;
font-family: "Comic Sans MS";
padding: 2px 0;
}
#daNGkFSP
Js code
/* 2021/2/26
* 功能: 日曆掛件
* 清源妙善
*/
function BlogDate(nowDate) {
/* 可變資料 */
this.year = nowDate.getFullYear(); // 獲取年份
this.month = nowDate.getMonth(); // 獲取月份
this.day = nowDate.getDate(); // 獲取今天是幾號
this.week = new Date(this.year,this.month,1).getDay(); // 獲取每月前面的空餘天數
this.days = new Date(this.year,this.month + 1,-1).getDate() + 1; // 獲取總共有幾天
this.last_month = new Date(this.year,-1).getDate() + 1; // 儲存上個月的天數
/* 不變資料 */
this.now_year = nowDate.getFullYear(); // 儲存今年的年份
this.now_month = nowDate.getMonth(); // 儲存今年的月份
}
BlogDate.prototype.createDate = function(name) {
// 獲取塊與建立表格
let date_div = document.getElementById('date');
let date_table = document.createElement('table');
date_div.appendChild(date_table);
// 建立所有的 tr 標籤
let date_all_tr = new Array();
for (let n = 0; n < 8; n++) {
date_all_tr[n] = document.createElement('tr');
date_table.appendChild(date_all_tr[n]);
}
// 建立頭部th標籤
let date_head_th = new Array();
for (let n = 0; n < 3; n++) {
date_head_th[n] = document.createElement('th');
date_all_tr[0].appendChild(date_head_th[n]);
}
// 設定特殊元素屬性
date_head_th[0].setAttribute('id','prev');
date_head_th[1].setAttribute('colspan','5');
date_head_th[1].setAttribute('title',`${name}`);
date_head_th[2].setAttribute('id','next');
// 建立星期 th 標籤
let date_week_th = new Array();
for (let n = 0; n < 7; n++) {
date_week_th[n] = document.createElement('th');
date_all_tr[1].appendChild(date_week_th[n]);
}
// 建立身體 td,a 標籤陣列
let date_body_td = new Array();
let date_body_td_a = new Array();
// 建立身體 td,a 標籤實體
for (let n = 2,i = 0; n < 8; n++,i++) {
date_body_td[i] = [];
date_body_td_a[i] = [];
for (let m = 0; m < 7; m++) {
date_body_td[i][m] = document.createElement('td');
date_body_td_a[i][m] = document.createElement('a');
date_body_td[i][m].appendChild(date_body_td_a[i][m]);
date_all_tr[n].append(date_body_td[i][m]);
}
}
}
BlogDate.prototype.setBlogDate = function(newDate) {
/* 更新資料 */
this.year = newDate.getFullYear(); // 獲取年份
this.month = newDate.getMonth(); // 獲取月份
this.day = newDate.getDate(); // 獲取今天是幾號
this.week = new Date(this.year,-1).getDate() + 1; // 獲取上個月的天數
}
BlogDate.prototype.updateTime = function(blogs_date) {
// 獲取日曆物件
let date_div = document.getElementById(
Html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>date html</title>
<link rel="stylesheet" href="date.css" media="screen">
</head>
<body>
<h3>Hello</h3>
<div id="date"></div>
<script src="date.js"></script>
<script>
initDate(blogs_date = {
blogs_name : '我的日曆',href_year : [2021,2021],href_month : [2,2],href_day : [27,3],href_url : ['http://www.4399.com/','http://www.baidu.com/'],href_prompt: ['今天要出門看親人','今天要早睡'],href_dialog: true
});
</script>
</body>
</html>
效果
參考連結：jquery實現日曆效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。