Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » Đồng đồ di chuyển theo thanh trượt
URL: https://www.javascriptbank.com/floating-timer-clock-script.html
Hiệu ứng tạo một đồng hồ đơn giản ở góc phải-trên của trang web và di chuyển theo thanh trượt.
Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » Đồng đồ di chuyển theo thanh trượt
URL: https://www.javascriptbank.com/floating-timer-clock-script.html
<STYLE type=text/css>#pane {VISIBILITY: hidden; POSITION: absolute}A {FONT-SIZE: 12pt; COLOR: blue; FONT-FAMILY: Arial; TEXT-DECORATION: none}A:visited {FONT-SIZE: 12pt; COLOR: blue; FONT-FAMILY: Arial; TEXT-DECORATION: none}A:hover {FONT-SIZE: 12pt; COLOR: red; FONT-FAMILY: Arial; TEXT-DECORATION: none}TD {FONT-SIZE: 12pt; FONT-FAMILY: Arial}.heading {FONT-SIZE: 14pt; FONT-FAMILY: Arial}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript><!--/**************************************************************//* You may freely distribute and modify the following code, *//* but please don't delete the reference to my homepage, so *//* that people could find the updates on it ... THANK YOU *//* AUTHOR: Vitaliy Rabotnik *//* WWW: http://members.rogers.com/vitaliy75 *//**************************************************************//**************************************************************//* SCRIPT SETTINGS *//**************************************************************///display timer or clockvar TimerOrClock = "clock";//layer heightvar layerH = 70;//layer widthvar layerW = 150;//location of the layer on the page://top_left, top_right, "bottom_left", "bottom_right"var llocation = "top_right"; //background color of the layer://transparent - inherits the background of the page;//any color as a word or in hexadecimalvar bgcolor = "yellow";//font colorvar text = "black";//font sizevar font_size = 3;//font facevar font_face = "Arial";//your wordsvar message = "Current time is <br>";//link textvar link = "<a href=\"http://members.rogers.com/vitaliy75\">Vitaliy's World</a>";/***************** DO NOT EDIT BELOW THIS LINE ***************/var layer;var IE = document.all;var updateWatch;var start = 0;var NS6 = false;if(document.getElementById && navigator.appName == "Netscape") NS6 = true;function writeTime(time){ var color, size, face, out;color = (text)? text : "black";size = (font_size)? font_size : 2;face = (font_face)? font_face : "Arial"; out = "<font face = \"" + face + "\" size = " + size + " color = \"" + color + "\">";out += (message)? message : "";if(!IE && !NS6) out += " ";out += time; out += "<br>" + link;out += "</font>";if(IE || NS6) layer.innerHTML = "<table width=\"100%\" height=\"100%\"><tr><td valign=\"middle\" align=\"center\">" + out + "</td></tr></table>"; else { layer.document.open(); layer.document.write("<br> " + "<b>" + out + "</b>"); layer.document.close();}}function clock(){ var hh, mm, ss; var time, d, ampm = "am"; d = new Date(); hh = d.getHours(); mm = d.getMinutes(); ss = d.getSeconds(); if(hh > 12) { hh -= 12; ampm = "pm"; } hh = (hh < 10)? "0" + hh : hh; mm = (mm < 10)? "0" + mm : mm; ss = (ss < 10)? "0" + ss : ss; time = hh + ":" + mm + ":" + ss + " " + ampm; writeTime(time);}function timer(){ var hh, mm, ss; var time; hh = parseInt("0" + (start / 3600), 10); mm = parseInt("0" + ((start - (hh * 3600)) / 60), 10); ss = start - (hh * 3600) - (mm * 60); if(start < 60) time = ss + " seconds "; else if(start < 3600 && start > 60) time = mm + " minutes " + ss + " seconds "; else { time = (hh == 1)? hh + " hour " : hh + " hours "; time += (mm == 1)? mm + " minute " : mm + " minutes "; } writeTime(time); start++;}function scroller(){ var docH, docW, scrollT, scrollL; <!-- Scroller Code for IE --> if(IE) { layer = document.all.pane; if(layerH){ layer.height = layerH; layer.style.height = layerH;} else layerH = layer.height;if(layerW){ layer.width = layerW; layer.style.width = layerW;}else layerW = layer.width;if(bgcolor) layer.style.background = bgcolor;docH = document.body.clientHeight;docW = document.body.clientWidth;scrollT = document.body.scrollTop;scrollL = document.body.scrollLeft; switch(llocation.toLowerCase()){ case "top_left": layer.style.posTop = scrollT; layer.style.posLeft = scrollL;break; case "top_right": layer.style.posTop = scrollT; layer.style.posLeft = scrollL + (docW - layerW); break; case "bottom_left": layer.style.posTop = scrollT + (docH - layerH); layer.style.posLeft = scrollL; break; case "bottom_right": layer.style.posTop = scrollT + (docH - layerH); layer.style.posLeft = scrollL + (docW - layerW); break; default: layer.style.posTop = scrollT; layer.style.posLeft = scrollL;} layer.style.visibility = "visible"; } <!-- Scroller Code for NS6+ --> else if(NS6) { layer = document.getElementById("pane");if(layerH){ layer.height = layerH; layer.style.height = layerH;} else layerH = layer.height;if(layerW){ layer.width = layerW; layer.style.width = layerW;}else layerW = layer.width;if(bgcolor) layer.style.background = bgcolor; docH = window.innerHeight;docW = window.innerWidth;scrollT = window.pageYOffset;scrollL = window.pageXOffset;switch(llocation.toLowerCase()){ case "top_left": layer.style.top = scrollT; layer.style.left = scrollL;break; case "top_right": layer.style.top = scrollT; layer.style.left = scrollL + (docW - layerW); break; case "bottom_left": layer.style.top = scrollT + (docH - layerH); layer.style.left = scrollL; break; case "bottom_right": layer.style.top = scrollT + (docH - layerH); layer.style.left = scrollL + (docW - layerW); break; default: layer.style.top = scrollT; layer.style.left = scrollL;} layer.style.visibility = "visible"; } <!-- Scroller Code for NS4 --> else { layer = document.layers.pane; if(!layerH) layerH = 200;if(!layerW) layerW = 100; layer.resizeTo(layerW,layerH); if(bgcolor && bgcolor != "transparent") layer.bgColor = bgcolor;docH = window.innerHeight;docW = window.innerWidth;scrollT = window.pageYOffset;scrollL = window.pageXOffset;switch(llocation.toLowerCase()){ case "top_left": layer.moveTo(scrollL,scrollT);break; case "top_right": layer.moveTo(scrollL + (docW - layerW) - 15, scrollT); break; case "bottom_left": layer.moveTo(scrollL, scrollT + (docH - layerH) - 15); break; case "bottom_right": layer.moveTo(scrollL + (docW - layerW) - 15,scrollT + (docH - layerH) - 15); break; default: layer.moveTo(scrollL,scrollT);}//make layer visible layer.visibility = "show"; }}//--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT><!--var inter = setInterval("scroller();",100);var inter2;if(TimerOrClock.toLowerCase() == "clock") inter2 = setInterval("clock();",1000);else inter2 = setInterval("timer();",1000); //--></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->