時間戳在政府網站灰度自動轉變中的應用研究

劉世靖 謝慶勝

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

關鍵詞：哀悼紀念;政府網站;灰度轉變;時間戳函數

中圖分類號：TP311? ? ? 文獻標識碼：A

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

1 引言

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

2 開發環境簡述

2.1 JavaScript簡介

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

2.2 JavaScript嵌入方式

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

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

3 基于時間戳函數的灰度變換

3.1 灰度變換的基本原理及函數

讓網頁灰度進行轉變，要么調用CSS樣式的filter樣式，將模糊或顏色偏移等圖形效果應用于元素，要么采用濾鏡，用于調整圖像，背景和邊框的渲染。CSS標準里包含了一些已實現預定義效果的函數，也可以提前自寫函數，使用時調用就可以了。

3.2 Javascript時間戳函數

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

3.3 編程思路

在JavaScript環境中，應用時間戳精確控制時間，發現條件滿足，便自動喚醒灰度轉換函數。本程序編寫中，首先構建正則表達式，利用時間戳函數讀取對應格式的時間參數，與提前預設的時間段進行對比，同時判斷客戶端的瀏覽器內核是否為當前主流瀏覽器，比如是IE10還是IE11，如果滿足條件，則調用預設的灰度轉變函數，針對不同的瀏覽器進行對應的灰度轉變。

3.4 關鍵部位程序代碼

……

……

……

<！--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 總結

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

參考文獻：

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

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

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

[4] 劉華.可信時間戳——讓時間作證[J].中國數字醫學，2011，6（6）：107-108.

[5] 孫浩然，鄭童.網頁設計在視覺傳達設計中表現的形式[J].西部皮革，2020，42（3）：92.

收稿日期：2022-03-26

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