劉世靖 謝慶勝

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

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

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

文章編號(hào)：1009-3044（2022）19-0031-02

1 引言

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

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

2.1 JavaScript簡(jiǎn)介

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

2.2 JavaScript嵌入方式

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

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

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

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

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

3.2 Javascript時(shí)間戳函數(shù)

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

3.3 編程思路

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

4 總結(jié)

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

參考文獻(xiàn)：

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

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

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

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

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

收稿日期：2022-03-26

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