右上角 小時鐘

右上角 小時鐘

<div id="Ttime"></div> <script>function TclockA(){ var TK = '' ; TK+= "<style>"; TK+= "#Ttable {font-size: 20px ;" ; TK+= " background-color:dimgray; " ; TK+= " color:white;}" ; TK+= "#Ttable td {border: 1px solid white;" ; TK+= " border-radius:7px 7px 7px 7px;" ; TK+= " padding:3px ;" ; TK+= " background-color:black; " ; TK+= "}<\/style>"; TK += '<table id="Ttable">' ; TK += '<tbody><tr>' ; TK += '<td id="Th">00</td>' ; TK += '<td > : </td>' ; TK += '<td id="Tm">00</td>' ; TK += '<td > : </td>' ; TK += '<td id="Ts">00</td>' ; TK += '<td id="Ap">hh</td></tr><tr>' ; TK += '<td id="Dm" colspan="2" >03</td>' ; TK += '<td id="Dd" colspan="2">03</td>' ; TK += '<td id="DD" colspan="2">03</td>' ; TK += '</tr></tbody></table>' ; Ttime.innerHTML = TK ; Tclock(); } TclockA() ; function Tclock(){ var Dc = ["日","一","二","三","四","五","六"] ; var TH = new Date().getHours() ; var TM = new Date().getMinutes() ; var TS = new Date().getSeconds() ; var AmPm = (TH > 12)? "pm":"am"; TH = (TH > 12)? TH-12 :TH ; AP = (TS == 0)? 60:(TS < 10)? "0"+TS :TS; TH = (TH == 0)? 24:(TH < 10)? "0"+TH :TH ; TM = (TM == 0)? 60:(TM < 10)? "0"+TM :TM; TS = (TS == 0)? 60:(TS < 10)? "0"+TS :TS; Th.innerHTML = TH; Tm.innerHTML = TM; Ts.innerHTML = TS; Ap.innerHTML = AmPm ; Dm.innerHTML = new Date().getMonth()+1+"月"; Dd.innerHTML = new Date().getDate()+"日"; DD.innerHTML = "星期" + Dc[new Date().getDay()]; window.requestAnimationFrame(Tclock); } </script>

00

<canvas id="canvas" width="100" height="120" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas> <script>function clock(){ var now = new Date(); var sec = now.getSeconds(); var min = now.getMinutes(); var hr = now.getHours(); var yy = now.getFullYear(); var mm = now.getMonth()+1; var dd = now.getDate(); var d7 = now.getDay(); var c7 =["日","一","二","三","四","五","六"]; sec= sec<10 ? sec="0"+sec :sec; min = min <10 ? min ="0"+min :min ; hr = hr>=12 ? hr-12 : hr; hr = hr<10 ? hr="0"+hr :hr; mm = mm<10 ? mm="0"+mm :mm; dd = dd<10 ? dd="0"+dd :dd; var td = dd+"/" + mm +"/"+yy; var tdd = "星期"+c7[d7]; var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); ctx.clearRect(0,0,canvas.width,canvas.height); ctx.translate(canvas.width/2,canvas.height/2-22); ctx.scale(0.25,0.25); ctx.rotate(-Math.PI/2); ctx.strokeStyle = "black"; ctx.fillStyle = "white"; ctx.lineWidth = 5; ctx.lineCap = "round"; // Hour marks ctx.save(); for (var i=0;i<12;i++){ ctx.beginPath(); ctx.rotate(Math.PI/6); ctx.moveTo(100,0); ctx.lineTo(120,0); ctx.stroke(); } ctx.restore(); // Minute marks ctx.save(); ctx.lineWidth = 5; for (i=0;i<60;i++){ if (i%5!=0) { ctx.beginPath(); ctx.moveTo(117,0); ctx.lineTo(120,0); ctx.stroke(); } ctx.rotate(Math.PI/30); } ctx.restore(); var sec = now.getSeconds(); var min = now.getMinutes(); var hr = now.getHours(); hr = hr>=12 ? hr-12 : hr; ctx.fillStyle = "black"; // write Hours ctx.save(); ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) ctx.lineWidth = 14; ctx.beginPath(); ctx.moveTo(-20,0); ctx.lineTo(80,0); ctx.stroke(); ctx.restore(); // write Minutes ctx.save(); ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(-28,0); ctx.lineTo(112,0); ctx.stroke(); ctx.restore(); // Write seconds ctx.save(); ctx.rotate(sec * Math.PI/30); ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(-30,0); ctx.lineTo(83,0); ctx.stroke(); ctx.beginPath(); ctx.arc(0,0,10,0,Math.PI*2,true); ctx.fill(); ctx.beginPath(); ctx.arc(95,0,10,0,Math.PI*2,true); ctx.stroke(); ctx.fillStyle = "rgba(0,0,0,0)"; ctx.arc(0,0,3,0,Math.PI*2,true); ctx.fill(); ctx.restore(); ctx.beginPath(); ctx.lineWidth = 5; ctx.strokeStyle = '#325FA2'; ctx.arc(0,0,142,0,Math.PI*2,true); ctx.stroke(); ctx.restore(); ctx.fillStyle = "Blue"; ctx.textAlign="center"; ctx.font = "bold 18px serif"; ctx.fillText(td,canvas.width/2,canvas.height-30); ctx.fillText(tdd,canvas.width/2,canvas.height-10); window.requestAnimationFrame(clock); } window.requestAnimationFrame(clock); </script>

00