JS显示日历和天气的方法


Posted in Javascript onMarch 01, 2016

本文实例讲述了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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
js实现拖动缓动效果
Jan 13 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 #Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 #Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 #Javascript
JavaScript Date对象详解
Mar 01 #Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 #Javascript
jQuery增加与删除table列的方法
Mar 01 #Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 #Javascript
You might like
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
一步步教你用Python实现2048小游戏
2017/01/19 Python
windows下python连接oracle数据库
2017/06/07 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
Python中dict和set的用法讲解
2019/03/28 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
社区活动邀请函范文
2014/01/29 职场文书
领班岗位职责范文
2014/02/06 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers