달력 및 Weather_javascript 기술을 표시하는 JS 방법-JS 튜토리얼-php.cn

달력 및 Weather_javascript 기술을 표시하는 JS 방법

WBOY

풀어 주다： 2016-05-16 15:12:51

원래의

1382명이 탐색했습니다.

이 기사의 예에서는 달력과 날씨를 표시하는 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)&#63;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)&#63;"初":((cDay<20)&#63;"十":((cDay<30)&#63;"廿":"卅"));
 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.