✍ 📁 🙈 🙉 🙊 : 右上角小時鐘

右上角小時鐘

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>

<canvas id="canvas" width="100" height="120" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

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>

Edit

用JavaScript連結Google Sheets #html #網頁計設計 #網頁資料庫 #script #style #網頁小時鐘; #web page hour clock

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單