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实现数组去重的多种方法
Mar 14 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
基于Vue实现timepicker
Apr 25 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
Postman动态获取返回值过程详解
Jun 30 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
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
laravel 数据验证规则详解
2019/10/23 PHP
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python的类方法和静态方法
2014/12/13 Python
python numpy元素的区间查找方法
2018/11/14 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
水利学院求职自荐书
2014/02/01 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
2016中秋节广告语
2016/01/28 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
SpringBoot整合Minio文件存储
2022/04/03 Java/Android