借助于JavaScript window對象所提供的計時觸發函數setInterval可以實現前端動畫效果的設計與制作 。本例主要以setInterval方法為基礎介紹簡單數字時鐘的開發實例 。
所需素材本數字時鐘設計實現格式為00：00：00類型結構的數字時鐘 ， 因此需要準備時鐘顯示相關數字及間隔符號的素材 。最終實現效果如下所示：
數字時鐘實現效果
設計實現效果如上圖 ， 因此需要準備0-9數字與”:”字符 ， 素材設計較為簡單直接采用PhotoShop進行設計最終導出保存為png格式圖片 ， 素材圖片展示如下：
數字及間隔符素材
設計思路動態數字時鐘整體設計按照顯示格式要求 ， 使用div展示每一位數字或者間隔符 。在計時周期內調用處理函數獲取系統當前的時間 ， 并根據當前時間計算出每一個div中應當展示的內容 ， 最終實現時鐘的動態效果 。主要設計階段如下：
1、整體HTML頁面布局設置
這個階段主要完成時鐘構成的8個DIV的布局設計 ， 為下一步顯示時鐘提供基礎 。本例DIV整體布局設計樣式效果如下：
時鐘布局層
時鐘基本布局層描述如上圖 ， 為展示我們將其背景設置了不同顏色 ， 后期在8個DIV塊中我們用于顯示時鐘相關數字及字符 。
2、定義ID選擇器實現DIV背景設置
本例中數字時鐘數字與字符通過設置為DIV層的背景用于實現展示 。本例使用ID選擇器用于實現0-9數字與間隔符的展示 。由于我們數字時鐘相關素材都在統一圖片中 ， 因此我們在設置展示數字與字符的過程中需要對每一個樣式中的背景截取位置通過background-position屬性進行精確控制 。完成9個數字與一個分隔符樣式定義之后 ， 可以將8個時鐘顯示DIV設置對應的ID標簽 ， 實現內容展示 ， 如我們將以上時鐘布局DIV標簽全部設置為展示數字0的ID標簽 ， 效果如下：
ID標簽控制顯示內容
ID標簽控制DIV顯示內容如上圖所示 ， 這樣我們就可以分別設置8個DIV層的ID標簽值實現內容的改變 ， 如我們使用8對應的ID設置 ， 則全部顯示數字8 ， 效果如下：
ID標簽值對應數字8顯示效果
在實際實現中由于8個DIV結構是固定的 ， 包含了兩個分割符號 ， 這部分可以直接設置為分割符號 ， 如下所示：
帶有分割符號的8位顯示效果
3、時間獲取與處理
該數字時鐘時間通過JavaScript提供的Date對象的實例化 ， 獲取本地的時間 。然后從時間數據中分別讀取出小時、分鐘、秒 。所使用函數主要包括以下函數：
getHours();//用于獲取時間對象中的小時數 ， 取值范圍0-23getMinutes();//用于獲取時間對象中的分鐘數 ， 取值范圍0-59getSeconds();//用于獲取時間對象中的秒數 ， 取值范圍0-59在獲取系統時間對應的小時、分鐘、秒之后需要確定各部分其中的每一位 ， 由于我們時鐘格式是固定的 ， 每一部分均為兩位 ， 因此需要對10以內的數字進行判斷 ， 如小于10則需要單獨補充最高位的0 ， 如果大于等于10 ， 則需要取出其中的十位與個位 。個位取值較為簡單用獲取的值除以10取余數即為個位 ， 十位數字將獲取值除以10之后向下取值則可獲取10位數字 。如數字35 ， 十位計算可得3 ， 個位余數為5 。
推薦閱讀
- 5000元炒原油賺了十萬 做原油把錢虧光了想死
- 感冒期間做核酸檢測有用嗎
- 感冒了做核酸檢測有問題嗎
- 感冒了能做核酸檢測報告嗎
- 感冒期間核酸檢測會誤診嗎
- 感冒期間核酸檢測準嗎
- 手機上怎么查詢核酸檢測結果
- 大規模核酸檢測可以出行嗎
- 出行必須做核酸檢測嗎
- 核酸檢測健康碼上不顯示怎么辦