jQuery實現電子時脈功能步驟詳解
這次帶給大家jQuery實現電子時鐘功能步驟詳解,jQuery實現電子時鐘功能的注意事項有哪些,下面就是實戰案例,一起來看一下。
<!DOCTYPE html> <html> <head> <title>jQuery电子时钟</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <span id="time">haha</span> <script type="text/javascript"> window.onload = function(){ showTime(); } function showTime(){ var myDate = new Date(); var year = myDate.getFullYear(); var month = myDate.getMonth() + 1; var date = myDate.getDate(); var dayArray = new Array(7); dayArray[0] = "星期日"; dayArray[1] = "星期一"; dayArray[2] = "星期二"; dayArray[3] = "星期三"; dayArray[4] = "星期四"; dayArray[5] = "星期五"; dayArray[6] = "星期六"; var day1 = myDate.getDay(); var day = dayArray[day1]; var hour = myDate.getHours(); var minute = myDate.getMinutes(); var second = myDate.getSeconds(); var min = checkTime(minute); var sec = checkTime(second); var time1 = year + "年" + month + "月" + date + "日"; var time2 = hour + ":" + min + ":" + sec; // document.write(time1+day+time2); //用js方法 // document.getElementById("time").innerHTML = time1+day+time2; //用jquery方法 $('#time').text(time1+day+time2); setTimeout("showTime()",500); } function checkTime(i){ if(i<10){ i = "0" + i; } return i; } </script> </body> </html>
運行效果:
實例小結:
1、注意js檔案引用,要在head中聲明,在body中展開時,無需重新申明引用信息等;
2、注意Date有關函數,獲取時候不要忘記了get和括號;
3、注意window.onload = function( ){}
的寫法;
4、月份要注意數組開始順序,從一月開始,下標是0,以此類增;
5、注意時、分、秒函數為複數;
6、day表示取得星期幾,但是取得的是數字,可以用陣列轉換(0表示週日,其它一一對應)
7、setTimeout函數:setTimeOut(A,B)
,注意setTimeout
中out為小寫
A:函數體B:函數執行間隔
8、setTimeout執行過程中,不要使用document.write
,否則遞歸呼叫未實現;
9、JQuery選擇器中使用單引號還是雙引號?
理論上單雙都可以,在嵌套情況下視具體情況而定。
10、關於jQuery取得標籤文字內容:方法1:text();方法2:html();
注意,需要改變文字內容時,正確格式為:$('#time' ).text("content")
錯誤格式為:$('#time').text() = "content"
相信看了這篇文章案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是jQuery實現電子時脈功能步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

豆包app裡會有很多ai創作的功能,那麼豆包app有什麼功能呢?使用者可以透過這個軟體來創作繪畫,和ai進行聊天,也能夠為用戶生成文章,幫助大家搜尋歌曲等。這篇豆包app功能介紹就能夠告訴大家具體的操作方法,以下就是具體內容,趕快看看吧!豆包app有什麼功能答:可以畫畫、聊天、寫文、找歌。功能介紹:1、問題查詢:可以透過ai來更快的找到問題的答案,什麼樣的問題都是可以詢問。 2.圖片生成:可以有ai來為大家創造不同的圖片,只需要告訴大家大概的要求。 3.ai聊天:能夠為用戶創建一個可以聊天的ai,

您的手機中缺少時鐘應用程式嗎?日期和時間仍將顯示在iPhone的狀態列上。但是,如果沒有時鐘應用程序,您將無法使用世界時鐘、碼錶、鬧鐘等多項功能。因此,修復時鐘應用程式的缺失應該是您的待辦事項清單的首位。這些解決方案可以幫助您解決此問題。修復1–放置時鐘應用程式如果您錯誤地從主畫面中刪除了時鐘應用程序,您可以將時鐘應用程式放回原位。步驟1–解鎖iPhone並開始向左側滑動,直到到達「應用程式庫」頁面。步驟2–接下來,在搜尋框中搜尋「時鐘」。步驟3–當您在搜尋結果中看到下方的「時鐘」時,請按住它並

vivox100s和x100手機都是vivo手機產品線中的代表機型,它們分別代表了vivo在不同時間段內的高端技術水平,因此這兩款手機在設計、性能和功能上均有一定區別。本文將從效能比較和功能解析兩個面向對這兩款手機進行詳細比較,幫助消費者更好地選擇適合自己的手機。首先,我們來看vivox100s和x100在效能上的比較。 vivox100s搭載了最新的

隨著網路的快速發展,自媒體這個概念已經深入人心。那麼,自媒體到底是什麼呢?它有哪些主要特點和功能呢?接下來,我們將一一探討這些問題。一、自媒體到底是什麼?自媒體,顧名思義,就是自己就是媒體。它是指透過網路平台,個人或團隊可以自主創建、編輯、發布和傳播內容的資訊載體。不同於傳統媒體,如報紙、電視、電台等,自媒體具有更強的互動性和個人化,讓每個人都能成為訊息的生產者和傳播者。二、自媒體的主要特色和功能有哪些? 1.低門檻:自媒體的崛起降低了進入媒體產業的門檻,不再需要繁瑣的設備和專業的團隊,一部手

隨著小紅書在年輕人中的流行,越來越多的人開始利用這個平台分享各方面的經驗和生活見解。如何有效管理多個小紅書帳號成為關鍵問題。在本文中,我們將討論一些小紅書帳號管理軟體的功能,並探討如何更好地經營小紅書帳號。隨著社群媒體的發展,許多人發現自己需要管理多個社群帳號。對於小紅書用戶來說,這也是一個挑戰。一些小紅書帳號管理軟體可以幫助使用者更輕鬆地管理多個帳號,包括自動發佈內容、定時發布、資料分析等功能。透過這些工具,使用者可以更有效率地管理他們的帳號,提高帳號的曝光率和關注。另一、小紅書帳號管理軟體有

《探索Discuz:定義、功能及程式碼範例》隨著網路的快速發展,社群論壇已成為人們獲取資訊、交流觀點的重要平台。在眾多的社群論壇系統中,Discuz作為國內較知名的一種開源論壇軟體,備受廣大網站開發者和管理員的青睞。那麼,什麼是Discuz?它又有哪些功能,能為我們的網站提供怎樣的幫助呢?本文將對Discuz進行詳細介紹,並附上具體的程式碼範例,幫助讀者更

PHP技巧:快速實現回到上一頁功能在網頁開發中,常常會遇到需要實作返回上一頁的功能。這樣的操作可以提高使用者體驗,讓使用者更方便地在網頁之間進行導航。在PHP中,我們可以透過一些簡單的程式碼來實現這項功能。本文將介紹如何快速實現返回上一頁功能,並提供具體的PHP程式碼範例。在PHP中,我們可以使用$_SERVER['HTTP_REFERER']來取得上一頁的URL

Linux下GDM的功能和作用詳解在Linux作業系統中,GDM(GNOMEDisplayManager)是一種圖形化登入管理器,它提供了使用者在系統中登入和登出的介面。 GDM通常是GNOME桌面環境的一部分,但也可以被其他桌面環境所使用。 GDM的功能不僅是提供一個登入介面,還包括使用者會話管理、螢幕保護、自動登入等功能。 GDM的功能主要包括以下幾個面向:
