✍ 📁 🙈 🙉 🙊 : 管理員小程式小時鐘

右上角小時鐘

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 測試左單右單

右上角小時鐘

右上角小時鐘

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

右上角 小時鐘

右上角 小時鐘

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

右上角小時鐘

右上角小時鐘