乙個簡單的多背景時間顯示網頁

2022-04-04 12:27:56 字數 2779 閱讀 1314

前段時間突然想到做乙個顯示時間的網頁,雖然功能十分簡單,但是做出來感覺效果還是很不錯的。

**十分簡單,通過date()方法獲取時間並分別獲取具體的年月日時分秒,為了格式的統一在顯示的時候需要判斷時間位數,即當時間位數小於10時在前面加"0",這樣能有效避免顯示時出現的跳動問題。

同時我覺得單一的背景比較單調,所以新增了更多的背景並可以通過點選按鈕來切換主題和實現顯示的顏色,當然實現的方法也是很笨拙的,在下面的**裡面就可以看出來。當然以後深入學了js和jquery之後,還可以進一步新增效果。

下面是網頁的效果圖:

【下面是網頁的**】

1

doctype html

>

2<

html

lang

="en"

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>time

title

>

6head

>

7<

style

>

8body

12#main

22#footer

33.bg36a

42#a1

43#a2

44#a3

45#a4

46#a5

47#a6

48style

>

4950

<

body

>

51<

center

>

52<

div

id="main"

>

53<

span

id="day"

>

span

><

br>

54<

span

id="time"

>

span

>

55<

div>

56<

div

class

="bg"

>

57<

a id

="a1"

href

="#"

>

a>

58<

a id

="a2"

href

="#"

>

a>

59<

a id

="a3"

href

="#"

>

a>

60<

a id

="a4"

href

="#"

>

a>

61<

a id

="a5"

href

="#"

>

a>

62<

a id

="a6"

href

="#"

>

a>

63div

>

64center

>

65<

div

id="footer"

div>

66body

>

6768

<

script

>

69//

時間顯示函式

70function

clock()

85//

設定函式執行的時間間隔,效果即每秒鐘秒針跳動一次

86var

int=

setinterval(clock,

1000

);87

88/*

設定小圖示按鈕效果,即點選圖示切換背景圖,這裡應該有更好的方法,

89即通過this傳參來判斷a標籤並設定相應的,這樣可以大大減少**量。

90另外也可以在a標籤裡面設定click動作來執行函式.

91在點選圖示是也可以同時修改文字字型,這裡就不再新增了

*/92

varmain

=document.getelementbyid(

'main');

93vara =

document.getelementsbytagname('a

');94a[

0].onclick

=function

()99a[1

].onclick

=function

()104a[2

].onclick

=function

()109a[3

].onclick

=function

()114a[4

].onclick

=function

()119a[5

].onclick

=function

()124

script

>

125html

>

乙個簡單的JAVA網頁爬蟲

引用內容 public class access implements runnable catch exception e try catch malformedurlexception e catch ioexception e new thread this start public void...

乙個支援多屏顯示的程式

最近要用到多屏顯示。多屏顯示的原理其實很好理解,就拿橫向擴充套件來說 計算機把桌面的 寬度擴充套件成了 w1 螢幕1的寬度 w2 螢幕2的寬度 當乙個視窗的起始橫座標 w1,則 他就被顯示在第二個螢幕上了。qt的說明文件中用一張圖闡述了這個情況 返回的 qdesktopwidget 儲存著當前桌面的...

訪問乙個網頁的過程(簡單版)

例如訪問www.qq.com,通過http協議傳送請求資料 解析url 統一資源定位符 網域名稱解析 1.首先客戶端訪問本地dns,查詢本地dns中是否有快取。如果有就直接返回網域名稱對應的ip位址。2.如果沒有 像根網域名稱伺服器查詢,返回.com網域名稱伺服器的ip位址 3.在.com中查詢qq...