利用js製作簡單的動態日曆
利用js製作簡單的動態日曆
程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.calendar{
position:absolute;
left: 50%;
top: 50%;
margin: -300px 0 0 -400px;
width: 800px;
height: 600px;
background: rgba(0,0,0,0.2);
}
.item{
display: inline-block;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background:#3498db;
color:#fff;
border:1px solid rgba(255,255,255,0.2);
transition: all .5s;
}
.item:hover{
background: #2980b9;
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="calendar">
<script>
var year = 2020;
var month = 12;
//從1900年1月1日到當前年份月份上一個月的總天數
var totalDays = 0;
//目標月份的總天數
var days = 0;
//宣告輸出日曆前需要保留的空格數
var space = 0;
//統計整年的總天數
for(var i = 1900;i<year;i++){
totalDays += (i % 4 == 0 && i % 100 != 0) || i % 400 == 0 ? 366 : 365;
}
//統計整月的總天數
for(var i = 1;i<month;i++){
switch(i){
case 4:
case 6:
case 9:
case 11:
totalDays += 30;
break;
case 2:
totalDays += (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28;
break;
default:
totalDays += 31;
}
}
//計算空格數
space = totalDays % 7;
//獲取目標月份的總天數
switch(month){
case 4:
case 6:
case 9:
case 11:
days = 30;
break;
case 2:
days = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0 ? 29 : 28;
break;
default:
days = 31;
}
//計數器
var count = 0;
for(var i = 0 ;i < space;i++){
count++;
document.write('<div class="item" style="visibility: hidden"></div>');
}
//display:none 隱藏元素的同時不佔用位置
//visibility:hidden 隱藏元素的同時佔用位置
for(var i = 1;i <= days;i++){
count++;
document.write(`<div class="item">${i}</div>`);
if(count == 7){
document.write('<br>');
count = 0;
}
}
</script>
</div>
</body>
</html>
相關文章
- 利用Python自動化生成逼格高的日曆!簡單又實用Python
- Excel動態日曆1Excel
- Node.js學習之路22——利用cheerio製作簡單的網頁爬蟲Node.js網頁爬蟲
- 製作動態圖表,沒有比這個方法更簡單的了
- 封裝一個簡單的日曆元件封裝元件
- 使用chart.js製作動態折線圖JS
- js手寫日曆JS
- three.js 製作屬於自己的動態二維碼JS
- Debian安裝包的簡單製作
- 怎麼製作gif動態圖 QQ動態表情包怎麼製作
- 利用 DynamicLinq 實現簡單的動態表示式構建查詢
- HTML簡單網頁製作HTML網頁
- 原生js日曆選擇器,學習js物件導向開發日曆外掛JS物件
- 如何製作有趣的GIF動態圖
- 攻略:如何製作動態的GIF圖
- 簡單介紹Vue中使用js製作進度條式資料對比動畫VueJS動畫
- 製作簡單的個人網頁教程網頁
- 用unity製作簡單的太空遊戲(2)-簡單炮臺Unity遊戲
- win10日曆磁貼不顯示動態瞭如何解決_win10日曆動態磁貼不動了怎麼辦Win10
- FullCalendar v5.3.2版本製作一個航班日曆Demo
- Golang簡單製作一個池Golang
- js和CSS3媒體查詢製作簡單的響應式導航選單JSCSSS3
- 模擬簡單的動態代理
- AE製作livephoto動態圖示
- GIF動態圖怎麼製作
- IOS開發 製作簡單的計算器iOS
- table表單製作個人簡歷
- C++ 練習 簡易日曆C++
- Principle如何製作動效設計?簡單易學的Principle動效設計教程
- html最簡單的Gif圖動畫製作方法gif轉base64HTML動畫
- vue之實現日曆----顯示農曆,滾動日曆監聽年月改變Vue
- 自己怎麼製作GIF表情包 QQ動態圖如何製作
- 如何製作動態圖,GIF怎麼在電腦上製作
- Tvori推出2.0版本,讓VR動畫製作更簡單VR動畫
- 動態二維碼免費製作
- three.js 利用uv和ThreeBSP製作一個快遞櫃JS
- java 動態代理簡單使用Java
- redis string 簡單動態字串Redis字串