JS显示日历和天气的方法
更新时间：2016年03月01日 10:54:10 作者：yenange
这篇文章主要介绍了JS显示日历和天气的方法,涉及JavaScript日期与时间的操作技巧,非常简单实用,需要的朋友可以参考下
本文实例讲述了JS显示日历和天气的方法。分享给大家供大家参考，具体如下：
运行效果截图如下：
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function startTime()
{
//获取当前系统日期
var today=new Date()
var y=today.getFullYear()
var mo=today.getMonth()
var da=today.getDate()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
var weekString="日一二三四五六"
var TheDate=new Date();
var CalendarData=new Array(20);
var madd=new Array(12);
var numString="一二三四五六七八九十";
var monString="正二三四五六七八九十冬腊";
var cYear;
var cMonth;
var cDay;
var cHour;
var cDateString;
var DateString;
var Browser=navigator.appName;
function init()
{
CalendarData[0]=0x41A95;
CalendarData[1]=0xD4A;
CalendarData[2]=0xDA5;
CalendarData[3]=0x20B55;
CalendarData[4]=0x56A;
CalendarData[5]=0x7155B;
CalendarData[6]=0x25D;
CalendarData[7]=0x92D;
CalendarData[8]=0x5192B;
CalendarData[9]=0xA95;
CalendarData[10]=0xB4A;
CalendarData[11]=0x416AA;
CalendarData[12]=0xAD5;
CalendarData[13]=0x90AB5;
CalendarData[14]=0x4BA;
CalendarData[15]=0xA5B;
CalendarData[16]=0x60A57;
CalendarData[17]=0x52B;
CalendarData[18]=0xA93;
CalendarData[19]=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()
{
var total,m,n,k;
var isEnd=false;
var tmp=TheDate.getYear();
if (tmp<1900) tmp+=1900;
total=(tmp-2001)*365
+Math.floor((tmp-2001)/4)
+madd[TheDate.getMonth()]
+TheDate.getDate()
-23;
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=2001 + 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--;
}
cHour=Math.floor((TheDate.getHours()+3)/2);
}
function GetcDateString()
{ var 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);
tmp+=" ";
cDateString=tmp;
return tmp;
}
init();
e2c();
GetcDateString();
//调用checkTime（）函数，小于十的数字前加0
m=checkTime(m)
s=checkTime(s)
//s设置层txt的内容
document.getElementById('txt').innerHTML=y+"年"+(mo+1)+"月"+da+"日 "+h+":"+m+":"+s+" 星期"+weekString.charAt(today.getDay())+" 农历"+cDateString
//过500毫秒再调用一次
t=setTimeout('startTime()',500)
//小于10，加0
function checkTime(i)
{
if(i<10)
{i="0"+i}
return i
}
}
</script>
</head>
<body>
<div id="txt"></div>
<script>
startTime()
</script>
<div>
<iframe src="http://m.weather.com.cn/m/pn11/weather.htm " width="420" height="60" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了JavaScript中匿名函数用法,实例分析了javascript中匿名函数的功能、定义及具体用法,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript分秒倒计时器实现方法,可实现按照毫秒倒计时的效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
JavaScript——DOM操作——Window.document对象详解
下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了浅谈TypeScript的类型保护机制,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家介绍了JS技巧动手实现红包兔子雨效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了jQuery与js实现颜色渐变的方法,涉及javascript与jQuery的正则操作与数学运算相关技巧,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了javascript实现表单隔行变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了用js一次改变多个input的readonly属性值的方法,需要的朋友可以参考下2014-06-06
webpack是一种前端资源构建工具,一个静态模块打包器(module bundler),下面这篇文章主要给大家介绍了关于Webpack完整打包流程的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
javascript轻松控制表格列样式的脚本代码通过遍历table表格元素并动态设置其class属性,实现表格样式动态控制的功能,需要的朋友可以参考一下2007-12-12
最新评论