作者laechan (小太保)
看板mud_sanc
標題[分享] HTML 與 ASP--1
時間Fri Apr 20 14:51:38 2012
我最近在公司架了一個網站，其分頁架構如下
<html>
<title>我的網站</title>
<Meta Http-Equiv="Content-Type" Content="text/html; Charset=big5">
<frameset rows=50,* border=0>
<frame src="ontop.asp" scrolling="no" MARGINHEIGHT="0" MARGINWIDTH="0">
<frameset cols=180,*,150 border=0>
<frame src="left.asp">
<frameset rows=80,* border=0>
<frame src="center1.asp">
<frame src="notice.asp" name="show">
</frameset>
<frameset rows=80,* border=0>
<frame src="right1.asp">
<frame src="right2.htm">
</frameset>
</frameset>
</frameset>
</html>
上面的分頁開啟後會很類似 facebook 的分頁架構，也就是
最上面會有一條藍色橫槓(ontop.asp)，然後底下從左到右分
三頁(180,*,150那裡)，左邊是 left.asp，右邊的是 right1.asp
跟 right2.htm，然後中間是 center1.asp 及 show區(name="show")
它預設載入 notice.asp(即最新公告)
<frame src="ontop.asp" scrolling="no" MARGINHEIGHT="0" MARGINWIDTH="0">
這行的意思是該分頁「不要有右邊捲軸」，然後分頁的內容
離邊界的距離為「最小距離」。
今天主要是介紹 ontop.asp, bgcolor=#336699 會接近 facebook
那種藍底色。
<html>
<body bgcolor=#336699>
<script>
載入該分頁時會跳出一個小視窗顯示底下訊息
function welcome_box( )
{
alert("歡迎光臨 ^_^");
}
循環時間顯示函數，它每隔一秒就會呼叫自己一次
底下會顯示 2012年04月20日 14:30:00 而且會每隔一秒變一次
setTimeout 函數就是讓你控制你要在多久時間以後呼叫啥函數
類似聖殿的 call_out，1000 指的是一秒
我用的是最笨的方法
function countMin( )
{
RN = new Date();
n = RN.getDay();
if(n==1)
document.displayMin.displayBox.value=RN.getFullYear()+"年"+
(RN.getMonth()+1)+"月"+
RN.getDate()+"日(星期一) "+
(RN.getHours()<10 ? "0"+RN.getHours() : RN.getHours())+":"+
(RN.getMinutes()<10 ? "0"+RN.getMinutes() : RN.getMinutes())+":"+
(RN.getSeconds()<10 ? "0"+RN.getSeconds() : RN.getSeconds());
else if(n==2)
.
.
setTimeout("countMin( )",1000)
}
</script>
讓網頁強制以 BIG5 碼顯示(避免亂碼)
<Meta Http-Equiv="Content-Type" Content="text/html; Charset=big5">
<table>
<tr>
第一個欄位區，顯示網頁名稱，底下是 SANCBOOK 為例，類似
臉書左上角的立可白字樣的 FACEBOOK 按鈕
該欄位寬度
<th width=200>
<b>
<tt>
顯示字體 字的顏色 字的大小
<font face='arial black' color=white size=4>
按下去連回首頁 該連結的字體為白色,樣式為none
這樣就不會有底線，游標移到該連結處也
不會產生任何變化，就可模擬成按鈕
<a href="index.htm" STYLE="color:white;text-decoration:none">SANCBOOK</a>
</font>
</tt>
</b>
</th>
<th width=20></th>
第二個主要欄位我設了一個跑馬燈，寬度是 340，字體是白色
<th width=340>
<font color=white>
跑馬燈的行進速度
<marquee scrollAmount=5>2012.04.12 built by laechan</marquee>
</font>
</th>
<th width=60></th>
第三個欄位就是顯示日期及時鐘，靠右對齊
<th width=30% align=right>
<font color=white size=2><BR>
給這個 form(物件) 一個 name 叫 displayMin
<form name=displayMin>
給這個 form 一個 text 子物件，name 是 displayBox
長度是 40，初始值是 abc(呼叫 countMin() 後就會變更)
其型式是"無框、背景為臉書藍、字顏色為白、大小為 15
這樣 javascript 就可以呼叫這個物件並給值，其給法就是
document.displayMin.displayBox.value = 要給的值
<input type='text' size=40 name='displayBox' value='abc'
style='border: none;background: #336699; color: white; font-size: 15'>
</form>
</font>
</th>
第四個欄位是一個訪客計數器
它會去抓 visit_count.txt 檔，其內容類似底下..
15,10.0.0.1
我的簡易做法就是用最後一次計數時的 ip 做為基本判斷
這樣就算某人一直在那裡按重新整理或載入，計數也不會有變化
<th width=22%>
<font size=3 color=white>您是第
<%
調用一個檔案處理物件的語法
set fs=Server.CreateObject("Scripting.FileSystemObject")
開啟一個檔案專門用來讀的，值 = 1 即 ForRead
set txtfiles=fs.OpenTextFile(Server.MapPath("visit_count.txt"),1)
然後令 tmp_str = 該檔案的全部內容, readall 即讀檔
If Not txtfiles.atEndOfStream Then
tmp_str = txtfiles.readall
end if
txtfiles.close
然後讀取連線端的 ip 位址
ip = Request.ServerVariables("REMOTE_ADDR")
這時 tmps(0) = 網站被造訪幾次, tmps(1) = 上一次造訪者的 ip
tmps = split(tmp_str,",")
這個 if 主要是檔案存不存在的意思
其實可用 if fs.FileExists(Server.MapPath("visit_count.txt")) then
去替代，但我在寫這個之前並不知道有這好東西...
if CInt(UBound(tmps)) <> 1 then
s = Clng("0" & tmp_str)
s = s+1
set txtfiles=fs.createtextfile(server.mappath("visit_count.txt"),true)
寫進一行東西, 內容是 造訪人數,ip 這樣
writeline 的意思就是自己會在行尾帶分行符號 \n
txtfiles.writeline s & "," & ip
txtfiles.close
else
s = CLng("0" & tmps(0))
if ip <> replace(tmps(1),vbcrlf,"") then
s = s+1
set txtfiles=fs.createtextfile(server.mappath("visit_count.txt"),true)
txtfiles.writeline s & "," & ip
txtfiles.close
end if
end if
這裡就是顯示的格式，比方造訪人數 10 人
就顯示 000010 這樣
if s<10 then
response.write "00000" & s
elseif s<100 then
response.write "0000" & s
elseif s<1000 then
response.write "000" & s
elseif s<10000 then
response.write "00" & s
elseif s<100000 then
response.write "0" & s
else
response.write s
end if
%>
位造訪者</font>
</th>
</tr>
</table>
<script>
網頁剛被載入時先呼叫 countMin，這樣時鐘就會開始運作
countMin( )
然後再呼叫 welcome_box，玩家就會看到一個小視窗
welcome_box( )
</script>
</body>
</html>
模擬畫面在底下，它就很像臉書上面那一條
SANCBOOK 按下去就回到首頁這樣
http://sanclaechan.myweb.hinet.net/ontop.jpg
--
※ 發信站: 批踢踢實業坊(ptt.cc)
※ 編輯: laechan 來自: 223.141.188.89 (04/20 15:21)