基于JavaScript的電子時(shí)鐘效果實(shí)現(xiàn)

2? 數(shù)字時(shí)鐘效果概述

時(shí)鐘獲取到當(dāng)前時(shí)間后，以時(shí)、分和秒的順序從左向右以此顯示，數(shù)字為兩位數(shù)，則正常顯示，數(shù)字為十以?xún)?nèi)的數(shù)字時(shí)，則十位數(shù)顯示0，個(gè)位數(shù)顯示從當(dāng)前時(shí)間獲取到的數(shù)字。增加定時(shí)器，設(shè)置每隔一秒調(diào)用一次函數(shù)，保證每一秒鐘都能獲取到新的時(shí)間，從而不斷的呈現(xiàn)出正確時(shí)間。小時(shí)數(shù)與分鐘數(shù)之間，以及分鐘數(shù)與秒數(shù)之間有上下兩個(gè)圓點(diǎn)，以呈現(xiàn)完整的數(shù)字時(shí)鐘視覺(jué)效果。時(shí)鐘下方的文本框中可輸入計(jì)劃事項(xiàng)，利用數(shù)字空間設(shè)定時(shí)間，點(diǎn)擊按鈕后可將設(shè)定的事件內(nèi)容及發(fā)生時(shí)間加入到列表中，使得計(jì)劃在列表中依次顯示。

3? 編程語(yǔ)言介紹

3.1? HTML以及HTML5

HTML為超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language）。是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。HTML作為一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計(jì)令人賞心悅目的網(wǎng)頁(yè)、網(wǎng)頁(yè)應(yīng)用程序以及移動(dòng)應(yīng)用程序的用戶(hù)界面。網(wǎng)頁(yè)瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁(yè)。

HTML5是HTML最新的修訂版本，由萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少網(wǎng)頁(yè)瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)，并且提供更多能有效加強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。本文中所采用的是HTML5中的canvas畫(huà)布技術(shù)，canvas由HTML代碼中定義的可繪制區(qū)域組成，具有高度和寬度屬性。JavaScript代碼可以通過(guò)與其他常見(jiàn)2D API類(lèi)似的全套繪圖功能訪(fǎng)問(wèn)該區(qū)域，從而允許動(dòng)態(tài)生成的圖形。畫(huà)布的一些預(yù)期用途包括構(gòu)建圖形，動(dòng)畫(huà)，游戲和圖像合成。

3.2? CSS技術(shù)

CSS為層疊樣式表（Cascading Style Sheets）。是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

3.3? JavaScript技術(shù)

JavaScript，通?？s寫(xiě)為JS，是一種高級(jí)的，解釋執(zhí)行的編程語(yǔ)言。JavaScript是一門(mén)基于原型、函數(shù)先行的語(yǔ)言，是一門(mén)多范式的語(yǔ)言，它支持面向?qū)ο缶幊?，命令式編程，以及函?shù)式編程。它提供語(yǔ)法來(lái)操控文本、數(shù)組、日期以及正則表達(dá)式等，不支持I/O，比如網(wǎng)絡(luò)、存儲(chǔ)和圖形等，但這些都可以由它的宿主環(huán)境提供支。JavaScript還是一種輕量級(jí)的編程語(yǔ)言，可插入HTML頁(yè)面的編程代碼，并且插入 HTML 頁(yè)面后。JavaScript還可作為一種直譯式腳本語(yǔ)言，是動(dòng)態(tài)類(lèi)型、弱類(lèi)型、基于原型的語(yǔ)言，內(nèi)置支持類(lèi)型。用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。JavaScript是一種屬于網(wǎng)絡(luò)的腳本語(yǔ)言，已經(jīng)被廣泛用于Web應(yīng)用開(kāi)發(fā)，常用來(lái)為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能，為用戶(hù)提供更流暢美觀(guān)的瀏覽效果。本文所用到的JavaScript腳本是通過(guò)嵌入在HTML中來(lái)實(shí)現(xiàn)自身的功能。

4? 數(shù)字時(shí)鐘具體實(shí)現(xiàn)

4.1? HTML布局

5? 結(jié)語(yǔ)

本文在HTML與CSS的基礎(chǔ)上，利用JavaScript腳本語(yǔ)言實(shí)現(xiàn)動(dòng)態(tài)的數(shù)字時(shí)鐘效果。添加HTML5中的canvas畫(huà)布元素，在界面中增加繪圖效果。使用JavaScript中的定時(shí)器方法來(lái)控制數(shù)字時(shí)鐘的變化，定時(shí)器中的函數(shù)用來(lái)設(shè)置動(dòng)態(tài)獲取當(dāng)前時(shí)間，保證了時(shí)鐘的實(shí)時(shí)更新。

從面向?qū)ο蟮慕嵌葋?lái)看，JavaScript是一種純面向?qū)ο蟮恼Z(yǔ)言，甚至函數(shù)本身也是對(duì)象;但同時(shí)又具有一些其特有的語(yǔ)言特性，如動(dòng)態(tài)類(lèi)型、無(wú)類(lèi)動(dòng)態(tài)對(duì)象、原型繼承、閉包、函數(shù)式編程等。作為腳本語(yǔ)言廣泛應(yīng)用于web開(kāi)發(fā)，JavaScript在網(wǎng)頁(yè)中添各式各樣的動(dòng)態(tài)效果，從而在用戶(hù)體驗(yàn)度的舒適性和流暢度方面進(jìn)行很大的提升，并且在訪(fǎng)問(wèn)交互性中有更多動(dòng)態(tài)效果。

各大網(wǎng)站以及基于B/S模式的瀏覽器窗口的前端實(shí)現(xiàn)都少不了HTML、CSS以及JavaScript這三大件的支持。HTML搭建前端骨架，CSS用于頁(yè)面的初步渲染，而JavaScript則實(shí)現(xiàn)用戶(hù)的動(dòng)態(tài)交互與效果實(shí)現(xiàn)。在JavaScript多年發(fā)展的狀態(tài)下，近年來(lái)有越來(lái)越多的前端技術(shù)層出不窮，如YUI3、Kissy以及Frozen UI等眾多UI框架，react、vue、Angular等技術(shù)框架以及庫(kù)等。迭代更新的技術(shù)能滿(mǎn)足和提升越來(lái)越多用戶(hù)的需求，前端發(fā)展也在此過(guò)程中不斷壯大。

參考文獻(xiàn)

[1] 馬洪亮， 王偉， 韓臻. 混淆惡意JavaScript代碼的檢測(cè)與反混淆方法研究[J]. 計(jì)算機(jī)學(xué)報(bào)， 2017， 40（07）： 1699-1713.

[2] 臧進(jìn)進(jìn)， 鄂海紅. 基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁(yè)生成系統(tǒng)研究與實(shí)現(xiàn)[J]. 軟件， 2015， 36（6）： 37-41.

[3] 周芷儀， 陳婷. 淺談網(wǎng)頁(yè)中實(shí)現(xiàn)圖片輪播圖效果的方法[J].軟件， 2018， 39（10）： 187-191.

[4] 榮艷冬. 以崗位需求為導(dǎo)向的Javascript課程構(gòu)建[J]. 軟件， 2015， 36（06）： 18-20.

[5] 李軼. 基于JavaScript的面向?qū)ο蟪绦蛟O(shè)計(jì)研究[J].江漢大學(xué)學(xué)報(bào)（自然科學(xué)版）， 2010， 38（03）： 52-56.

[6] 鄭俊生， 姜敏. 一種基于Div+CSS+JavaScript的網(wǎng)頁(yè)布局特效研究[J]. 電腦知識(shí)與技術(shù)， 2008（17）： 1556-1558.

[7] 閆志英. 淺析Web前端開(kāi)發(fā)技術(shù)[J]. 無(wú)線(xiàn)互聯(lián)科技， 2016（02）： 47-48.

[8] 陳月， 秦福建. Web前端開(kāi)發(fā)技術(shù)以及優(yōu)化方向探究[J]. 信息與電腦（理論版）， 2016（04）： 35+37.

[9] Jeremy Keith， Jeffrey Sambells. JavaScript DOM編程藝術(shù)[M]. 北京： 人民郵電出版社， 2011： 1-3.