<html>
<head>
<title>cc-vue.js</title>
<style type="text/css">
</style>
<script>
// 生成2019年元旦日期函数
function _yd() {
var yd = new Date()
// 2019 - 01-01
// Year
yd.setYear(yd.getFullYear() + 1)
// Month
yd.setMonth(0)
// Day
yd.setDate(1)
// Time
yd.setHours(0,0,0,0)
return yd
}
/**
* 计算当前时间距元旦时间间隔
*/
function yd_cal() {
var ipt = document.getElementById('ipt')
var now = new Date()
var ts = _yd().getTime() - now.getTime()
var _d = ts / (24 * 60 * 60 * 1000)
// console.log('天:' + parseInt(_d))
var _h = (_d - parseInt(_d)) * 24
// console.log('小时：' + parseInt(_h))
var _m = (_h - parseInt(_h)) * 60
// console.log("分钟：" + parseInt(_m))
var _s = (_m - parseInt(_m)) * 60
// console.log("秒：" + parseInt(_s))
ipt.value = " " + parseInt(_d) + "天 " + parseInt(_h) + ":" + parseInt(_m) + ":" + parseInt(_s) + ""
}
</script>
</head>
<body style="margin: 20px">
<div style="width: 100% height: 40px background-color: #fff">
<label for="ipt" style="font-size: .8em">当前距元旦时间间隔：</label>
<input type="text" value="" placeholder="元旦时间间隔" disabled id="ipt">
<input type="button" value="计算" onclick="yd_cal()" />
</div>
</body>
</html>
下面小编就为大家带来一篇js编写当天简单日历效果【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考之前一直很想用javascript写一个日历，但是因为完全没有好的思路， 所以迟迟没有尝试。最近在网上刚好看到用javascript编写的简单日历的例子，代码量虽然不大， 但是我觉得很好地阐述了js日历的实现原理。自己也尝试着做了一下，收获蛮大，掌握了基本的实现原理后，再想增加更多的功能，完全就可以自由发挥了，先在这里分享一下吧，有兴趣的可以试试！
一.表格行数问题
既然要显示日期表格的话，首先得知道这个表格有多少行多少列，列数是已经确定的，从星期天（日历上第1列是星期天）到星期六一共7列。要解决行数问题之前，还得先知道这个月的第1天是星期几，因为每个月的1号并不都是从日历上的星期天开始排的，可能1号是星期五，星期六也说不定，所以1号的左边部分，就得用空表格代替了。那么用多少个空表格代替呢，这里就得用到getDay()方法了，该方法返回数组[0-6]中的一个数字，0代表星期天，1代表星期一，2代表星期二，以此类推。所以如果一个月的1号是星期五的话，那么刚好左边需要5个空表格代替。然后，假如一个月有31天，最后求出的表格行数就是：
var tr_nums = Math.ceil((5 + 31)/7)
当然，并不是每个月都是31天，所以我们得创建一个包含12个月份的数组，每个元素代表每个月份所包含的天数。但是2月份比较特殊，闰年的2月份有29天，平年的2月份只有28天。所以，在创建数组之前，得自己创建一个判断闰年的函数:
//如果当前年份能被4整除但是不能被100整除或者能被400整除，即可确定为闰年，返回1，否则返回0
function isLeap(year) {
return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0
js代码扩展：//定义24节气
Calendar.solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋", "处暑","白露","秋分","寒露","霜降", "立冬","小雪","大雪","冬至")
//定义阴历节日
Calendar.lFtv = new Array("0101*春节","0115 元宵节", "0505 端午节","0707 七夕情人节","0715 中元节","0815 中秋节","0909 重阳节","1208 腊八节","1224 小年","1230*除夕")
//定义阳历节日
Calendar.sFtv = new Array("0101*元旦","0214 情人节","0308 妇女节","0312 植树节","0315 消费者权益日","0401 愚人节","0501 劳动节","0504 青年节","0512 护士节","0601 儿童节","0929 吴潇的生日","0701 建党节 香港回归纪念","0801 建军节","0808 父亲节","0909 毛席逝世纪念","0910 教师节","0928 孔子诞辰","1001*国庆节","1006 老人节","1024 联合国日","1112 孙中山诞辰","1220 澳门回归纪念","1225 圣诞节","1226 毛席诞辰")
//定义阴历日期对象
/*
完成阴历日期类型对象的定义
算出农历, 传入日期传回农历日期物件
该物件属性有 .year .month .day .isLeap .yearCyl .dayCyl .monCyl
*/
function DateLunar(objDate) {
var i, leap=0, temp=0
var baseDate = new Date(1900,0,31)
var offset = (objDate - baseDate)/86400000
this.objDate = objDate
this.dayCyl = offset + 40
this.monCyl = 14
for(i=1900i<2050 &&offset>0i++) {
temp = this.lYearDays(i)
offset -= temp
this.monCyl += 12
}
if(offset<0) {
offset += temp
i--
this.monCyl -= 12
}
this.year = i
this.yearCyl = i-1864
leap = this.leapMonth(i) //闰哪个月
this.isLeap = false
for(i=1i<13 &&offset>0i++) {
//闰月
if(leap>0 &&i==(leap+1) &&this.isLeap==false){
--i
this.isLeap = true
temp = this.leapDays(this.year)
} else {
temp = this.monthDays(this.year, i)
}
//解除闰月
if(this.isLeap==true &&i==(leap+1))
this.isLeap = false
offset -= temp
if(this.isLeap == false)
this.monCyl ++
}
if(offset==0 &&leap>0 &&i==leap+1)
if(this.isLeap){
this.isLeap = false
}else{
this.isLeap = true
--i
--this.monCyl
}
if(offset<0){
offset += temp--i
--this.monCyl
}
this.month = i
this.day = offset + 1
}
DateLunar.prototype.lunarInfo=new Array(
0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,
0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,
0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,
0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,
0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,
0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,
0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,
0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,
0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,
0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,
0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,
0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,
0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,
0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,
0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0)
DateLunar.prototype.Animals=new Array("鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪")
DateLunar.prototype.Gan=new Array("甲","乙","丙","丁","戊","己","庚","辛","壬","癸")
DateLunar.prototype.Zhi=new Array("子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥")
//==== 传回农历 y年的总天数
DateLunar.prototype.lYearDays = function (y){
//alert("y = " + y)
var i, sum = 348
for(i=0x8000i>0x8i>>=1) sum += (this.lunarInfo[y-1900] &i)? 1: 0
return(sum + this.leapDays(y))
}
//==== 传回农历 y年闰月的天数
DateLunar.prototype.leapDays = function (y){
if(this.leapMonth(y))
return((this.lunarInfo[y-1900] &0x10000)? 30: 29)
else return(0)
}
//==== 传回农历 y年闰哪个月 1-12 , 没闰传回 0
DateLunar.prototype.leapMonth = function (y){
return(this.lunarInfo[y-1900] &0xf)
}
//==== 传回农历 y年m月的总天数
DateLunar.prototype.monthDays = function (y,m) {
return((this.lunarInfo[y-1900] &(0x10000>>m))? 30: 29 )
}
//==== 传入 offset 传回干支, 0=甲子
DateLunar.prototype.cyclical = function () {
//var num = this.objDate.getYear() -1900 + 36
var num = this.year -1900 + 36
return(this.Gan[num%10]+ this.Zhi[num%12])
}
/** Returns the month of the day to chinese description.......... */
DateLunar.prototype.chinaDate = function () {
var nStr1 = new Array('日','一','二','三','四','五','六','七','八','九','十')
var nStr2 = new Array('初','十','廿','卅',' ')
var lunarMonth = this.month
var lunarday = this.day
var s
if (lunarMonth>10){s = '十'+nStr1[lunarMonth-10]} else {s = nStr1[lunarMonth]} s += '月'
switch (lunarday) {
case 10:s += '初十'break
case 20:s += '二十'break
case 30:s += '三十'break
default:s += nStr2[Math.floor(lunarday/10)]s += nStr1[lunarday%10]
}
return(s)
}
DateLunar.prototype.print = function () {
var cl = '<font color="green" STYLE="font-size:9pt">阴历：'
//农历BB'+(cld[d].isLeap?'闰 ':' ')+cld[d].lMonth+' 月 '+cld[d].lDay+' 日
var tt = this.cyclical()+'年 '+this.chinaDate()
return(cl+tt+'</font>')
}
//继承日期对象构件，实现阴历日期的算法和节假日的获取算法
Date.prototype.getDateLunar = function() {
var d = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0)
return new DateLunar(d)
}
Date.prototype.DateLunarPrint = function() {
var DateLunar = this.getDateLunar()
return DateLunar.print()
}
Date.prototype.FestivalPrint = function() {
var objDate = new Date(this.getFullYear(), this.getMonth(), this.getDate(), 0, 0, 0)
var objDateLunar = this.getDateLunar()
var iYear = objDate.getYear()
var iMonth = objDate.getMonth()
var iDate = objDate.getDate()
var sTermInfo = new Array
(0,21208,42467,63836,85337,107014,128867,
150921,173149,195551,218072,240693,263343,
285989,308563,331033,353350,375494,397447,
419210,440795,462224,483532,504758)
var solarTerm = Calendar.solarTerm
var lFtv = Calendar.lFtv
var sFtv =Calendar.sFtv
var lDPOS = new Array(3)
var festival='',solarTerms='',solarFestival='',lunarFestival='',tmp1,tmp2
//农历节日
for(i in lFtv)
if(lFtv[i].match(/^(\d{2})(.{2})([\s\*])(.+)$/)) {
tmp1=Number(RegExp.$1)-objDateLunar.month
tmp2=Number(RegExp.$2)-objDateLunar.day
if(tmp1==0 &&tmp2==0) lunarFestival=RegExp.$4
}
//国历节日
for(i in sFtv)
if(sFtv[i].match(/^(\d{2})(\d{2})([\s\*])(.+)$/)){
tmp1=Number(RegExp.$1)-(iMonth+1)
tmp2=Number(RegExp.$2)-iDate
if(tmp1==0 &&tmp2==0) solarFestival = RegExp.$4
}
//节气
tmp1 = new Date((31556925974.7*(iYear-1900)+sTermInfo[iMonth*2+1]*60000)+Date.UTC(1900,0,6,2,5))
tmp2 = tmp1.getUTCDate()
if (tmp2==iDate) solarTerms = solarTerm[iMonth*2+1]
tmp1 = new Date((31556925974.7*(iYear-1900)+sTermInfo[iMonth*2]*60000)+Date.UTC(1900,0,6,2,5))
tmp2= tmp1.getUTCDate()
if (tmp2==iDate) solarTerms = solarTerm[iMonth*2]
if(solarTerms == '' &&solarFestival == '' &&lunarFestival == '')
festival = ''
else
festival = '<br><b>今天是：'+solarTerms + ' ' + solarFestival + ' ' + lunarFestival+'</b>'
var cl = '<font color="#FF33FF" STYLE="font-size:9pt">'
return(cl+festival+'</font>')
}
calendar.js函数的修改 重写Calendar.dayMouseOver函数
Calendar.dayMouseOver = function(ev) {
var el = Calendar.getElement(ev)
if (Calendar.isRelated(el, ev) || Calendar._C || el.disabled) {
return false
}
if (el.ttip) {
if (el.ttip.substr(0, 1) == "_") {
//-----------------------------------
el.ttip = el.caldate.print(el.calendar.ttDateFormat) + el.ttip.substr(1)
//add chinese DateLunar Print..
el.ttip = el.ttip + "<br>"+ el.caldate.DateLunarPrint()
//add print out all festivals the calender defined.
el.ttip = el.ttip + el.caldate.FestivalPrint()
}
el.calendar.tooltips.innerHTML = el.ttip
}
if (el.navtype != 300) {
Calendar.addClass(el, "hilite")
if (el.caldate) {
Calendar.addClass(el.parentNode, "rowhilite")
}
}
return Calendar.stopEvent(ev
取数作比较
