ホームページ >ウェブフロントエンド >jsチュートリアル >カレンダーとweather_javascriptスキルを表示するJSメソッド
カレンダーとweather_javascriptスキルを表示するJSメソッド
- WBOYオリジナル
- 2016-05-16 15:12:511409ブラウズ
この記事の例では、カレンダーと天気を表示する 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 プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。