JS显示日历和天气的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • javascript html实现网页版日历代码

    javascript html实现网页版日历代码

    本文实例为大家分享了网页版日历代码,供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <link rel="stylesheet" type="text/css" href="Skin.css"> <style> <!-- table{ text-align: center } --> </style> </head> <body&

  • JavaScript制作简单的日历效果

    JavaScript制作简单的日历效果

    本文实例为大家分享了 <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> </head> <body> <script> document.write("<table>"); document.write("<th colspan='7'>

  • 原生js制作日历控件实例分享

    原生js制作日历控件实例分享

    本文实例为大家分享了js实现一个简单的日历控件,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> *{ margin:0; padding:0;} a{ text-decoration:none

  • 原生js开发的日历插件

    原生js开发的日历插件

    效果如下所示: 代码如下: <style type="text/css"> * { margin: 0; padding: 0; } ul, li { list-style: none; } #week { width: 350px; height: 350px; border: 1px solid #ccc; } #week h6 { font-size: 20px; overflow: hidden; height: 40px; line-height: 40px; }

  • js编写当天简单日历效果【实现代码】

    js编写当天简单日历效果【实现代码】

    之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解

  • js实现日历与定时器

    js实现日历与定时器

    简单的日历,会根据系统日期自动调整对应的日期,每60秒切换一次名言.只要有想法,做出来还是可以与众不同的. 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .calendar { width: 300px; height: 36

  • js css+html实现简单的日历

    js css+html实现简单的日历

    web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe

  • 纯js简单日历实现代码

    纯js简单日历实现代码

    复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa

  • JS实现一个简单的日历

    JS实现一个简单的日历

    主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件. 1:通过节点间关系的属性children 获取li元素(两个for循坏遍历): 2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期.第一行上个月的日期显示  : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加. 3:利用JS的事件冒泡获取li的inne

  • 纯javascript制作日历控件

    以前要用到日历控件都是直接从网上下载一套源码来使用,心里一直有个梗,就是想自己动手写一个日历控件,最近刚好来了兴趣,时间上也允许,于是自己摸索写了一个,功能还算完善,界面就凑合了.可能最值得说的一点就是让input控件内部右边显示一个按钮,我是直接给input加了个背景,然后把input的边框去掉实现的. 这个是最初版的,再往后打算做出纯javascript版的,再往后打算用JQuery做一套. <!doctype html> <html> <head> <met

随机推荐