div css js日歷是一種很常見的網頁日歷,它使用DIV來構建日歷的布局,使用CSS來設置日歷的樣式,使用JavaScript來實現日歷的功能。
首先,我們需要在HTML中創建一個包含日歷的div元素,并給它一個唯一的ID:
<div id="calendar"> </div>
接下來,我們使用CSS來設置日歷的樣式:
#calendar { width: 300px; border: 1px solid #ccc; font-family: Arial, sans-serif; } #calendar .header { background-color: #eee; font-weight: bold; } #calendar .day { width: 42px; height: 42px; float: left; text-align: center; line-height: 42px; } #calendar .today { background-color: #ff0; } #calendar .event { background-color: #f00; color: #fff; }
使用JavaScript來實現日歷功能,我們可以動態地創建日歷中的日期,然后根據當前日期來設置樣式,包括當前日期、事件等。
var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var daysOfMonth = new Date(year, month, 0).getDate(); var calendar = document.getElementById("calendar"); var header = document.createElement("div"); header.className = "header"; header.innerHTML = year + "年" + month + "月"; calendar.appendChild(header); var weekdays = ["日", "一", "二", "三", "四", "五", "六"]; for (var i = 0; i< weekdays.length; i++) { var weekday = document.createElement("div"); weekday.className = "weekday"; weekday.innerHTML = weekdays[i]; calendar.appendChild(weekday); } for (var i = 1; i<= daysOfMonth; i++) { var dayElement = document.createElement("div"); dayElement.className = "day"; dayElement.innerHTML = i; if (i === day) { dayElement.className += " today"; } if (i % 3 === 0) { dayElement.className += " event"; } calendar.appendChild(dayElement); }
最后,我們就可以得到一個簡單的DIV CSS JS日歷。
下一篇cs起源css秒刪