作者ronkil ( NNNNNN )
看板Web_Design
標題Re: 這個時鐘是如何做的...
時間Thu Jan 15 02:00:35 2004
※ 引述《mission (認識新朋友~)》之銘言：
: 他的那個時鐘部份有用到java script跟FLASH的結合吧
: 因為我有試驗了一下
: 當有*.SWF的檔案的時候那個時鐘才會出現
: 所以應該是跟FLASH也有關係~
: 至於怎麼做的.....這就要請問更厲害的高手了
: ※ 引述《kellyet (啦啦隊剋星~~哇哈哈)》之銘言：
: : http://www.pcboy.com.tw/~longyes/allpage.htm
: : 左上方有個時鐘...請問各位那時怎麼做的阿?
沒用到flash
只用到java script跟css(?)的定位
把下面的原始碼複製並自己做一張150*150的時鐘背景圖命為1.jpg跟html檔放在一起
==============
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>main</title>
<!------------ 插入控制碼區段開始 ------------>
<script language="JavaScript">
<!-- Beginning of JavaScript -
// CREDITS:
// SwissWatch Alpha Y2 by Urs Dudli and Peter Gehrig
// Copyright (c) 1999 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at
http://www.24fun.ch.
//
[email protected]
// 12/22/1999
// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a link to
http://www.24fun.ch on the webpage
// where SwissWatch Alpha Y2 is running.
var now
var second
var minute
var hour
var degreeSecond
var degreeMinute
var degreeHour
var timer
var stepDegree=6
var stepDegreeHour=30
function checkTime() {
if (document.all) {
now=new Date()
second=now.getSeconds()
minute=now.getMinutes()
hour=now.getHours()
if (hour>=12) {hour=hour-12}
spinIt()
timer=setTimeout("checkTime()",200)
}
}
function spinIt() {
window.status=hour
secondObj.SetIdentity()
minuteObj.SetIdentity()
hourObj.SetIdentity()
degreeSecond=180+stepDegree*second
degreeMinute=180+stepDegree*minute
degreeHour=180+stepDegreeHour*hour+(Math.floor(stepDegree*minute/12))
secondObj.Rotate(0,0,degreeSecond)
minuteObj.Rotate(0,0,degreeMinute)
hourObj.Rotate(0,0,degreeHour)
}
// - End of JavaScript - -->
</script>
<!------------ 插入控制碼區段結束 ------------>
<base target="main">
</head>
<body onLoad="checkTime()" topmargin="15" leftmargin="22" >
<DIV style="position:absolute;top:40px;left:40px">
<DIV style="position: absolute; top: -20; left: -20; width: 200; height: 731">
<img border="0" src="1.jpg" width="150" height="150">
</DIV>
<DIV style="position: absolute; top: 2; left: 25; width: 55; height: 26">
<OBJECT ID="secondObj" STYLE="width:100px;height:102px" CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"
width="14" height="14">
<PARAM NAME="HighQuality" VALUE="1">
<PARAM NAME="Line0001" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0002" VALUE="SetLineColor(80,20,20)">
<PARAM NAME="Line0003" VALUE="SetFillColor(80,20,20)">
<PARAM NAME="Line0004" VALUE="Rect(0,0,1,32)">
</OBJECT>
</DIV>
<DIV style="position: absolute; top: 2; left: 25; width: 259; height: 229">
<OBJECT ID="minuteObj" STYLE="width:100px;height:102px" CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"
width="14" height="14">
<PARAM NAME="HighQuality" VALUE="1">
<PARAM NAME="Line0001" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0002" VALUE="SetLineColor(8e,46,00)">
<PARAM NAME="Line0003" VALUE="SetFillColor(8e,46,00)">
<PARAM NAME="Line0004" VALUE="Rect(0,0,1,30)">
</OBJECT>
</DIV>
<DIV style="position: absolute; top: 2; left: 25; width: 48; height: 26">
<OBJECT ID="hourObj" STYLE="width:100px;height:102px" CLASSID="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6"
width="14" height="14">
<PARAM NAME="HighQuality" VALUE="1">
<PARAM NAME="Line0001" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0002" VALUE="SetLineColor(50,50,50)">
<PARAM NAME="Line0003" VALUE="SetFillColor(50,50,50)">
<PARAM NAME="Line0004" VALUE="Rect(0,0,1,16)">
</OBJECT>
</DIV>
</DIV>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 210.192.230.47