JS显示日历和天气的方法_javascript技巧

本文实例讲述了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动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 日历
天气
javascript 日历、javascript日历源码、javascript日历控件、javascript日历代码、用javascript编写日历,以便于您获取更多的相关知识。

时间: 2024-11-03 03:58:45

JS显示日历和天气的方法_javascript技巧的相关文章

JS输入用户名自动显示邮箱后缀列表的方法_javascript技巧

本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

JS实现获取键盘按下的按键并显示在页面上的方法_javascript技巧

本文实例讲述了JS实现获取键盘按下的按键并显示在页面上的方法.分享给大家供大家参考,具体如下: 请你使用键盘输入一些字符,这些字符就被显示在网页的空白处,是不是少了文本框或文本域之类的东西,觉得挺不习惯呢?这个效果是应用了JavaScript中的document.onkeypress对象,监测键盘的一举一动,并记录下哪些键被按下,有意思吧,想研究Js的朋友,就从这些小例子开始吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-sh

原生js制作日历控件实例分享_javascript技巧

本文实例为大家分享了js实现一个简单的日历控件,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> *{ margin:0; padding:0;} a{ text-decoration:none

JS简单测试循环运行时间的方法_javascript技巧

本文实例讲述了JS简单测试循环运行时间的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>JS 测试循环运行的时间</title> <script> var arr = []; var max = 10000000; //加载 window.addE

javascript实现在下拉列表中显示多级树形菜单的方法_javascript技巧

本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法.分享给大家供大家参考.具体如下: 这里演示在下拉列表框中显示分级的菜单,在很多网站都可以看到的效果,很实用,下拉列表框中的选项是利用JS控制输出,如果你有更好的办法不用JS来显示,那最好了,因为像这种菜单用JS来实现,多多少少有点麻烦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

JS模拟键盘打字效果的方法_javascript技巧

本文实例讲述了JS模拟键盘打字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得. 先来看看运行效果图: 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23

js实现当前输入框高亮显示的方法_javascript技巧

本文实例讲述了js实现当前输入框高亮显示的方法.分享给大家供大家参考.具体如下: 这里演示利用JavaScript技术实现的当前输入框高亮显示代码,在很多的网页表单中,当用户鼠标点击文本框的时候,该文本框就会显示高亮状态,提醒用户输入,本例通过JAVAScript代码实现了这样一种效果. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-color-show-codes/ 具体代码如下: <!DOCTYPE html

js实现右下角提示框的方法_javascript技巧

本文实例讲述了js实现右下角提示框的方法.分享给大家供大家参考.具体实现方法如下: 实现右下角提示框的Jquery插件 (popup.js) 复制代码 代码如下: //兼容ie6的fixed代码   //jQuery(function($j){  //    $j('#pop').positionFixed()  //})  (function($j){      $j.positionFixed = function(el){          $j(el).each(function(){ 

JavaScript在浏览器标题栏上显示当前日期和时间的方法_javascript技巧

本文实例讲述了JavaScript在浏览器标题栏上显示当前日期和时间的方法,分享给大家供大家参考.具体如下: 将这段脚本放到head区即可: <script language="JavaScript"> <!-- function resetIt() { // Calculate Time var timerID = null; var timerRunning = false; if(timerRunning) clearTimeout(timerID); time