劉世靖 謝慶勝

摘要：政府網(wǎng)站頁面變灰是在一些全國性或世界性哀悼紀(jì)念事件后進(jìn)行的一種網(wǎng)絡(luò)紀(jì)念活動。精確控制時間，使網(wǎng)站及時變換灰度具有很強的積極意義。研究者通過應(yīng)用JavaScript下的時間戳函數(shù)，提前設(shè)定開始和結(jié)束時間，自動完成政府網(wǎng)站的灰度轉(zhuǎn)變，具有較強的借鑒價值。

關(guān)鍵詞：哀悼紀(jì)念;政府網(wǎng)站;灰度轉(zhuǎn)變;時間戳函數(shù)

中圖分類號：TP311? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2022）19-0031-02

1 引言

互聯(lián)網(wǎng)的發(fā)展日新月異，網(wǎng)民對網(wǎng)站的期待值越來越高。瀏覽者不僅重視他們關(guān)注的信息內(nèi)容，對網(wǎng)頁制作外觀、呈現(xiàn)方式等都有了更高的要求，希望有更好的視覺體驗。一些全國性或世界性哀悼紀(jì)念事件后，網(wǎng)站版面的色調(diào)需要瞬間變成灰色，以表達(dá)一種哀悼與紀(jì)念。政府網(wǎng)站作為眾多網(wǎng)站的標(biāo)桿與榜樣，一舉一動都代表著一種方向和態(tài)度，政府網(wǎng)站開發(fā)制作人員可以使用更快捷的手段，在有重大事件發(fā)生時迅速使網(wǎng)頁主界面在客戶端呈現(xiàn)出灰色調(diào)，更好地樹立政府網(wǎng)站的形象，發(fā)揮其表率作用。

2 開發(fā)環(huán)境簡述

2.1 JavaScript簡介

作為網(wǎng)絡(luò)腳本語言JavaScript被廣泛用于Web開發(fā)制作，可以用它嵌入動態(tài)文本于HTML頁面，為網(wǎng)頁添加各種動態(tài)功能，達(dá)到制作者期待的效果[1]。在網(wǎng)頁設(shè)計時，各種主要功能的實現(xiàn)，比如網(wǎng)頁局部畫面的滾動、翻轉(zhuǎn)，以及信息的互動、傳遞都可以借助JavaScript的作用。這種腳本語言語法簡潔，運用靈活，添加刪除方便，在HTML語言編寫中也容易被調(diào)用。

2.2 JavaScript嵌入方式

嵌入方式可以采用腳本塊的方式：暴露在腳本塊中的程序，在頁面打開的時候執(zhí)行，并且遵守自上而下的順序依次逐行執(zhí)行[2]。JavaScript腳本塊可以出現(xiàn)在任何位置，并且可以出現(xiàn)多次。

也可以采用引入外部的腳本文件，提前寫好的腳本文件可以引入多次。如下：

3 基于時間戳函數(shù)的灰度變換

3.1 灰度變換的基本原理及函數(shù)

讓網(wǎng)頁灰度進(jìn)行轉(zhuǎn)變，要么調(diào)用CSS樣式的filter樣式，將模糊或顏色偏移等圖形效果應(yīng)用于元素，要么采用濾鏡，用于調(diào)整圖像，背景和邊框的渲染。CSS標(biāo)準(zhǔn)里包含了一些已實現(xiàn)預(yù)定義效果的函數(shù)，也可以提前自寫函數(shù)，使用時調(diào)用就可以了。

3.2 Javascript時間戳函數(shù)

眾所周知，每個用戶計算機上的時間是可以隨意地改變的，這就意味著各個用戶本地機上的時間產(chǎn)生的時間戳不可信賴，就需要有一個權(quán)威機構(gòu)提供時間戳服務(wù)，由這個權(quán)威第三方提供時間標(biāo)準(zhǔn)，由于該機構(gòu)時間標(biāo)準(zhǔn)的權(quán)威性及相關(guān)技術(shù)保全性，隨時可以提供良好的證據(jù)，為特定電子數(shù)據(jù)提供一個綁定的時間戳，能有力地證明該電子數(shù)據(jù)的產(chǎn)生時間，并且該時間未被修改。這是時間戳系統(tǒng)的基本工作原理[3]。這里所用的時間戳（timestamp）是指從格林威治時間1970年01月01日00時00分00秒（UTC/GMT的午夜，即北京時間1970年01月01日08時00分00秒）起至現(xiàn)在的總秒數(shù)。時間戳通常是一個字符序列，唯一地標(biāo)識某一刻的時間[4]。除了作為有效的證據(jù)外，從時間戳技術(shù)延伸出來的時間戳函數(shù)可用于各種同步操作，例如標(biāo)記特殊事件發(fā)生的準(zhǔn)確日期和時間。

3.3 編程思路

在JavaScript環(huán)境中，應(yīng)用時間戳精確控制時間，發(fā)現(xiàn)條件滿足，便自動喚醒灰度轉(zhuǎn)換函數(shù)。本程序編寫中，首先構(gòu)建正則表達(dá)式，利用時間戳函數(shù)讀取對應(yīng)格式的時間參數(shù)，與提前預(yù)設(shè)的時間段進(jìn)行對比，同時判斷客戶端的瀏覽器內(nèi)核是否為當(dāng)前主流瀏覽器，比如是IE10還是IE11，如果滿足條件，則調(diào)用預(yù)設(shè)的灰度轉(zhuǎn)變函數(shù)，針對不同的瀏覽器進(jìn)行對應(yīng)的灰度轉(zhuǎn)變。

3.4 關(guān)鍵部位程序代碼

……

……

……

<！--Css on-->

<！--Css end-->

……

……

var grayscale = （function（）{

var config = {

colorProps： ['color'，'backgroundColor'，'borderBottomColor'，'borderTopColor'，'borderLeftColor'，'borderRightColor'，'backgroundImage']，

externalImageHandler ： {

/* Grayscaling externally hosted images does not work

- Use these functions to handle those images as you so desire */

}

};

return init;

}）（）;

……

/body>

……

3.5 運行后效果

4 總結(jié)

HTML、CSS、JavaScript三大技能的融合，大大豐富了網(wǎng)頁設(shè)計樣式，提升用戶的體驗感[5]。同時，通過優(yōu)化前端開發(fā)技術(shù)，網(wǎng)站灰度轉(zhuǎn)變的方法更多，提前設(shè)定時間，用時間戳函數(shù)調(diào)用灰度轉(zhuǎn)變函數(shù)，達(dá)到使網(wǎng)頁定時轉(zhuǎn)變或取消灰度的效果，這樣可高效利用代碼，提高代碼利用率，讓網(wǎng)頁的功能更有針對性，界面更加人性化。

參考文獻(xiàn)：

[1] 張琳.HTML5與CSS3在網(wǎng)頁視覺元素中的應(yīng)用研究[J].九江學(xué)院學(xué)報（自然科學(xué)版），2018，33（1）：72-73，85.

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

[3] 王建軍，田有旺，林志剛.時間戳的電子證據(jù)作用[J].科學(xué)之友，2010（13）：155-156.

[4] 劉華.可信時間戳——讓時間作證[J].中國數(shù)字醫(yī)學(xué)，2011，6（6）：107-108.

[5] 孫浩然，鄭童.網(wǎng)頁設(shè)計在視覺傳達(dá)設(shè)計中表現(xiàn)的形式[J].西部皮革，2020，42（3）：92.

收稿日期：2022-03-26

作者簡介：劉世靖（1976—），男，河南洛陽人，工程師，學(xué)士，研究方向為信息網(wǎng)絡(luò)、網(wǎng)站安全、數(shù)據(jù)管理;謝慶勝（1974—），男，安徽懷寧人，高級工程師，學(xué)士，研究方向為網(wǎng)站安全、信息網(wǎng)絡(luò)、公共服務(wù)。