基于javascript的日历
摘要： atom 前端开发必装插件 前端开发的所有插件 eclipse前端开发 插件及说明 基于javascript的日历，支持本机电脑时间和服务器时间，第二个参数可选，[年,月,日,时,分,秒] //发现了bug，解决一下 日历 &……
| atom 前端开发必装插件 |
| 前端开发的所有插件 |
| eclipse前端开发 插件及说明 |
基于javascript的日历，支持本机电脑时间和服务器时间，第二个参数可选，[年,月,日,时,分,秒]
//发现了bug，解决一下
日历
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<style>
.calender {
width: 436px;
height: 270px;
}
.calender-statusBar {
position: relative;
width: 100%;
height: 38px;
font: 15px ‘microsoft yahei’;
background-color: rgb(69, 127, 191);
color: rgb(255, 255, 255);
}
.calender-time,
.calender-dateChoice-lastMonth,
.calender-date,
.calender-dateChoice-nextMonth {
position: absolute;
}
.calender-time {
top: 8px;
left: 10px;
font-weight: normal;
}
.calender-dateChoice-lastMonth,
.calender-dateChoice-nextMonth {
top: 14px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.calender-dateChoice-lastMonth {
right: 200px;
border-right: 10px solid rgb(255, 255, 255);
}
.calender-dateChoice-nextMonth {
right: 85px;
border-left: 10px solid rgb(255, 255, 255);
}
.calender-date {
width: 106px;
right: 94px;
top: 8px;
text-align: center;
}
.calender-dateBox {
position: relative;
border-bottom: rgb(195, 195, 195) dashed 1px;
margin: 0 auto;
width: 394px;
height: 268px;
}
.calender-week,
.calender-weekBox {
margin: 0;
padding: 0;
*zoom: 1;
}
.calender-week:after,
.calender-weekBox:after {
content: ‘\200B’;
display: block;
height: 0;
clear: both;
}
.calender-week li,
.calender-weekBox li {
list-style: none;
float: left;
margin-left: 15px;
margin-right: 15px;
font-weight: bold;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
}
.calender-week {
border-bottom: rgb(196, 196, 196) solid 2px;
}
.calender-week li {
margin-top: 4px;
font: 15px simsun;
font-weight: bold;
color: rgb(75, 88, 130);
}
.calender-weekBox {
position: absolute;
top: 32px;
left: 0;
width: 100%;
font: 14px arial;
}
.calender-weekBox li {
margin-top: 7px;
margin-bottom: 7px;
color: rgb(95, 93, 98);
}
.calender-weekBox li.calender-today {
border-radius: 20px;
background-color: rgb(119, 183, 109);
color: rgb(255, 255, 255);
}
.calender-weekBox li.calender-lastOrNext {
color: rgb(205, 205, 205);
}
</style>
</head>
<body>
<div class=”calender” id=”calender”>
<div class=”calender-statusBar”>
<b class=”calender-time”><span></span><span></span></b>
<span class=”calender-date”></span>
<span class=”calender-dateChoice-lastMonth”></span>
<span class=”calender-dateChoice-nextMonth”></span>
</div>
<div class=”calender-dateBox”>
<ul class=”calender-week”>
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ol class=”calender-weekBox”></ol>
</div>
</div>
<script>
function Class_Calender(id, dayArray) {
//dayArray：可选，数组，[年、月、日、时、分、秒](月:1~12)
var _self = this
this.calenderId = document.getElementById(id)
this.GetNodes = function() {
//获取各个节点
var span = _self.calenderId.getElementsByTagName(‘span’)
_self.cTime = span[0] //时间
_self.cDay = span[1] //日期
_self.cDate = span[2] //年月
_self.choiceLastMonth = span[3] //上一月
_self.choiceNextMonth = span[4] //下一月
_self.weekBox = _self.calenderId.getElementsByTagName(
‘ol’,
)[0] //日历box
}
this.GetTimes = function() {
//获取当前日期,年、月、日、时、分、秒、周
if (dayArray) {
//传进来时间数组
_self.dayArray = dayArray
_self.dayArray[1] = _self.dayArray[1] – 1
var d = _self.GetDay(
_self.dayArray[0],
_self.dayArray[1],
_self.dayArray[2],
)
_self.dayArray.push(d)
} else {
//使用电脑的本地时间
var myDate = new Date()
_self.dayArray = [
myDate.getFullYear(),
myDate.getMonth(),
myDate.getDate(),
myDate.getHours(),
myDate.getMinutes(),
myDate.getSeconds(),
myDate.getDay(),
]
}
_self.nowDisplay = [_self.dayArray[0], _self.dayArray[1]] //当前显示的年月
}
this.AddZero = function(x) {
//对于小于10的十位用0补齐
var num
if (x >= 0 && x <= 9) {
num = ‘0’ + x
} else {
num = x
}
return num
}
this.GetDay = function(a, b, c) {
//获取是周几
var myDate = new Date(a, b, c)
return myDate.getDay()
}
this.TransformationDay = function(x) {
//转换成日期
var d
switch (x) {
case 0:
d = ‘[星期日]’
break
case 1:
d = ‘[星期一]’
break
case 2:
d = ‘[星期二]’
break
case 3:
d = ‘[星期三]’
break
case 4:
d = ‘[星期四]’
break
case 5:
d = ‘[星期五]’
break
case 6:
d = ‘[星期六]’
break
}
;<br />
return d
}
this.LeapYearOrNo = function(y) {
//计算平年还是闰年的2月份的天数
var r
;(y % 4 == 0 && y % 100 != 0) || y % 400 == 0
? (r = 29)
: (r = 28)
return r
}
this.ThisMonthDays = function(y, m) {
//计算该月有多少天
var t
switch (m) {
case 0:
case 2:
case 4:
case 6:
case 7:
case 9:
case 11:
t = 31
break
case 1:
t = _self.LeapYearOrNo(y)
break
default:
t = 30
break
}
;<br />
return t
}
this.CalculationDay = function(x) {
//改变星期
var d = _self.TransformationDay(x)
_self.cDay.innerHTML = d
}
this.CalculationTime = function() {
//时间
function InnerTime() {
_self.cTime.innerHTML =
_self.AddZero(_self.dayArray[3]) +
‘:’ +
_self.AddZero(_self.dayArray[4]) +
‘:’ +
_self.AddZero(_self.dayArray[5])
}
function CTime() {
if (_self.dayArray[5] == 59) {
//秒
_self.dayArray[5] = 0
if (_self.dayArray[4] == 59) {
//分
_self.dayArray[4] = 0
if (_self.dayArray[3] == 23) {
//时
_self.dayArray[3] = 0
_self.ChangeToday()
} else {
_self.dayArray[3]++
}
} else {
_self.dayArray[4]++
}
} else {
_self.dayArray[5]++
}
InnerTime()
}
InnerTime()
var timeSet = setInterval(CTime, 1000)
}
this.ChangeToday = function() {
//改变日期
function NewDay() {
if (
_self.ThisMonthDays(
_self.dayArray[0],
_self.dayArray[1],
) == _self.dayArray[2]
) {
//月末
_self.dayArray[2] = 1
if (_self.dayArray[1] == 11) {
//年末
_self.dayArray[1] = 0
_self.dayArray[0]++
} else {
_self.dayArray[1]++
}
} else {
_self.dayArray[2]++
}
}
if (
_self.nowDisplay[0] == _self.dayArray[0] &&
_self.nowDisplay[1] == _self.dayArray[1]
) {
//判断当前显示的日历是否是当前年月
NewDay() //是的话改变
_self.nowDisplay[0] = _self.dayArray[0]
_self.nowDisplay[1] = _self.dayArray[1]
_self.ChangeCalender(
_self.dayArray[0],
_self.dayArray[1],
_self.dayArray[2],
)
} else {
//不是的话不改变
NewDay()
}
_self.dayArray[6] = _self.GetDay(
_self.dayArray[0],
_self.dayArray[1],
_self.dayArray[2],
) //改变星期几
_self.CalculationDay(_self.dayArray[6])
}
this.clickLastMonth = function(event) {
if (_self.nowDisplay[1] == 0) {
_self.nowDisplay[1] = 11
_self.nowDisplay[0]–
} else {
_self.nowDisplay[1]–
}
_self.ChangeCalender(
_self.nowDisplay[0],
_self.nowDisplay[1],
)
}
this.clickNextMonth = function(event) {
if (_self.nowDisplay[1] == 11) {
_self.nowDisplay[1] = 0
_self.nowDisplay[0]++
} else {
_self.nowDisplay[1]++
}
_self.ChangeCalender(
_self.nowDisplay[0],
_self.nowDisplay[1],
)
}
this.ChangeCalender = function(year, month, day) {
var txt = ”
var last = [] //0：年，1：月
if (month == 0) {
last.push(year – 1)
last.push(11)
} else {
last.push(year)
last.push(month – 1)
}
var lastMonthDays = _self.ThisMonthDays(last[0], last[1]), //上一个月一共多少天
thisMonthDays = _self.ThisMonthDays(year, month) //这个月一共多少天
var m = _self.GetDay(year, month, 1)
m == 0 ? (m = 7) : m
var s = m – 1,
u = lastMonthDays – s,
p = thisMonthDays + s,
i = 1,
e = 1
for (var length = 0; length < 42; length++) {
if (length < m) {
txt +=
‘<li class=”calender-lastOrNext”>’ + u + ‘</li>’
u++
} else if (length >= m && length <= p) {
txt += ‘<li>’ + i + ‘</li>’
i++
} else if (length > p) {
txt +=
‘<li class=”calender-lastOrNext”>’ + e + ‘</li>’
e++
}
}
_self.weekBox.innerHTML = txt
_self.cDate.innerHTML =
_self.nowDisplay[0] +
‘ ’ +
_self.AddZero(_self.nowDisplay[1] + 1) +
‘月’
;(function() {
if (
_self.nowDisplay[0] == _self.dayArray[0] &&
_self.nowDisplay[1] == _self.dayArray[1]
) {
//当前显示的年月和真实的年月对上的时候
var tday = day ? day : _self.dayArray[2]
var li = _self.weekBox.getElementsByTagName(‘li’)
li[m + tday – 1].className = ‘calender-today’
}
})()
}
this.init = (function() {
_self.GetNodes()
_self.GetTimes()
_self.CalculationTime()
_self.CalculationDay(_self.dayArray[6])
_self.ChangeCalender(
_self.dayArray[0],
_self.dayArray[1],
_self.dayArray[2],
)
if (window.addEventListener) {
_self.choiceLastMonth.addEventListener(
‘click’,
_self.clickLastMonth,
false,
)
_self.choiceNextMonth.addEventListener(
‘click’,
_self.clickNextMonth,
false,
)
} else {
_self.choiceLastMonth.attachEvent(
‘onclick’,
_self.clickLastMonth,
)
_self.choiceNextMonth.attachEvent(
‘onclick’,
_self.clickNextMonth,
)
}
})()
}
</script>
<script>
var calender = new Class_Calender(‘calender’)
</script>
</body>
</html>
| 前端 chrome 开发插件 |
| 前端开发调用本地摄像头的插件 |
| 谷歌 开发插件 前端 |
» 本文来自：前端开发者 » 《基于javascript的日历》
» 本文链接地址：https://www.rokub.com/6436.html
» 您也可以订阅本站：https://www.rokub.com
近期评论