JavaScript日历效果代码实例
分类：实例代码
分享一段简单的面板式日历效果。
更多的时间日期可以查阅时间日期特效分类。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0px;
padding: 0px;
}
ul > li {
list-style: none;
display: inline-block;
font-size: 16px;
}
#timer {
margin: 10px auto;
width: 210px;
height: 240px;
font-size: 0px;
-webkit-text-size-adjust: none;
}
/*去除inline-block 元素间隔*/
#dateMonth {
width: inherit;
height: 30px;
}
#dateWeek {
width: inherit;
height: 28px;
border-top: 1px solid #2E2E2E;
border-bottom: 1px dotted #636363;
}
ul > li {
width: 30px;
height: 30px;
float: left;
line-height: 30px;
text-align: center;
}
.today {
background: #CCCCFF;
}
.showTime {
width: 150px;
}
.beforeMonth:hover, .nextMonth:hover {
cursor: pointer;
}
</style>
</head>
<body>
<!-- 采用float 结构 -->
<section id='timer'>
<ul id='dateMonth'>
<li class='beforeMonth'><</li>
<!-- 可添加年和月份 -->
<li class='showTime'></li>
<li class='nextMonth'>></li>
</ul>
<ul id='dateWeek'>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul id='date'></ul>
</section>
<script>
var date = document.getElementById('date');
var showTime = document.getElementsByClassName('showTime')[0];
var beforeMonth = document.getElementsByClassName('beforeMonth')[0];
var nextMonth = document.getElementsByClassName('nextMonth')[0];
var text = ''; //初始化
var toDay = new Date();
var toDayMill = +new Date();
var year = toDay.getFullYear();
var month = toDay.getMonth() + 1;
var day = toDay.getDate();
var week = toDay.getDay();
var timeArr = [];
beforeMonth.onclick = beforeMonthClick;
nextMonth.onclick = nextMonthClick;
console.log(year, month, day, week, toDayMill);
console.log(toDay);
//f_InitDate(day);
f_InitDate(sureDay(year, month), day);
// for(var i=0;i<42;i++){
// }
f_showTime();
function beforeMonthClick() {
if (month === 1) {
month = 12;
year = year - 1;
if (year < 1970) {
throw ('year is wrong , play try angin');
}
} else {
month = month - 1;
}
f_InitDate(sureDay(year, month), day);
f_showTime();
}
function nextMonthClick() {
if (month === 12) {
month = 1;
year = year + 1;
if (year < 1970) {
throw ('year is wrong , play try angin');
}
} else {
month = month + 1;
}
f_InitDate(sureDay(year, month), day);
f_showTime();
}
function initTime(text) {
showTime.innerText = text;
}
function initDate() {
/*初始化日期*/
date.innerHTML = text;
}
function f_showTime() {
var timeshow = '';
timeshow = year + '-' + month + '-' + day;
initTime(timeshow);
}
/*计算第一天所在的位置*/
function f_initFirstDay() {
var weekIndex = new Array(0, 1, 2, 3, 4, 5, 6);
//toDayMill = toDayMill - (day -1)*24*60*60*1000;
return new Date('' + year + '-' + month + '-' + 1).getDay();
// var left = day%7 ;
// var index = weekIndex.indexOf(week);
// var divisor = Math.floor(day/7);
// for(var j=0;j<index+1-left;j++){
// text = '<li></li>'+text;
// }
}
/*确定今天的位置*/
function f_InitDate(count, day) {
text = '';
var week = f_initFirstDay(day);
for (var j = 0; j < week; j++) {
text = '<li></li>' + text;
}
for (var i = 1; i <= count; i++) {
// if(i==divisor*7+left-1){
// text += '<li>'+day+'<li>';
// }else{
// text += '<li><li>';
// }
if (day === i) {
text += '<li class="today">' + i + '</li>';
} else {
text += '<li>' + i + '</li>';
}
}
initDate();
}
/*返回确定月数的天数*/
function sureDay(year, month) {
var monthArr = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var leap = isLeapYear(year);
if (month == 2 && leap) {
return 29;
} else {
return monthArr[month - 1];
}
}
/*判断是否是闰年*/
function isLeapYear(pYear) {
if ((pYear % 4 == 0 && pYear % 100 != 0) || (pYear % 100 == 0 && pYear % 400 == 0)) {
return true;
} else {
return false;
}
}
</script>
</body>
</html>
JavaScript日历效果代码实例，这样的场景在实际项目中还是用的比较多的，关于JavaScript日历效果代码实例就介绍到这了。
JavaScript日历效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。