JavaScript|3步实现列表日历(含测试源码)
程序员文章站
2022-07-14 12:49:56
...
本博文源于js基础，采用原生态javascript实现简易版日记。
测试效果
解决思路
- 列表自动初始化数组
- 根据鼠标点击列表设置监听事件
- 监听事件中做日历的显示
分步骤代码
h5代码
<select id="yearSelect"></select>
<select id="monthSelect"></select>
<div id="box"></div>
c3代码
<style>
table,table tr td,table tr th{
border:1px solid #0094ff; }
table {
width: 200px;
min-height: 25px;
line-height: 25px;
text-align: center;
border-collapse: collapse;
}
</style>
js代码
<script type="text/javascript">
var yearSelect = document.getElementById("yearSelect");
var monthSelect = document.getElementById("monthSelect");
//创建列表项
for(var i = 1949 ; i <= 2018 ; i++){
var oOption = document.createElement("option");
oOption.innerText = i;
oOption.value = i;
yearSelect.appendChild(oOption);
}
for(var i = 1 ; i <= 12 ; i++){
var oOption = document.createElement("option");
oOption.innerText = i;
oOption.value = i;
monthSelect.appendChild(oOption);
}
//列表项的事件监听
var year = 2018;
var month = 5;
yearSelect.onchange = function(){
year = this.value;
createTable(year,month);
}
monthSelect.onchange = function(){
month = this.value;
createTable(year,month);
}
function createTable(year, month){
// 删除之前的月历
document.getElementById("box").innerHTML = "";
// 月历三要素
// 本月1号星期几
var theMonthFirstDay = new Date(year,month - 1,1).getDay();
// 上个月有几天（上月最后一天是几号）
var prevMonthLastDate = new Date(year,month - 1,0).getDate();
// 本月有几天（本月最后一天是几号）
var theMonthLastDate = new Date(year,month,0).getDate();
// 日期数组
var arr = [];
// 本月1号星期是多少，就会有多少个上月小格写在前面
var count = 0;
while(count != theMonthFirstDay){
arr.unshift(prevMonthLastDate - count);
count++;
}
// 本月
count = 1;
while(count != theMonthLastDate){
arr.push(count);
count++;
}
// 放置下月的开头的日期，凑齐42天
count = 1;
while(arr.length != 42){
arr.push(count);
count++;
}
//创建一个表格
var myTable = document.createElement("table");
//创建表头
myTable.innerHTML = "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
//使用两层for循环嵌套动态创建表格的tr和td节点
for(var i = 0 ; i < 6 ; i++){
//创建tr
var tr = document.createElement("tr");
for(var j = 0 ; j < 7 ; j++){
//创建td
var td = document.createElement("td");
//设置td内部的文本
td.innerText = arr[i * 7 + j];
//追加td
tr.appendChild(td);
}
//追加tr
myTable.appendChild(tr);
}
//追加表格
document.getElementById("box").appendChild(myTable);
}
</script>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table,tr,td,th{
border:1px solid #333;
border-collapse: collapse;
}
td{
padding:4px;
}
#box{
margin-top: 20px;
}
</style>
</head>
<body>
<select id="yearSelect"></select>
<select id="monthSelect"></select>
<div id="box"></div>
<script type="text/javascript">
var yearSelect = document.getElementById("yearSelect");
var monthSelect = document.getElementById("monthSelect");
//创建列表项
for(var i = 1949 ; i <= 2018 ; i++){
var oOption = document.createElement("option");
oOption.innerText = i;
oOption.value = i;
yearSelect.appendChild(oOption);
}
for(var i = 1 ; i <= 12 ; i++){
var oOption = document.createElement("option");
oOption.innerText = i;
oOption.value = i;
monthSelect.appendChild(oOption);
}
//列表项的事件监听
var year = 2018;
var month = 5;
yearSelect.onchange = function(){
year = this.value;
createTable(year,month);
}
monthSelect.onchange = function(){
month = this.value;
createTable(year,month);
}
function createTable(year, month){
// 删除之前的月历
document.getElementById("box").innerHTML = "";
// 月历三要素
// 本月1号星期几
var theMonthFirstDay = new Date(year,month - 1,1).getDay();
// 上个月有几天（上月最后一天是几号）
var prevMonthLastDate = new Date(year,month - 1,0).getDate();
// 本月有几天（本月最后一天是几号）
var theMonthLastDate = new Date(year,month,0).getDate();
// 日期数组
var arr = [];
// 本月1号星期是多少，就会有多少个上月小格写在前面
var count = 0;
while(count != theMonthFirstDay){
arr.unshift(prevMonthLastDate - count);
count++;
}
// 本月
count = 1;
while(count != theMonthLastDate){
arr.push(count);
count++;
}
// 放置下月的开头的日期，凑齐42天
count = 1;
while(arr.length != 42){
arr.push(count);
count++;
}
//创建一个表格
var myTable = document.createElement("table");
//创建表头
myTable.innerHTML = "<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>";
//使用两层for循环嵌套动态创建表格的tr和td节点
for(var i = 0 ; i < 6 ; i++){
//创建tr
var tr = document.createElement("tr");
for(var j = 0 ; j < 7 ; j++){
//创建td
var td = document.createElement("td");
//设置td内部的文本
td.innerText = arr[i * 7 + j];
//追加td
tr.appendChild(td);
}
//追加tr
myTable.appendChild(tr);
}
//追加表格
document.getElementById("box").appendChild(myTable);
}
</script>
</body>
</html>