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

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

3? 編程語言介紹

3.1? HTML以及HTML5

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

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

3.2? CSS技術(shù)

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

3.3? JavaScript技術(shù)

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

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

4.1? HTML布局

5? 結(jié)語

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

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

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

參考文獻(xiàn)

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

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

[3] 周芷儀， 陳婷. 淺談網(wǎng)頁中實(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)頁布局特效研究[J]. 電腦知識與技術(shù)， 2008（17）： 1556-1558.

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

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

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