[ASP] [ActiveX] [DHTML] [Java Script] [Java applets] [VB Script] [VB/Web]

繽紛年曆 (本範例係參考http://www.tacocity.com.tw/tsai5344/小依依JavaScript教戰手冊範例)

繽紛年曆程式碼 ( 如範例一 )  。 隨滑鼠飄浮的彩色繽紛字串程式碼 ( 如範例二---請點選 ) 

範例 (一)  繽紛年曆程式碼

步驟一 :
將以下程式碼拷貝 , 貼在您網頁原始檔<head> 與 </head> 之間 . 
<script LANGUAGE="JavaScript" TYPE="text/javascript"> 
var vn="Microsoft Internet Explorer";
var some;
if(navigator.appName!=vn)
some=1900;
else
some=0;

function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) { 
this[0] = m0; 
this[1] = m1; 
this[2] = m2; 
this[3] = m3; 
this[4] = m4; 
this[5] = m5; 
this[6] = m6; 
this[7] = m7; 
this[8] = m8; 
this[9] = m9; 
this[10] = m10; 
this[11] = m11; 
} 

function calendar() { 
var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec"; 
var today = new Date(); 
var thisDay; 
var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 

year = today.getYear() + 1900; 
thisDay = today.getDate(); 

if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29; 

nDays = monthDays[today.getMonth()]; 
firstDay = today; 
firstDay.setDate(1); // works fine for most systems 
testMe = firstDay.getDate(); 
if (testMe == 2) firstDay.setDate(0); 
startDay = firstDay.getDay(); 

document.write('<table border="0" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#ffff00"><TR><TD><table border="0" cellspacing="1" cellpadding="2" bgcolor="Silver">'); 

document.write('<TR><th colspan="7" bgcolor="#98eb97">'); 
var dayNames = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); 
var monthNames = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"); 
var now = new Date(); 
document.write("<font style=font-size:9pt;Color:#330099>" + "西元 " + now.getYear() + "年" + monthNames[now.getMonth()] + " " + now.getDate() + "日 " + dayNames[now.getDay()] + "</FONT>"); 


document.writeln('</TH></TR><TR><TH BGCOLOR="#ffff79"><font style="font-size:9pt;Color:White"><FONT COLOR="#000000">日</FONT></FONT></TH>'); 
document.writeln('<th bgcolor="#ffff79"><font style="font-size:9pt;Color:White"><FONT COLOR="#000000">一</FONT></FONT></TH>'); 
document.writeln('<TH BGCOLOR="#ffff79"><font style="font-size:9pt;Color:White"><FONT COLOR="#000000">二</FONT></FONT></TH>'); 
document.writeln('<TH BGCOLOR="#ffff79"><font style="font-size:9pt;Color:White"><FONT COLOR="#000000">三</FONT></FONT></TH>'); 
document.writeln('<TH BGCOLOR="#ffff79"><font style="font-size:9pt;Color:White"><FONT COLOR="#000000">四</FONT></FONT></TH>'); 
document.writeln('<TH BGCOLOR="#ffffF79"><font style="font-size:9pt;Color:White"><FONT COLOR="#000000">五</FONT></FONT></TH>'); 
document.writeln('<TH BGCOLOR="#ffff79"><font style="font-size:9pt;Color:White"><FONT COLOR="#000000">六</FONT></FONT></TH>'); 
document.writeln("</TR><TR>"); 
column = 0; 
for (i=0; i<startDay; i++) { 
document.writeln("\n<TD><FONT style=font-size:9pt> </FONT></TD>"); 
column++; 
} 

for (i=1; i<=nDays; i++) { 
if (i == thisDay) { 
document.writeln('</TD><td align="CENTER" bgcolor="#FFba40"><FONT style=font-size:9pt;Color:#000000><B>') 
} 
else { 
document.writeln('</TD><TD BGCOLOR="#FFFFFF" ALIGN="CENTER"><FONT style=font-size:9pt;font-family:Arial;font-weight:bold;Color:#007d00>'); 
} 
document.writeln(i); 
if (i == thisDay) document.writeln("</FONT></TD>") 
column++; 
if (column == 7) { 
document.writeln("<TR>"); 
column = 0; 
} 
} 
document.writeln('<TR><td colspan="7" align="CENTER" valign="TOP" bgcolor="#FFFF79"><form name="clock" onSubmit="0"><FONT style=font-size:9pt;Color:#000000>現在時間：<INPUT TYPE="Text" NAME="face" ALIGN="TOP"></FONT></TD></TR></TABLE></TD></TR></TABLE></FORM>'); 
} 
var timerID = null;
var timerRunning = false;
function stopclock ()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime()
{
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
var timeValue = ""
if(hours>=1 && hours <4)
{timeValue += ("凌晨")}
if(hours>=4 && hours<6)
{timeValue += ("清晨")}
if(hours>=6 && hours<9)
{timeValue += ("早上")}
if(hours>=9 && hours<12)
{timeValue += ("上午")}
if(hours>=12 && hours<13)
{timeValue += ("中午")}
if(hours>=13 && hours<18)
{timeValue += ("下午")}
if(hours>=18 && hours <19)
{timeValue += ("傍晚")}
if(hours>=19 && hours <24)
{timeValue += ("晚上")}
if(hours<1)
{timeValue += ("午夜")}
timeValue += ((hours > 12) ? hours - 12 : hours)
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
document.clock.face.value = timeValue
timerID = setTimeout("showtime()",1000)
timerRunning = true
}
function startclock ()
{
stopclock();
showtime();
}
</script>

步驟二 :
將以下程式碼拷貝 , 貼在您網頁原始檔 <body> 之內 . 
onLoad="startclock(); timerONE=window.setTimeout"

步驟三 :
將以下程式碼拷貝 , 在您網頁原始檔<body> 與 </body> 之間 , 選個好地方貼上 。
<script LANGUAGE="JavaScript" TYPE="text/javascript"> 
<!-- 
calendar(); 
//--> 
</script>

         http://home.pchome.com.tw/world/sunchaoyi/ 電子豬腦

範例 (二)  隨滑鼠飄浮的彩色繽紛字串程式碼

步驟一 :
將以下程式碼拷貝 , 貼在您網頁原始檔<head> 與 </head> 之間 .
 ( 紅色部份 , 修改您所要內容)
<STYLE>.spanstyle {
COLOR: #0066ff; FONT-FAMILY: Tahoma; FONT-SIZE: 10pt; FONT-WEIGHT: normal; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</STYLE>

<SCRIPT language=javascript>
var message="電 腦 工 作 室  !! ";
var x,y;
var step=12;
var flag=0;

message=message.split("");
var xpos=new Array();
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50;
}

var ypos=new Array();
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50;
}

function handlerMM(e) {
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX+20;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1;
}

function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;

for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style");
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;

for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
thisspan.color=Math.random() * 255 * 255 * 255 + Math.random() * 255 * 255 + Math.random() * 255;
}
}
}
</SCRIPT>

<SCRIPT language=javascript>
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}

if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
</SCRIPT>

<SCRIPT language=javascript>
function pageonload() {
makesnake();
window.setTimeout("pageonload();", 2);
}
</SCRIPT>


步驟二 :
將以下程式碼拷貝 , 貼在您網頁原始檔 <body> 之內 . 
onload=javascript:pageonload()

         http://home.pchome.com.tw/world/sunchaoyi/ 電子豬腦