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

右上角小時鐘

<table id="Ttable"><tbody>
<tr><td id="Th">09</td><td> : </td>
<td id="Tm">54</td><td> : </td>
<td id="Ts">53</td>
<td id="Ap">am</td></tr>
<tr><td id="Dm" colspan="2">9月</td>
<td id="Dd" colspan="2">28日</td>
<td id="DD" colspan="2">星期六</td></tr>
</tbody></table>
<br><BR>
<pre>
<ol>
<li><<?>table  id="Ttable"><<?>tbody>
<li><<?>tr>
<li><<?>td id="Th">09<<?>/td><<?>td> : <<?>/td>
<li><<?>td id="Tm">54<<?>/td><<?>td> : <<?>/td>
<li><<?>td id="Ts">53<<?>/td>
<li><<?>td id="Ap">am<<?>/td><<?>/tr>
<li><<?>tr>
<li><<?>td id="Dm" colspan="2">9月<<?>/td>
<li><<?>td id="Dd" colspan="2">28日<<?>/td>
<li><<?>td id="DD" colspan="2">星期六<<?>/td><<?>/tr>
<li><<?>/tbody><<?>/table>

<li><<?>script>
<li>function Tclock(){
<li>var Dc = ["日","一","二","三","四","五","六"] ;
<li>var TH = new Date().getHours() ;
<li>var TM = new Date().getMinutes() ;
<li>var TS = new Date().getSeconds() ;
<li>var AmPm = (TH > 12)? "pm":"am";

<li>TH = (TH > 12)? TH-12 :TH ;
<li>AP = (TS == 0)? 60:(TS < 10)? "0"+TS :TS;
<li>TH = (TH == 0)? 24:(TH < 10)? "0"+TH :TH ;
<li>TM = (TM == 0)? 60:(TM < 10)? "0"+TM :TM;
<li>TS = (TS == 0)? 60:(TS < 10)? "0"+TS :TS;

<li>Th.innerHTML = TH;
<li>Tm.innerHTML = TM;
<li>Ts.innerHTML = TS;
<li>Ap.innerHTML = AmPm ;
<li>Dm.innerHTML = new Date().getMonth()+1+"月";
<li>Dd.innerHTML = new Date().getDate()+"日";
<li>DD.innerHTML = "星期" + Dc[new Date().getDay()]; 
 
<li>window.requestAnimationFrame(Tclock);
<li>}
<li>Tclock() ;
<li><<?>/script>
</ol></pre>

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