一、用原生js实现日历插件(一)
实现效果:
实现代码:
var time1 = document.querySelector('.time1'),
time2 = document.querySelector('.time2'),
number = document.querySelector('.number'),
btns = document.querySelectorAll('.time3 span'),
strong = document.querySelector('.time3 strong');
//即时时间
function time() {
var d = new Date();
time1.innerHTML = format(d.getHours()) + ':' + format(d.getMinutes()) + ':' + format(d.getSeconds());
}
time();
setInterval(time, 1000);
//格式化时间
function format(v) {
return v < 10 ? '0' + v : v;
}
//即时日期
var d1 = new Date();
time2.innerHTML = d1.getFullYear() + '年' + (d1.getMonth() + 1) + '月' + d1.getDate() + '日,星期' + formatWeek(d1.getDay());
//格式化星期
function formatWeek(v) {
return ['日', '一', '二', '三', '四', '五', '六'][v];
}
//获取到某个月最后一天的值
function getEndDay(year, month) {return new Date(year, month, 0).getDate();}
//获取到某个月第一天是周几
function getFirstWeek(year, month) {return new Date(year, month - 1, 1).getDay();}
//日历主体功能
function setDate(d) {
var lastEndDay = getEndDay(d.getFullYear(), d.getMonth()); //获取到上个月的最后一天
var curEndDay = getEndDay(d.getFullYear(), d.getMonth() + 1);//获取到当前月的最后一天(因为getMonth取到的值比实际小1,所以要加1)
var week = getFirstWeek(d.getFullYear(), d.getMonth() + 1);//获取到当前月的第一天是周几
var curDay = 1;//日期的起始值
var str = '';//日期的结构
var endNum = week - 1;//上个月所占格子的数量
//如果当前月的第一天是周一,上个月就不会显示。为了显示,让endNum的值=7即可
if(endNum == 0){endNum = 7;}
//如果某个月的第一天是周日,week的值就是0,endNum就是个负数,就会出问题
if(endNum < 0){endNum = 6;}
for(var i = 0; i < 42; i++){
if(i < endNum){
//这个条件成立,说明这里放的是上个月的日期
str = '<span class="color">' + (lastEndDay--) + '</span>' + str;
}else if(i >= endNum + curEndDay){
//这个条件成立,说明这里放的是下个月的日期
str += '<span class="color">' + (curDay++) + '</span>';
}else{
//这个条件成立,说明这里放的是这个月的日期
//当日日期高亮显示
var cl = new Date().getDate() == i - endNum + 1 ? 'active' : ''
if( d.getFullYear() != new Date().getFullYear() || d.getMonth() != new Date().getMonth() ){cl = '';}
//当月日期
str += '<span class="' + cl + '">' + (i - endNum + 1) + '</span>';
}
}
number.innerHTML = str;
strong.innerHTML = d.getFullYear() + '年' + (d.getMonth() + 1) + '月';
}
var d = new Date();
setDate(d);
//点击上个月
btns[0].onclick = function(){
d.setMonth(d.getMonth() - 1);
setDate(d);
};
//点击下个月
btns[1].onclick = function(){
d.setMonth(d.getMonth() + 1);
setDate(d);
};
二、用原生js实现日历插件(二)
实现效果:
实现代码:
var selYear = document.getElementById("selYear");
var dateInfo = getDateInfo(new Date());
//根据一个date对象,得到日期的相关信息对象
function getDateInfo(date) {
var obj = {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate()
}
//计算当月最大日期
obj.maxDay = new Date(obj.year, obj.month, 0).getDate();
//计算该月1号的星期
var newDate = new Date(obj.year, obj.month - 1, 1).getDay();
obj.firstdayOfWeek = newDate === 0 ? 7 : newDate;
return obj;
}
//根据数字,生成一个option,加入到指定的select元素中
function appendSelect(selDom, num) {
var opt = document.createElement("option")
opt.value = num;
opt.innerHTML = num;
selDom.appendChild(opt);
}
//根据指定的日期信息对象,初始化可选区域
function initHeader() {
for (var i = dateInfo.year - 100; i <= dateInfo.year + 100; i++) {
appendSelect(selYear, i);
}
var selMonth = document.getElementById("selMonth");
for (var i = 1; i <= 12; i++) {
appendSelect(selMonth, i);
}
//设置默认选中
selYear.value = dateInfo.year;
selMonth.value = dateInfo.month;
//注册事件
selYear.onchange = selMonth.onchange = function () {
setContentArea();
}
document.getElementById("btnToToday").onclick = function () {
selYear.value = dateInfo.year;
selMonth.value = dateInfo.month;
setContentArea();
}
}
//根据指定的日期信息对象,设置内容区域
function setContentArea() {
var dateInfo = getDateInfo(new Date(parseInt(selYear.value), parseInt(selMonth.value) - 1));
var now = getDateInfo(new Date());
var calendarContentDom = document.querySelector(".calendar-content");
calendarContentDom.innerHTML = "";
//补充前面的空白
for (let index = 0; index < dateInfo.firstdayOfWeek - 1; index++) {
var span = document.createElement("span");
calendarContentDom.appendChild(span)
}
for (let i = 1; i <= dateInfo.maxDay; i++) {
var span = document.createElement("span");
span.innerHTML = i;
//是否是今天
if (now.year === dateInfo.year
&& now.month === dateInfo.month
&& i === now.day) {
span.className = "active";
}
calendarContentDom.appendChild(span);
}
}
initHeader();
setContentArea();
以上内容整理自 "渡一教育直播课" ,一个值得推荐的"渡一教育"。