您的位置：首页 > Web前端 > JavaScript

原生js万年历Calendar制作（date对象的运用）

2017-02-10 00:00 567 查看
毕竟还是前端菜鸟！代码写了就忘\ue411,写博客温故而知新还是比较重要的，今天回顾下之前写的万年历！

首先页面布局:

<body>
<div id="calendar">
<div id="header">
<select name="" id="select_1">
</select>
<select name="" id="select_2">
</select>
</div>
<ul>
<li>星期日</li>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
</ul>
<ul></ul>
</div>
</body>

运用li标签的浮动来形成。

接下来就是重点啦！JavaScript的编写；

首先引入获取当月的天数的方法：

var FebDays = new Date(2017,2,0).getDate();

确定当月在日历中排多少行：

function getRow(_year,_mouth) {
var date =new Date(_year,_mouth-1,1);
var week =date.getDay();
var days = new Date(_year,_mouth,0).getDate();
var row =Math.ceil((days+week)/7);
return row;
}
getRow(2017,2) //可以获取到二月份行数

确定当月1号是星期几根据规律算出行数：

var date =new Date(_year,_mouth-1,1);
var week =date.getDay();
//行数(天数与星期之间的关系)
var row = Math.ceil((days+week)/7);

用dom操作获取到所要操作的节点：

var tb = document.getElementById('calendar');      //在外部的大盒子
var header = document.getElementById('header');    // select 选择年月的盒子
var ul = tb.getElementsByTagName('ul')[1];         // 放日期li的盒子
var lis =ul.getElementsByTagName('li');            // 日期盒子
var select_1 = document.getElementById('select_1');// 选择年份
var select_2 = document.getElementById('select_2');// 选择月份
var now =new Date();                               // 当前时间
var nowYear =now.getFullYear();                    // 当前年份
var nowMouth =now.getMonth()+1;                    // 当前月份

编写创建日历的函数：

function createCalender(_year,_mouth) {
var date =new Date(_year,_mouth-1,1);
var now = new Date();
var nowdate = now.getDate();
var row =getRow(_year,_mouth);
var week =date.getDay();
var days = new Date(_year,_mouth,0).getDate();
for(var i=0;i<row;i++){
for(var j = 0;j < 7;j++){
var li = document.createElement('li');
//第一行会有空白替代，因为1号有可能不是星期天
if( j< week && i === 0){
li.innerHTML =' ';
}else{
if((i*7+j+1)-week<=days){
li.innerHTML =(i*7+j+1)-week;
}
}
//选中当天改变样式
if((i*7+j+1)-week == nowdate && now.getMonth()+1 == _mouth&&now.getFullYear() ==_year){

li.style.backgroundColor = 'orange';
li.style.color = '#fff';
}
//将创建的天数li盒子插入到ul父盒子
ul.appendChild(li);
}
}
}

年份和月份的下拉列表生成函数：

function createSelect() {
var now =new Date();
for(var i=1995;i<=2100;i++){
var options_year = document.createElement('option');
options_year.innerHTML = i;
select_1.appendChild(options_year);
}
for(var j =1;j<=12;j++){
var options_mouth = document.createElement('option');
options_mouth.innerHTML = j+'月';
select_2.appendChild(options_mouth);
}
select_1.value =now.getFullYear();
select_2.value =now.getMonth()+1+'月';
}

当下拉列表年月改变时的函数:

function changeValue() {
createCalender(nowYear,nowMouth);
var value;
select_1.onchange = function () {
removeUlchild();
value = select_2.selectedIndex+1;
createCalender(this.value,value);
}
select_2.onchange = function () {
removeUlchild();
value = select_2.selectedIndex+1;
createCalender(select_1.value,value);

}
}
function removeUlchild() {
while(ul.hasChildNodes()){
ul.removeChild(ul.lastChild);
}
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
#canlendar{
width: 700px;
border:1px solid #000;
font-family: '楷体';
margin:50px auto;
overflow: hidden;
}
#canlendar ul{
width: 100%;
}
#canlendar li{
width: 100px;
height: 80px;
line-height:80px;
text-align: center;
border-radius: 50%;
float: left;
}
#canlendar>#header{
width: 100%;
height: 25px;
padding-top:25px;
}
#canlendar>#header>select{
outline: none;
width: 100px;
border:0;
padding-left: 25px;
}

</style>
</head>
<body>
<div id="canlendar">
<div id="header">
<select name="" id="select_1">
</select>
<select name="" id="select_2">
</select>
</div>
<ul>
<li>星期日</li>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
<li>星期四</li>
<li>星期五</li>
<li>星期六</li>
</ul>
<ul></ul>
</div>
</body>
</html>
<script>

var tb = document.getElementById('canlendar');
var header = document.getElementById('header');
var ul = tb.getElementsByTagName('ul')[1];
var lis =ul.getElementsByTagName('li');
var select_1 = document.getElementById('select_1');
var select_2 = document.getElementById('select_2');
var now =new Date();
var nowYear =now.getFullYear();
var nowMouth =now.getMonth()+1;
changeValue();
createSelect();
function createCalender(_year,_mouth) {
var date =new Date(_year,_mouth-1,1);
var now = new Date();
var nowdate = now.getDate();
var row =getRow(_year,_mouth);
var week =date.getDay();
var days = new Date(_year,_mouth,0).getDate();
for(var i=0;i<row;i++){
for(var j = 0;j < 7;j++){
var li = document.createElement('li');

if( j< week && i === 0){
li.innerHTML =' ';
}else{
if((i*7+j+1)-week<=days){
li.innerHTML =(i*7+j+1)-week;
}
}
if((i*7+j+1)-week == nowdate && now.getMonth()+1 == _mouth&&now.getFullYear() ==_year){

li.style.backgroundColor = 'orange';
li.style.color = '#fff';
}
ul.appendChild(li);
}
}
}
function getRow(_year,_mouth) {
var date =new Date(_year,_mouth-1,1);
var week =date.getDay();
var days = new Date(_year,_mouth,0).getDate();
var row =Math.ceil((days+week)/7);
return row;
}
function createSelect() {
var now =new Date();
for(var i=1995;i<=2100;i++){
var options_year = document.createElement('option');
options_year.innerHTML = i;
select_1.appendChild(options_year);
}
for(var j =1;j<=12;j++){
var options_mouth = document.createElement('option');
options_mouth.innerHTML = j+'月';
select_2.appendChild(options_mouth);
}
select_1.value =now.getFullYear();
select_2.value =now.getMonth()+1+'月';
}
function changeValue() {
createCalender(nowYear,nowMouth);
var value;
select_1.onchange = function () {
removeUlchild();
value = select_2.selectedIndex+1;
createCalender(this.value,value);
}
select_2.onchange = function () {
removeUlchild();
value = select_2.selectedIndex+1;
createCalender(select_1.value,value);

}
}
function removeUlchild() {
while(ul.hasChildNodes()){
ul.removeChild(ul.lastChild);
}
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航