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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
Firefox下提示illegal character并出现乱码的原因
Mar 25 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
ES6中字符串的使用方法扩展
Jun 04 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往windows中添加用户
2006/12/06 PHP
php图片缩放实现方法
2014/02/20 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python实现将xml导入至excel
2015/11/20 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python中的itertools的使用详解
2020/01/13 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python中的面向接口编程示例详解
2021/01/17 Python
毕业生的自我评价范文
2013/12/31 职场文书
授权委托书样本
2014/04/03 职场文书
幼儿生日活动方案
2014/08/27 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
Win11软件图标固定到任务栏
2022/04/19 数码科技