<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {padding: 0;margin: 0;}
.calendar {width: 420px;height: 400px;position: fixed;top: 100px;left: 200px;background: #fff;border: 1px solid rgba(0, 0, 0, 0.1);}
.times {width: 100%;height: 40px;line-height: 40px;font-size: 16px;text-align: center;color: #6ac13c;}
.body-list ul {width: 100%;font-family: arial;font-weight: bold;font-size: 14px;}
.body-list ul li {list-style-type: none;display: block;box-sizing: border-box;float: left;text-align: center;}
.lightgrey ul li {width: 60px;height: 36px;line-height: 36px;}
.darkgrey ul li {width: 56px;height: 32px;line-height: 32px;padding-left: 1px;padding-top: 1px;margin: 2px;border: 1px solid transparent;cursor: pointer;}
.lightgrey {color: #a8a8a8;}
.darkgrey {color: #565656;}
.green {color: #6ac13c;text-align: center;}
.darkgrey ul li:hover,.greenbox {border: 1px solid #6ac13c;background: #e9f8df;}
#prev,#next {width: 30px;height: 30px;line-height: 30px;text-align: center;position: absolute;top: 65px;color: #6ac13c;font-size: 30px;cursor: pointer;}
#prev {left: 10px;}
#next {right: 10px;}
.footer {position: absolute;bottom: 0;left: 0;width: 100%;height: 40px;}
.footer #button1 {float: right;width: 60px;height: 25px;line-height: 25px;text-align: center;border: 1px solid #6ac13c;cursor: pointer;font-size: 12px;margin-right: 40px;}
.footer #button1:hover {background: #6ac13c;color: #fff;}
</style>
</head>
<body>
<div class="calendar">
<div class="times"></div>
<div class="title">
<h1 class="green" id="caletitle">Month</h1>
<h2 class="green small" id="caleyear">Year</h2>
</div>
<p href="" id="prev">◖</p>
<p href="" id="next">◗</p>
<div>
<div class="lightgrey body-list">
<ul>
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
</div>
<div class="darkgrey body-list">
<ul id="days">
</ul>
</div>
</div>
<div class="footer">
<p id="button1">此刻</p>
</div>
</div>
<script>
var month_olympic = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
var month_normal = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
var month_name = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
var holder = document.getElementById("days")
var ctitle = document.getElementById("caletitle")
var cyear = document.getElementById("caleyear")
var prev = document.getElementById("prev")
var next = document.getElementById("next")
var my_date = new Date()
var my_year = my_date.getFullYear()
var my_month = my_date.getMonth()
var my_day = my_date.getDate()
//获取某年某月第一天是星期几
function dayStart(month, year) {
var tmpDate = new Date(year, month, 1)
return (tmpDate.getDay())
}
//计算某年是不是闰年，通过求年份除以4的余数即可
function daysMonth(month, year) {
var tmp = year % 4
if (tmp == 0) {
return (month_olympic[month])
} else {
return (month_normal[month])
}
}
//处理日期
function refreshDate() {
var str = ""
var totalDay = daysMonth(my_month, my_year)//获取该月总天数
var firstDay = dayStart(my_month, my_year)//获取该月第一天是星期几
var myclass
for (var i = 1; i < firstDay; i++) {
str += "<li></li>" //为起始日之前的日期创建空白节点
}
for (var i = 1; i <= totalDay; i++) {
if ((i < my_day && my_year == my_date.getFullYear() && my_month == my_date.getMonth()) || my_year < my_date.getFullYear() || (my_year == my_date.getFullYear() && my_month < my_date.getMonth())) {
myclass = " class='lightgrey'" //当该日期在今天之前时，以浅灰色字体显示
} else if (i == my_day && my_year == my_date.getFullYear() && my_month == my_date.getMonth()) {
myclass = " class='green greenbox'" //当天日期以绿色背景突出显示
} else {
myclass = " class='darkgrey'" //当该日期在今天之后时，以深灰字体显示
}
str += "<li" + myclass + ">" + i + "</li>" //创建日期节点
}
holder.innerHTML = str //设置日期显示
ctitle.innerHTML = month_name[my_month] //设置英文月份显示
cyear.innerHTML = my_year //设置年份显示
}
refreshDate() //执行该函数
//向前
prev.onclick = function (e) {
e.preventDefault()
my_month--
if (my_month < 0) {
my_year--
my_month = 11
}
refreshDate()
}
//向后
next.onclick = function (e) {
e.preventDefault()
my_month++
if (my_month > 11) {
my_year++
my_month = 0
}
refreshDate()
}
//滚动动画
windowAddMouseWheel()
function windowAddMouseWheel() {
var scrollFunc = function (e) {
e = e || window.event
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
e.preventDefault()
my_month--
if (my_month < 0) {
my_year--
my_month = 11
}
refreshDate()
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
e.preventDefault()
my_month++
if (my_month > 11) {
my_year++
my_month = 0
}
refreshDate()
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail > 0) { //当滑轮向上滚动时
e.preventDefault()
my_month--
if (my_month < 0) {
my_year--
my_month = 11
}
refreshDate()
}
if (e.detail < 0) { //当滑轮向下滚动时
e.preventDefault()
my_month++
if (my_month > 11) {
my_year++
my_month = 0
}
refreshDate()
}
}
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollFunc, false)
}
//滚动滑轮触发scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc
}
//调用时间，实时刷新
setInterval(function () {
newTime()
}, 1000)
//获取到时间的方法
function newTime() {
var mydate = new Date()//获取到系统时间
var weekday = [" 星期日", " 星期一", " 星期二", "星期三", "星期四", "星期五", "星期六"]
var week = mydate.getDay()//星期
var Myyear = mydate.getFullYear()//年
var Mymonth = mydate.getMonth() + 1//月
var Mydate = mydate.getDate()//日
var Myhours = mydate.getHours()//小时
var Myminute = mydate.getMinutes()//分
var Mysecond = mydate.getSeconds()//秒
//定义符号
var fuhao1 = "-"
var fuhao2 = ":"
//为小于0的时间前加上0
if (Mymonth >= 0 && Mymonth <= 9) {
Mymonth = "0" + Mymonth
}
if (Mydate >= 0 && Mydate <= 9) {
Mydate = "0" + Mydate
}
if (Myhours >= 0 && Myhours <= 9) {
Myhours = "0" + Myhours
}
if (Myminute >= 0 && Myminute <= 9) {
Myminute = "0" + Myminute
}
if (Mysecond >= 0 && Mysecond <= 9) {
Mysecond = "0" + Mysecond
}
//时间的格式
var time = Myyear + fuhao1 + Mymonth + fuhao1 + Mydate + "\t" +
Myhours + fuhao2 + Myminute + fuhao2 + Mysecond + "\t" + weekday[week]
//输出时间
document.getElementsByClassName('times')[0].innerHTML = time
}
//点击此刻
var button1 = document.getElementById("button1")
button1.onclick = function () {
my_year = my_date.getFullYear()
my_month = my_date.getMonth()
my_day = my_date.getDate()
refreshDate()
}
</script>
</body>
</html>
