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 相关文章推荐
asm.js使用示例代码
Nov 28 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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
dedecms系统常用术语汇总
2007/04/03 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
进一步理解Python中的函数编程
2015/04/13 Python
python 日期操作类代码
2018/05/05 Python
浅析Python 序列化与反序列化
2020/08/05 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
数控技术应用个人求职信范文
2014/02/03 职场文书
初中生自我鉴定
2014/02/04 职场文书
家长对孩子的感言
2014/03/10 职场文书
销售总经理岗位职责
2014/03/15 职场文书
合作经营协议书
2014/04/17 职场文书
活动总结书
2014/05/08 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
普通员工辞职信范文
2015/05/12 职场文书
重阳节活动主持词
2015/07/04 职场文书
诚信教育主题班会
2015/08/13 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书