作者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)