/* syntax highlight */ /* end of syntax highlight */

2011年5月25日 星期三

[PHP][JavaScript][CSS] 倒數計時之範例

Bookmark and Share

觀看範例一 :http://ideastar.me/example/time.php

image

觀看範例二:http://ideastar.me/example/time2.php

image

研究了一下如何製作倒數計時之範例

以第一個範例來說,主要有分以下幾個階段

 

一、標頭

標頭的部份主要設定一些基本資料,尚不是我們範例的主體,主要可以將 css 寫在這裡

 

二、JavaScript

再來,是JavaScript 的部份,其實也算在標頭當中,但是內容較多,我把它獨立出來,

相關內容我都有寫在註解裡面,大家可以直接觀看註解來了解程式內容

特別要強調的是 setTimeout("clock()",1000) 這句是指每一千毫秒 (1秒) 就更新一次,如此才能達到看起來秒數有不斷變化的感覺

 

三、主體

主體是前端顯示的部份,主要就是用 table 把內容包起來,並設定相關的 <div> 以供 javascipt 算出來的結果顯示,例如 <div id="day"></div> 就可以在 javascript 利用 day.innerHTML = “數字” 來做即時顯示,而 onload="clock()” 則是一開始就進入 clock() 這個函式當中,取得剛開始的時間資料

範例二則是同樣的邏輯,只是套在 <form> 當中的使用方式

也增加了不同的 CSS 花樣,供各位參考 : )

 

觀看範例一 :http://ideastar.me/example/time.php【範例下載 (.rar檔) 】

觀看範例二:http://ideastar.me/example/time2.php【範例下載 (.rar檔)】

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...