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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 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
如何删除多级目录
2006/10/09 PHP
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
学习python的几条建议分享
2013/02/10 Python
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
详解Python中的join()函数的用法
2015/04/07 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
总经理司机岗位职责
2014/02/06 职场文书
后勤主管岗位职责
2014/03/01 职场文书
效能监察建议书
2014/05/19 职场文书
教学副校长工作总结
2015/08/13 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android