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

【如果覺得文章寫的好的話希望能按一下讚或分享喔】

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

image

觀看範例二:http://design2u.me/example/time/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://design2u.me/example/time/time.php │【範例下載 (.rar檔) 】

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

Related Posts Plugin for WordPress, Blogger...
【如果覺得文章寫的好的話希望能按一下讚或分享喔】

彭其捷

想要做出很棒的產品,所以我寫程式,也研究介面 (UI) 與使用者經驗 (UX),並思考管理的法則。

【Profile】http://about.me/divaka

twitter facebookgooglepluslinkedinbloggertumblrflickryoutubedribbblerssemail


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/63/7692663/html/blog/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273