Date对象实践万年历
1.引入
我们上一节课我们讲解了有关日期的Date()对象,现在我们写一个该对象的使用:日历。
2.代码实现(部分)以及效果
(1).页面内容显示
<div class="contianner">
<div class="select-year-month">
<p>
<select name="select-year" id="year">年</select>
<select name="select-month" id="month">月</select>
</p>
</div>
<div class="days">
<ul>
<li>星期日</li>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
</ul>
<ul id="detail"></ul>
</div>
</div>
(2).设置相关的JavaScript内容
<script type="text/javascript">
//获取页面元素,获取年份和月份信息字段
var yearSelect = document.getElementById("year");
var monthSelect = document.getElementById("month");
var getDetailInfo = document.getElementById("detail");
//初始化数据信息
function init(){
//初始化年份选项卡
for(var year = 1990;year < 3000;year++){
createOption(year,year,yearSelect)
}
//初始化月份选项卡
for(var month = 1;month < 13;month++){
createOption(month,month - 1,monthSelect)
}
//获取当前的日期
var now = new Date();
//设置获取内容
showSelect(now.getFullYear(),now.getMonth());
//调用显示日期
showDate();
//年份改变的时候调用改变的函数
yearSelect.onchange = function(){
showDate();
}
//月份改变的时候调用改变的函数
monthSelect.onchange = function(){
showDate();
}
}
//创建内容函数
function createOption(text,value,parent){
var option = document.createElement("option");
option.innerHTML = text;
option.value = value;
parent.appendChild(option);
}
//创建选择年份函数
function showSelect(year,month){
yearSelect.value = year;
monthSelect.value = month;
}
//创建选择年份函数
function showDate(){
getDetailInfo.innerHTML = "";
var year = yearSelect.value;
var month = monthSelect.value;
//设置创建空的li标签
for(var i = 0;i < getDays(year,month);i++){
createLiInfo("",getDetailInfo,"");
}
//设置创建有日期的li标签
for(var i = 1;i <= getDayOfMonth(year,month);i++){
createLiInfo(i,getDetailInfo,month);
}
}
/**获取详细的内容信息**/
//获取日
function getDays(year,month){
var day = new Date(year,month,1);
return day.getDay();
}
//获取一个月中的日期
function getDayOfMonth(year,month){
var day = new Date(year,month + 1,0);
return day.getDate();
}
//创建li标签
function createLiInfo(text,parent,month){
var li = document.createElement("li");
li.innerHTML = text;
//如果当前的日期和当前的日期一致,则设置为选中状态
var getCurrentYear = new Date().getFullYear();
var getCurrentMonth = new Date().getMonth() ;
var getDay = getDayOfMonth(getCurrentYear,getCurrentMonth);
if((getDay == text) && (getCurrentMonth == month)){
li.style.backgroundColor = '#ff0000';
}
parent.appendChild(li);
}
//调用初始化函数
init();
</script>
(3).设置相关内容显示样式
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.contianner{
width: 700px;
background-color: #dd910e;
margin: 20px auto;
}
.select-year-month{
width: 700px;
height: 50px;
line-height: 50px;
text-align: center;
}
ul li{
float: left;
width: 98px;
height: 50px;
line-height: 50px;
text-align: center;
list-style: none;
border: 1px solid green;
}
/*设置鼠标悬停选中的时候的样式*/
li:hover{
background-color: #008000;
border: 1px solid red;
transition: all 0.1s linear 0.1s;
}
/*设置下拉菜单样式设置*/
select {
height: 30PX;
width: 76px;
border: 1px solid #8bd1b7;
padding-right: 14px;
}
</style>
3.效果显示