JS：實現電子錶形式的時間顯示

阿新 • • 發佈：2019-01-21

<!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

JS：實現電子錶形式的時間顯示

相關推薦