“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”
新手报到，来展示一下没毕业，面试之前写的一个日历效果，那个时候知识的储备广度真的是人生巅峰了，虽然现在对一些经常用知识的更加熟悉，加上CV大法完完全全可以胜任工作，但是就感觉越来越菜了，所以先来回忆一下之前写的一些小效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯js实现简单的日历</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#date {
width: 420px;
height: 560px;
background: rgb(67, 67, 68);
margin: 20px auto;
overflow: hidden;
}
#date1_top {
margin-top: 10px;
margin-bottom: 0px;
color: aliceblue;
font-size: 34px;
padding-left: 20px;
}
#date1_bottom {
line-height: 30px;
color: rgb(106, 154, 196);
font-size: 16px;
padding-left: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgb(186, 192, 197);
}
#datepicker_header {
width: 420px;
height: 50px;
}
#datepicker_header span {
float: left;
height: 30px;
color: aliceblue;
text-align: center;
line-height: 30px;
}
#up,
#down {
width: 20%;
}
#middle {
width: 60%;
}
#datepick_th {
width: 420px;
height: 30px;
}
#datepick_th li{
height: 30px;
float: left;
width: 60px;
}
#datapicker_table li {
float: left;
width: 60px;
height: 60px;
color: aliceblue;
font-size: 12px;
text-align: center;
}
#data_p{
width: 60px;
height: 30px;
cursor: pointer;
}
#datapick_content li:hover{
color: #4285F4;
}
</style>
</head>
<body>
<div id="date">
<div id="date1">
<p id=date1_top></p>
<p id=date1_bottom></p>
</div>
<div id="datepicker_header">
<span id="middle"></span>
<span id="up">上</span>
<span id="down">下</span>
</div>
<div id="datapicker_table">
<ul id="datapick_th">
<li style="height: 40px;">一</li>
<li style="height: 40px;">二</li>
<li style="height: 40px;">三</li>
<li style="height: 40px;">四</li>
<li style="height: 40px;">五</li>
<li style="height: 40px;">六</li>
<li style="height: 40px;">日</li>
</ul>
<ul id="datapick_content">
</ul>
</div>
</body>
<!-- 引入所需要的js文件 -->
<script src="./js/String.js"></script>
<script src="./js/date.js"></script>
<script>
//在js中获取H5中准备用来显示时间的标签的标签
var date1_tops = document.getElementById("date1_top");
//在js中获取H5中准备用来显示年月等时间的标签
var date1_bottoms = document.getElementById("date1_bottom");
//在js中获取H5中代表"上"的标签
var ups = document.getElementById("up");
//在js中获取H5中代表"下"的标签
var downs = document.getElementById("down");
//在js中获取H5中代表日期的标签
var middles = document.getElementById("middle");
//在js中获取能填入具体日历的标签
var datapick_contents = document.getElementById("datapick_content");
//获取当前系统的时间
var date = new Date();
//直接调用显示时间,日期,打印日历的函数
myHour()
myDate()
dataPrint(date);
//创建定时器,每隔1s调用一次myHour()方法,使时间重置,达到每秒时间发生改变的目的
setInterval(function () {
myHour()
}, 1000)
//显示时间
function myHour() {
//获取当前系统的时间
var date = new Date();
//根据所传入的当前系统时间和"hh:msa:ss"调用date.js文件中的dateFormat()函数
var str = dateFormat(date, "hh:msa:ss");
//将所得到的时间填入到date1_tops所代表的标签内
date1_tops.innerHTML = str;
}
//显示日期和阴历
function myDate() {
//获取当前系统的时间
var date = new Date();
//根据所传入的当前系统时间和"yyyy年mm月dd日"调用date.js文件中的dateFormat()函数
var str = dateFormat(date, "yyyy年mm月dd日");
//调用String中的showCal()方法,获取当前时间的阴历
var char = showCal(date);
console.log('char',11111,char);
//将所获取的年,月,日与其所对应的的阴历传入到date1_bottoms所代表的标签中
date1_bottoms.innerHTML = str + " " + char;
}
//按动"上"月份变更
ups.onclick=function(){
//获取当前的月份
var month=date.getMonth();
//使当前月份减一并赋值.不用担心年份不变,当月份减到0时,再按动一次次年份减1
date.setMonth(month-1);
//打印当前时间所代表的日历
dataPrint(date);
}
//按动"下"月份变更
downs.onclick=function(){
//获取当前的月份
var month=date.getMonth();
//使当前月份加一并赋值.不用担心年份不变,当月份加到11时,再按动一次次年份加1
date.setMonth(month+1);
//打印当前时间所代表的日历
dataPrint(date);
}
//打印当前时间所代表的日历
function dataPrint(date) {
//声明一个空的字符串,方便字符串的拼接
var html = "";
//将日历的所有内容显示到ul中
html+="<ul>";
//根据所传入的时间和"yyyy年mm月"调用date.js文件中的dateFormat()函数
var str = dateFormat(date, "yyyy年mm月");
//将所获取的年,月传入到middles所代表的标签中
middles.innerHTML = str;
//调用date.js文件中的getDays()函数,获取当月有多少天
var date1 = getDays(date);
//调用date.js文件中的getDays()函数,获取当月的第一天是星期几
var date2 = firstWeek(date);
//调用date.js文件中的getDays()函数,获取当月的上一个月总共有多少天
var date3 = prevMonthDays(date);
//因为系统中星期日代表的数字为0,破坏了其规律,所以运用三元运算符使其为0时变为7
date2 = date2 == 0 ? 7 : date2;
//第一行的第一个格子所代表的日期为上一个月的天数减去当月第一天星期几再加上二,直到上一个月结束,才开始填入这个月的日期
for(var i=date3-date2+2;i<=date3;i++){
//获取一个临时的时间,传入当前的上一个月的日期
var nextDate1 = new Date(date.getFullYear(), date.getMonth()-1,i);
//获取当前日期的阴历
var char1 = showCal(nextDate1);
//我是用一个li标签套着2个上下排列的p标签,分别显示日期和阴历,且阴历时间只截取最后2个字
html+="<li style='color:rgb(163, 153, 153)'><p id=data_p>"+i+"</p><p id=data_p>"+char1.slice(-2)+"<p></li>"
}
//开始填入当前月份的日期,直接从1,循环到当月的最后一天即可
for(var i=1;i<=date1;i++){
//获取一个临时的时间,传入当前的日期
var nextDate2 = new Date(date.getFullYear(), date.getMonth(),i);
//获取当前日期的阴历
var char2 = showCal(nextDate2);
html+="<li><p id=data_p>"+i+"</p><p id=data_p>"+char2.slice(-2)+"<p></li>"
}
//开始填入剩下空格的日期,即下一个月,从1号开始,到总共有42个格,减去当月的天数-当月第一天星期几再加1,因为多减了1天
for (var i = 1; i <= (42 -date1 - date2 + 1); i++) {
//获取一个临时的时间,传入当前的下一个月日期
var nextDate = new Date(date.getFullYear(), date.getMonth() + 1, i);
//获取当前日期的阴历
var char = showCal(nextDate);
html+="<li style='color:rgb(163, 153, 153)'><p id=data_p>"+i+"</p><p id=data_p>"+char.slice(-2)+"<p></li>"
}
html+="</ul>"
//将当前日历放入 datapick_contents所代表的的标签中
datapick_contents.innerHTML=html;
}
</script>
</html>
引入的String.js
//此函数使时间按照指定的字符串样式输出
//date是当前的系统时间
function dateFormat(date, str) {
//获取当前的年,月,日,小时,分,秒
var year = date.getFullYear();
//因为系统上的月份1-12分别为0-11,所以输出时应+1显示
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
//如果单个0-9的秒数显示起来不好看,可以使其为0-9时在其开头添加个0为00-09
//三元运算符,如果其值<10,则头部添加"0",否则按照原样不变
sec = sec < 10 ? '0' + sec : sec;
//将字符串中的yyyy,mm,day等用刚刚获取的年,月,日等替换
return str
.replace('yyyy', year)
.replace('mm', month)
.replace('dd', day)
.replace('hh', hour)
.replace('msa', min)
.replace('ss', sec);
}
//获取当前月份一共有多少天
function getDays(date) {
//随意临时设置一个时间,但日期最好<=28，否则日期可能会溢出
var tempDate = new Date('2000-01-01');
//获取系统的年,月
var year = date.getFullYear();
var month = date.getMonth();
//将临时设置的时间用获得的年,月表示
tempDate.setFullYear(year);
//若当前月份为九月,使其+1为10月
tempDate.setMonth(month + 1);
//将日期设置为0,会自动向前进1,所以在此时获取当前日期,就是9月的最后一天
tempDate.setDate(0);
return tempDate.getDate();
}
//获取当月第一天是星期几
function firstWeek(date) {
//随意设置时间
var tempDate = new Date('2000-01-01');
//获取当前系统的年,月
var year = date.getFullYear();
var month = date.getMonth();
//将临时设置的时间用获得的年,月表示
tempDate.setFullYear(year);
tempDate.setMonth(month);
//因为临时设置的日期为1,所以不用设置,直接返回当前时间的日期
return tempDate.getDay();
}
//获得当月的上一个月总共有多少天
function prevMonthDays(date) {
var tempDate = new Date('2000-01-01');
var year = date.getFullYear();
var month = date.getMonth();
//获取当前的年,月,并将日期设置为0
tempDate.setFullYear(year);
tempDate.setMonth(month);
tempDate.setDate(0);
//此时日期自动向上个月进1,所以现在获取的日期即为上一个月的最后一天
return tempDate.getDate();
}
引入的date.js
以下为获得阴历的方法,但是该算法从网上找的，本人也不是很清楚,这里只给代码/*获取当前农历*/
function showCal(D) {
var yy = D.getFullYear();
var mm = D.getMonth() + 1;
var dd = D.getDate();
var ww = D.getDay();
var ss = parseInt(D.getTime() / 1000);
if (yy < 100) yy = '19' + yy;
return GetLunarDay(yy, mm, dd);
}
//定义全局变量
var CalendarData = new Array(100);
var madd = new Array(12);
var tgString = '甲乙丙丁戊己庚辛壬癸';
var dzString = '子丑寅卯辰巳午未申酉戌亥';
var numString = '一二三四五六七八九十';
var monString = '正二三四五六七八九十冬腊';
var weekString = '日一二三四五六';
var sx = '鼠牛虎兔龙蛇马羊猴鸡狗猪';
var cYear, cMonth, cDay, TheDate;
CalendarData = new Array(
0xa4b,
0x5164b,
0x6a5,
0x6d4,
0x415b5,
0x2b6,
0x957,
0x2092f,
0x497,
0x60c96,
0xd4a,
0xea5,
0x50da9,
0x5ad,
0x2b6,
0x3126e,
0x92e,
0x7192d,
0xc95,
0xd4a,
0x61b4a,
0xb55,
0x56a,
0x4155b,
0x25d,
0x92d,
0x2192b,
0xa95,
0x71695,
0x6ca,
0xb55,
0x50ab5,
0x4da,
0xa5b,
0x30a57,
0x52b,
0x8152a,
0xe95,
0x6aa,
0x615aa,
0xab5,
0x4b6,
0x414ae,
0xa57,
0x526,
0x31d26,
0xd95,
0x70b55,
0x56a,
0x96d,
0x5095d,
0x4ad,
0xa4d,
0x41a4d,
0xd25,
0x81aa5,
0xb54,
0xb6a,
0x612da,
0x95b,
0x49b,
0x41497,
0xa4b,
0xa164b,
0x6a5,
0x6d4,
0x615b4,
0xab6,
0x957,
0x5092f,
0x497,
0x64b,
0x30d4a,
0xea5,
0x80d65,
0x5ac,
0xab6,
0x5126d,
0x92e,
0xc96,
0x41a95,
0xd4a,
0xda5,
0x20b55,
0x56a,
0x7155b,
0x25d,
0x92d,
0x5192b,
0xa95,
0xb4a,
0x416aa,
0xad5,
0x90ab5,
0x4ba,
0xa5b,
0x60a57,
0x52b,
0xa93,
0x40e95
);
madd[0] = 0;
madd[1] = 31;
madd[2] = 59;
madd[3] = 90;
madd[4] = 120;
madd[5] = 151;
madd[6] = 181;
madd[7] = 212;
madd[8] = 243;
madd[9] = 273;
madd[10] = 304;
madd[11] = 334;
function GetBit(m, n) {
return (m >> n) & 1;
}
//农历转换
function e2c() {
TheDate = arguments.length != 3 ? new Date() : new Date(arguments[0], arguments[1], arguments[2]);
var total, m, n, k;
var isEnd = false;
var tmp = TheDate.getYear();
if (tmp < 1900) {
tmp += 1900;
}
total =
(tmp - 1921) * 365 +
Math.floor((tmp - 1921) / 4) +
madd[TheDate.getMonth()] +
TheDate.getDate() -
38;
if (TheDate.getYear() % 4 == 0 && TheDate.getMonth() > 1) {
total++;
}
for (m = 0; ; m++) {
k = CalendarData[m] < 0xfff ? 11 : 12;
for (n = k; n >= 0; n--) {
if (total <= 29 + GetBit(CalendarData[m], n)) {
isEnd = true;
break;
}
total = total - 29 - GetBit(CalendarData[m], n);
}
if (isEnd) break;
}
cYear = 1921 + m;
cMonth = k - n + 1;
cDay = total;
if (k == 12) {
if (cMonth == Math.floor(CalendarData[m] / 0x10000) + 1) {
cMonth = 1 - cMonth;
}
if (cMonth > Math.floor(CalendarData[m] / 0x10000) + 1) {
cMonth--;
}
}
}
function GetcDateString() {
var tmp = '';
/*显示农历年：（ 如：甲午(马)年 ）*/
/*tmp+=tgString.charAt((cYear-4)%10);
tmp+=dzString.charAt((cYear-4)%12);
tmp+="(";
tmp+=sx.charAt((cYear-4)%12);
tmp+=")年 ";*/
if (cMonth < 1) {
tmp += '(闰)';
tmp += monString.charAt(-cMonth - 1);
} else {
tmp += monString.charAt(cMonth - 1);
}
tmp += '月';
tmp += cDay < 11 ? '初' : cDay < 20 ? '十' : cDay < 30 ? '廿' : '三十';
if (cDay % 10 != 0 || cDay == 10) {
tmp += numString.charAt((cDay - 1) % 10);
}
return tmp;
}
function GetLunarDay(solarYear, solarMonth, solarDay) {
//solarYear = solarYear<1900?(1900+solarYear):solarYear;
if (solarYear < 1921 || solarYear > 2060) {
return '';
} else {
solarMonth = parseInt(solarMonth) > 0 ? solarMonth - 1 : 11;
e2c(solarYear, solarMonth, solarDay);
return GetcDateString();
}
}
