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 相关文章推荐
5个javascript的数字格式化函数分享
Dec 07 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
Javascript window对象详解
Nov 12 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
Vue组件之Tooltip的示例代码
Oct 18 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实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
常用js脚本
2006/12/03 Javascript
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
2011/10/20 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python实现的维尼吉亚密码算法示例
2018/04/12 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
介绍下Java的输入输出流
2014/01/22 面试题
化学学院毕业生自荐信范文
2013/12/17 职场文书
统计岗位职责
2014/02/21 职场文书
爱晚亭导游词
2015/02/09 职场文书
项目验收申请报告
2015/05/15 职场文书
毕业酒会致辞
2015/07/29 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
浅谈PHP7中的一些小技巧
2021/05/29 PHP
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers