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 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
js constructor的实际作用分析
Nov 15 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
js中的闭包学习心得
Feb 06 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
react MPA 多页配置详解
Oct 18 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 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
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
php和nginx交互实例讲解
2019/09/24 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python中的类与对象之描述符详解
2015/03/27 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
基于python实现微信模板消息
2015/12/21 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python实现图像拼接
2020/03/05 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
四查四看剖析材料
2014/02/14 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
中小学生学籍证明
2014/10/25 职场文书
机关保密工作承诺书
2015/05/04 职场文书
聘任通知书
2015/09/21 职场文书