您的位置：首页 > 其它

自己动手丰衣足食之日历

2016-03-27 17:50 337 查看 


<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body {
font-family: 'Helvetica';
}

* {
margin: 0;
padding: 0;
}

ul li {
list-style: none;
}

a {
text-decoration: none;
}

img {
border: none;
}

.m-date {
width: 350px;
height: 300px;
background: #3EA7C2;
margin: 80px auto;
color: #fff;
}

#header {
height: 45px;
width: 100%;
position: relative;
border-bottom: 1px solid #fff;
}

#header .year-mon {
text-align: center;
line-height: 45px;
font-size: 15px;
}

#header .btn {
position: absolute;
top: 0px;
width: 45px;
height: 45px;
line-height: 45px;
font-size: 24px;
cursor: pointer;
text-align: center;
}

#header .prevBtn {
left: 0px;
}

#header .nextBtn {
right: 0px;
}

.week {
width: 350px;
height: 35px;
}

.week li {
float: left;
width: 50px;
height: 35px;
text-align: center;
font-size: 13px;
font-weight: bold;
line-height: 35px;
}

.number {
margin-top: 5px;
}

.number li {
float: left;
width: 50px;
font-size: 14px;
height: 40px;
color: #fff;
}

.number li span {
display: block;
width: 26px;
height: 26px;
margin: 7px 0 0 12px;
line-height: 26px;
text-align: center;
border-radius: 50%;
}

.number li span.onToday {
background: red;
}
</style>

<body>
<div class="m-date" id="m-date">
<div id="header">
<div class="prevBtn btn" id="prevBtn"><</div>
<div class="year-mon" id="year-mon"></div>
<div class="nextBtn btn" id="nextBtn">></div>
</div>
<ul class="week" id="week">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
<ul class="number" id="number"></ul>
</div>
<script>
var $ = function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
//通过new LeonDate, 获取id和参数，并执行初始化功能
var Class = {
create: function() {
return function() {
this.init.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var k in source) {
destination[k] = source[k];
}
return destination;
}
var LeonDate = Class.create();
LeonDate.prototype = {
/**
* 初始化插件
* @param  {string} container 日历容器id， 不需要带#号
* @param  {object} options   参数
*/
init: function(container, options) {
if (options.mont >= 13) {
alert("请输入正确月份1-12");
return;
}
this.Container = $(container);
this.option(options);
this.Year = this.options.year;
this.Mont = this.options.mont;
this._day = this.options._day;
this.week = this.options.week;
this.prevBtn = $(this.options.prevBtn);
this.nextBtn = $(this.options.nextBtn);
this.dateContainer = $(this.options.dateContainer);
this.draw();
},
option: function(options) {
var date = new Date();
//初始化选项设置
this.options = {
year: date.getFullYear(), //设置年
mont: date.getMonth() + 1, //设置月
_day: date.getDate(), //设置日
week: date.getDay(), //设置星期
prevBtn: "prevBtn", //上个月按钮id
nextBtn: "nextBtn", //下个月按钮id
dateContainer: "year-mon" //日期显示内容id
}
Object.extend(this.options, options);
},
draw: function() {
var arr = []; //保存天数数组句柄
//用当月第一天在一周中的日期值作为当月离第一天的天数
for (var i = 1, firstDay = new Date(this.Year, this.Mont - 1, 1).getDay(); i <= firstDay; i++) {
arr.push("");
}
//用当月最后一天在一个月中的日期值作为当月的天数
for (var i = 1, monthNum = new Date(this.Year, this.Mont, 0).getDate(); i <= monthNum; i++) {
arr.push(i);
}
var html = document.createDocumentFragment();
while (arr.length > 0) {
var li = document.createElement("li"),
sp = document.createElement("span"),
sh = arr.shift();
sp.innerHTML = ""; //先把span标签清空， 在赋值
sp.innerHTML = sh;
if (this.isSam(new Date(this.Year, this.Mont - 1, sh), new Date())) {
this.onToday(sp)
}
li.appendChild(sp);
html.appendChild(li);
}
if (this.Container.hasChildNodes()) {
this.Container.innerHTML = "";
}
this.Container.appendChild(html);
this.finish();
},
/*
选择上一个月的日期
*/
prevMon: function() {
var d = new Date(this.Year, this.Mont - 2, 1);
this.Year = d.getFullYear();
this.Mont = d.getMonth() + 1;
this.draw();
},
/*
选择下一个月的日期
*/
nextMon: function() {
var d = new Date(this.Year, this.Mont, 1);
this.Year = d.getFullYear();
this.Mont = d.getMonth() + 1;
this.draw();
},
onToday: function(o) { //获取今日
o.className = "onToday";
},
finish: function() {
var _self = this;
$(this.dateContainer).innerHTML = this.monthE(this.Mont) + "  " + this.Year;
$(this.prevBtn).onclick = function() {
_self.prevMon();
}
$(this.nextBtn).onclick = function() {
_self.nextMon();
}
},
monthE: function(num) {
var en = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
return en[num - 1];
},
/**
* isSam  判断是否同一天
* @param  {object}  new_y 数据里的时间
* @param  {object}  old_y 当前时间
* @return {Boolean}
*/
isSam: function(d1, d2) {
return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
}
}
//用户new一个LeonDate实例, 第一个参数是日历容器的id， 第二个是配置参数， 可以不写
new LeonDate("number", {
prevBtn: "prevBtn", //上个月按钮id
nextBtn: "nextBtn", //下个月按钮id
dateContainer: "year-mon" //日期显示容器
});
</script>
</body>

</html>
<!--
Jan.一月
Feb.二月
Mar.三月
Apr.四月
May五月
Jun.六月
Jul.七月
Aug.八月
Sep.九月
Oct.十月
Nov.十一月
Dec.十二月

星期一：  Mon.=Monday
星期二： Tues.=Tuesday
星期三： Wed.=Wednesday
星期四： Thur.=Thurday
星期五： Fri.=Friday
星期六： Sat.=Saturday
星期天： Sun.=Sunday
-->
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航