JS:實現電子錶形式的時間顯示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script language="JavaScript"> var imgs = []; for(var i = 0; i < 10; i++) { imgs[i] = new Image(); imgs[i].src = 'img/' + i + '.jpg'; } function displayTime() { var now = new Date(); var time = []; var hrs = now.getHours(); //小時 hrs = (hrs < 10 ? '0' : '') + hrs; time[0] = hrs.charAt(0); time[1] = hrs.charAt(1); var mins = now.getMinutes(); //分鐘 mins = (mins < 10 ? '0' : '') + mins; time[2] = mins.charAt(0); time[3] = mins.charAt(1); var secs = now.getSeconds(); //秒 secs = (secs < 10 ? '0' : '') + secs; time[4] = secs.charAt(0); time[5] = secs.charAt(1); for(var i = 0; i < time.length; i++) { //在指定時間呼叫特定的圖片 var img = document.getElementById('d' + i); img.src = imgs[time[i]].src; img.alt = time[i]; } } </script> <body onLoad="setInterval('displayTime()',1000);"> <p class="style1">當前時間:</p> <img id="d0" src="img/0.jpg" alt="0"> <img id="d1" src="img/0.jpg" alt="0"> <img src="img/10.jpg" alt=":"> <img id="d2" src="img/0.jpg" alt="0"> <img id="d3" src="img/0.jpg" alt="0"> <img src="img/10.jpg" alt=":"> <img id="d4" src="img/0.jpg" alt="0"> <img id="d5" src="img/0.jpg" alt="0"> </body> </html>
需要電子錶圖片,從0-9
執行結果:
相關推薦
JS:實現電子錶形式的時間顯示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script
實現簡單的時間顯示
添加 charat 顯示 tail 最簡 ref get var time 實現一個簡單的時間: <body> <div id="time" style="color=red"> </div> <script> v
JS:實現頁面列印功能
利用JS實現列印操作 條件:IE瀏覽器的WebBrowser外掛,WebBrowser是IE的內建外掛,只需IE即可開啟,可自動使用外掛 前提:在html程式碼的body標籤下呼叫WebBrowser外掛,程式碼如下 <object id="WebBrowser"
利用Javascript實現當前系統時間顯示
相信大家都在不少的網頁上看到過時間顯示的效果,那麼如何用JS來實現呢 通常的辦法是利用JS建立一個Date物件,通過物件來呼叫Date類的方法 程式碼如下: <!DOCTYPE HTML> <html> <head> <
H5 progress js結合實現動態進度條顯示小記
開通csdn好久了,出於工作原因,一直不能在網上記錄,但是終究覺得還是得留下些東西,所以開始整理筆記,調出可以記錄的描述一下,目的也是為了看到自己的成長,與大家共享。 今天這個是最近剛用過的,一直聽說H5的進度條標籤,一直也沒用過,這兩天剛好提出了需求,走起,小試一把,然後
純js實現動態時間顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
js實現頁面日期時間的動態顯示,精確到秒
直接寫程式碼 <script type="text/javascript"> window.onload=showtime(); function gettime(){ var date = new Date(); var
web前端複習(二):js日期操作,實現時間顯示和倒計時效果
雖然jquery框架的封裝使得幾行程式碼就可以完成js的複雜功能的實現,但是jquery併為日期定製操作,所以日期的操作還是得使用js原生實現 下面我們就來簡單實現js日期操作,程式碼如下: &
不帶插件 ,自己寫js,實現批量上傳文件及進度顯示
批量上傳 發的 xhr string () .cn tom 需要 pen 今天接受項目中要完成文件批量上傳文件而且還要顯示上傳進度,一開始覺得這個應該不是很麻煩,當我在做的時候遇到了很多問題,很頭疼啊。 不過看了別人寫的代碼,自己也測試過,發現網上好多都存在一些問題,並不是
Vue.js 開發實踐:實現精巧的無限加載與分頁功能
cti head 設定 命令 webpack transform style time default https://segmentfault.com/a/1190000005351971#articleHeader9 本篇文章是一篇Vue.js的教程,目標在於用一
如是使用JS實現頁面內容隨機顯示
js之前有個客戶咨詢我,因為他們公司的業務員有多個人,但公司網站的聯系方式板塊裏只夠放一個人的信息,所以就想能不能實現這個聯系方式信息隨機顯示,對於業務或客服人員來說也能做到分配均勻公平。本文我們將和大家一起分享,如何使用js控制實現頁面內容隨機顯示。這裏我以本地的蟬知建站系統為例,給大家演示一下實現流程。首
anime.js 實戰:實現一個帶有描邊動畫效果的復選框
由於 圓角 理解 http 中心 timeline 實例 描邊 evel 在網頁或者是APP的開發中,動畫運用得當可以起到錦上添花的作用。正確使用動畫,不但可以有助於用戶理解交互的作用,還可以大大提高網頁應用的魅力和使用體驗。並且在現在的網頁開發中,動畫已經成為了一個設計的
js:使用angular實現畫廊效果
ots function width -c sheet all one ng-repeat content <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT
js獲取當前時間顯示在頁面上
ntb cti scrip inter con ear spa set tint <div id="time"> </div> <script> window.onload=function(){ //定時器每秒調用一次fnDate
JS 實現定時操作 隱藏顯示圖片(setInterval() clearInterval())
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function init()
例子:實現最新版本Node.js中Express+mongodb的登入註冊頁面
由於版本差異巨大且不相容的情況下,作為才開始學習Node.js的菜鳥,書籍上的例子是不能看了,因此仿照著網路大神中的例子自己再歸納總結了一遍,方便自己以後檢視。好記性不如爛筆頭嘛。 這裡主要使用的版本是express4.0+mongodb最新版本以及Bootstrap3.0介面所做。 一
例項:建立一個表格,分頁顯示資料(MongoDB資料庫儲存),功能:實現增刪改查
需求:建立一個表格,分頁顯示資料,功能:實現增刪改查 效果圖: 自動建立一個專案 命令列: express mongodb-demo --view=ejs cd mongodb-demo npm install npm install mongodb --save npm sta
php根據時間顯示剛剛,幾分鐘前,幾小時前的實現程式碼
釋出時間距現在的時間 function tranTime($time) { $rtime = date("m-d H:i", $time); $htime = date("H:i", $time); $tim
JS:使用c:forEach實現下拉選擇
思路 後臺生成xxlist,新增到model中 使用c:forEach將list中的xx迴圈出來,放到每一個option中 程式碼 <div class="form-group"> <label class="col-sm
JS:layer.js實現loading:訂單匯入中
1.引入 <script src="${pageContext.request.contextPath}/core/js/layer/layer.js"></script> 使用 $("#importYz").cl