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 相关文章推荐
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
JS如何判断对象是否包含某个属性
Aug 29 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
xajax写的留言本
2006/11/25 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
PHP7新增函数
2021/03/09 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
flask框架视图函数用法示例
2018/07/19 Python
python使用KNN算法识别手写数字
2019/04/25 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
香港演唱会订票网站:StubHub香港
2019/10/10 全球购物
中专毕业生自荐信
2013/11/16 职场文书
优秀求职信范文分享
2013/12/19 职场文书
财经学院自荐信范文
2014/02/02 职场文书
烹调加工管理制度
2014/02/04 职场文书
大学新闻系自荐书
2014/05/31 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
员工年终考核评语
2014/12/31 职场文书
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers