Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » Đồng hồ kim đơn giản
URL: https://www.javascriptbank.com/micro-clock-script.html
Hiệu ứng tạo một đồng hồ kim không số có kích thước nhỏ trên trang web.
Phiên bản đầy đủ: jsB@nk » Thời gian » Đồng hồ » Đồng hồ kim đơn giản
URL: https://www.javascriptbank.com/micro-clock-script.html
<style>v\:* { behavior: url(#default#VML); }</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
<script>// Micro Clock// set the length for each hand (pixels)var hand_sec_length=15var hand_min_length=12var hand_hour_length=10// set the color for each hand (hexadecimal values required)var hand_sec_color="#FF0000"var hand_min_color="#0000FF"var hand_hour_color="#000000"// set the weight for each hand (pixels) var hand_sec_weight=1var hand_min_weight=1var hand_hour_weight=1// set width and height for the face (pixels)var face_width=32var face_height=32// set the weight of the face's outline (pixels)var face_outlineweight=1// set color of the face's outlinevar face_outlinecolor="#000000"// set the filling-color of the face's outline (only IE5x)var face_fillcolor="#FFFF00"// set the form of the face (only IE5x)// set "rect" if you want a rectangle, set "oval" if you want an oval.var faceform="oval"// set the corresponding values for the small circle in the center of the watch (only IE5x)var innercircle_width=2var innercircle_height=2var innercircle_outlineweight=1var innercircle_outlinecolor="#000000"var innercircle_fillcolor="#FFFF00"// do not edit below this linevar pi= Math.PIvar x_sec=0var y_sec=0var x_min=0var y_min=0var x_hour=0var y_hour=0var angle=270var x,yvar opera=navigator.userAgent.match(/Opera/)?1:0 var ie5=document.getElementById&&document.all&&!navigator.userAgent.match(/Opera/)?1:0 var ns6=document.getElementById&&!document.all&&!navigator.userAgent.match(/Opera/)?1:0 function getxy(thistime,thisradius) {angle=6*parseInt(thistime)-90x=(thisradius*Math.cos(angle*(pi/180)))+face_width/2y=(thisradius*Math.sin(angle*(pi/180)))+face_height/2}function dorotateIE() {var now = new Date()var nowsec = now.getSeconds()var nowmin = now.getMinutes()var nowhour = now.getHours()if (nowhour>=12) {nowhour-=12}nowhour=(30*nowhour+(nowmin/2))/6getxy(nowsec,hand_sec_length)document.getElementById('secid').to=x+","+ygetxy(nowmin,hand_min_length)document.getElementById('minid').to=x+","+ygetxy(nowhour,hand_hour_length)document.getElementById('hourid').to=x+","+yvar timer=setTimeout("dorotateIE()",1000)}function dorotateNS() {var now = new Date()var nowsec = now.getSeconds()var nowmin = now.getMinutes()var nowhour = now.getHours()if (nowhour>=12) {nowhour-=12}nowhour=(30*nowhour+(nowmin/2))/6for (i=1;i<=hand_sec_length;i++) {getxy(nowsec,i)document.getElementById('sec'+i).style.left=xdocument.getElementById('sec'+i).style.top=y}for (i=1;i<=hand_min_length;i++) {getxy(nowmin,i)document.getElementById('min'+i).style.left=xdocument.getElementById('min'+i).style.top=y}for (i=1;i<=hand_hour_length;i++) {getxy(nowhour,i)document.getElementById('hour'+i).style.left=xdocument.getElementById('hour'+i).style.top=y}var timer=setTimeout("dorotateNS()",1000)}function DL_GetElementLeft(eElement) { var nLeftPos = eElement.offsetLeft; var eParElement = eElement.offsetParent; while (eParElement != null) { nLeftPos += eParElement.offsetLeft; eParElement = eParElement.offsetParent; } return nLeftPos; }function DL_GetElementTop(eElement) { var nTopPos = eElement.offsetTop; var eParElement = eElement.offsetParent; while (eParElement != null) { nTopPos += eParElement.offsetTop; eParElement = eParElement.offsetParent; } return nTopPos; }function getpos(){document.getElementById('roof').style.left=DL_GetElementLeft(document.getElementById('marker'));document.getElementById('roof').style.top=DL_GetElementTop(document.getElementById('marker'));document.getElementById('marker').style.visibility="hidden"document.getElementById('roof').style.visibility="visible"if (ie5) {dorotateIE()}else {dorotateNS()}}if (ie5) {document.write('<span id="marker" style="position:relative;width:'+face_width+';height:'+face_height+'"><img width='+face_width+' height='+face_height+' src="empty.gif"></span>')document.write('<span id="roof" style="position:absolute;top:0px;left:0px;width:'+face_width+'px;height:'+face_height+'px;visibility:hidden">')document.write('<v:'+faceform+' id="faceid" strokeweight="'+face_outlineweight+'" strokecolor="'+face_outlinecolor+'" fillcolor="'+face_fillcolor+'" style="position:absolute;top:0px;left:0px;width:'+face_width+'px;height:'+face_height+'px"/>')document.write('<v:line id="secid" strokeweight="'+hand_sec_weight+'" strokecolor="'+hand_sec_color+'" from="'+face_width/2+','+face_height/2+'" to="'+face_width/2+','+face_height/2+'"/>')document.write('<v:line id="minid" strokeweight="'+hand_min_weight+'" strokecolor="'+hand_min_color+'" from="'+face_width/2+','+face_height/2+'" to="'+face_width/2+','+face_height/2+'"/>')document.write('<v:line id="hourid" strokeweight="'+hand_hour_weight+'" strokecolor="'+hand_hour_color+'" from="'+face_width/2+','+face_height/2+'" to="'+face_width/2+','+face_height/2+'"/>')document.write('<v:oval id="innercircleid" strokecolor="'+innercircle_outlinecolor+'" fillcolor="'+innercircle_fillcolor+'" style="position:absolute;top:'+(face_height/2-innercircle_height/2)+'px;left:'+(face_width/2-innercircle_width/2)+'px;width:'+innercircle_width+'px;height:'+innercircle_height+'px">')document.write('</v:oval>')document.write('</span>')window.onload=getpos}if (opera || ns6) {document.write('<span id="marker" style="position:relative;width:'+(hand_hour_weight+face_width)+';height:'+(hand_hour_weight+face_height)+'">')if (ns6) {document.write('<img width='+(hand_hour_weight+face_width)+' height='+(hand_hour_weight+face_height)+' src="empty.gif">')}document.write('</span>')document.write('<div id="roof" style="position:absolute;width:'+(hand_hour_weight+face_width)+';height:'+(hand_hour_weight+face_height)+';top:0px;left:0px;visibility:hidden">')for (i=1;i<=30;i++) {angle=12*parseInt(i)-90x=(face_width/2*Math.cos(angle*(pi/180)))+face_width/2y=(face_height/2*Math.sin(angle*(pi/180)))+face_height/2document.write('<div style="position:absolute;left:'+x+'px;top:'+y+'px;background-color:'+face_outlinecolor+'"><img src="empty.gif" width='+face_outlineweight+'></div>')}for (i=1;i<=hand_sec_length;i++) {document.write('<div id="sec'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_sec_color+'"><img src="empty.gif" width='+hand_sec_weight+'></div>')}for (i=1;i<=hand_min_length;i++) {document.write('<div id="min'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_min_color+'"><img src="empty.gif" width='+hand_min_weight+'></div>')}for (i=1;i<=hand_hour_length;i++) {document.write('<div id="hour'+i+'" style="position:absolute;left:0px;top:0px;background-color:'+hand_hour_color+'"><img src="empty.gif" width='+hand_hour_weight+'></div>')}document.write('</div>')window.onload=getpos}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->