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 相关文章推荐
JavaScript 三种创建对象的方法
Oct 16 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
javascript getElementsByClassName函数
Apr 01 Javascript
判断浏览器的javascript版本的代码
Sep 03 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
vue实现微信分享功能
Nov 28 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 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
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php提高网站效率的技巧
2015/09/29 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
js获取客户端外网ip的简单实例
2013/11/21 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
Python中subprocess的简单使用示例
2015/07/28 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python多任务之协程的使用详解
2019/08/26 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
PHP开发工程师面试问题集锦
2012/11/01 面试题
便利店的创业计划书
2014/01/15 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
《画家乡》教学反思
2014/04/22 职场文书
民族精神月活动总结
2014/08/28 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
青年文明号申报材料
2014/12/23 职场文书
月考总结与反思
2015/10/22 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS