wie man eine JavaScript-Uhr nach Datenbankwerten macht

Question

Ich möchte eine analoge Uhr mit JavaScript erstellen. Jetzt habe ich Arbeitszeiten und Stunden, die aus der Datenbank kommen.

Also ich möchte Arbeitsstunden in einigen Farben und Stunden in einer anderen Farbe zeigen. Wie mache ich das?

Von Datenbank habe ich Zeit und Endzeit beginnen

ZB:

VON ZEIT: 00: 00: 00

ENDE: 11: 59: 00

Dies ist die Uhr: Clock

<canvas id="canvas" width="400" height="400" 
style="background-color:Blue"> 
</canvas> 

<script> 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var radius = canvas.height/2; 
ctx.translate(radius, radius); 
radius = radius * 0.90 
setInterval(drawClock, 1000); 

function drawClock() { 
    drawFace(ctx, radius); 
    drawNumbers(ctx, radius); 
    drawTime(ctx, radius); 
} 

function drawFace(ctx, radius) { 
    var grad; 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius, 0, 2*Math.PI); 
    ctx.fillStyle = 'white'; 
    ctx.fill(); 
    grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05); 
    grad.addColorStop(0, '#333'); 
    grad.addColorStop(0.5, 'white'); 
    grad.addColorStop(1, '#333'); 
    ctx.strokeStyle = grad; 
    ctx.lineWidth = radius*0.1; 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); 
    ctx.fillStyle = '#333'; 
    ctx.fill(); 
} 

function drawNumbers(ctx, radius) { 
    var ang; 
    var num; 
    ctx.font = radius*0.15 + "px arial"; 
    ctx.textBaseline="middle"; 
    ctx.textAlign="center"; 
    for(num = 1; num < 13; num++){ 
    ang = num * Math.PI/6; 
    ctx.rotate(ang); 
    ctx.translate(0, -radius*0.85); 
    ctx.rotate(-ang); 
    ctx.fillText(num.toString(), 0, 0); 
    ctx.rotate(ang); 
    ctx.translate(0, radius*0.85); 
    ctx.rotate(-ang); 
    } 
} 

function drawTime(ctx, radius){ 
    var now = new Date(); 
    var hour = now.getHours(); 
    var minute = now.getMinutes(); 
    var second = now.getSeconds(); 
    //hour 
    hour=hour%12; 
    hour=(hour*Math.PI/6)+ 
    (minute*Math.PI/(6*60))+ 
    (second*Math.PI/(360*60)); 
    drawHand(ctx, hour, radius*0.5, radius*0.07); 
    //minute 
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 
    drawHand(ctx, minute, radius*0.8, radius*0.07); 
    // second 
    second=(second*Math.PI/30); 
    drawHand(ctx, second, radius*0.9, radius*0.02); 
} 

function drawHand(ctx, pos, length, width) { 
    ctx.beginPath(); 
    ctx.lineWidth = width; 
    ctx.lineCap = "round"; 
    ctx.moveTo(0,0); 
    ctx.rotate(pos); 
    ctx.lineTo(0, -length); 
    ctx.stroke(); 
    ctx.rotate(-pos); 
} 
</script> 

Answer 1

Wie wäre es mit einer API wie dieser für die Funktion drawClock?

drawClock(currentTime, offHours) 


function isOffHours() { 
    // Always working 
    return false 
} 
setInterval(function() { 
    drawClock(new Date(), isOffHours()) 
}, 1000) 

diese Weise wird die Uhr Zeichenfunktion selbst nicht zu entscheiden, bekommt, wie spät es ist, das Rendering Teil der App ist besser dran, nicht bewusst zu sein.

Dies würde Sie benötigen die Unterschrift der drawTime Funktion zu ändern:

drawTime(ctx, radius, time) { 
    var hour = time.getHours(); 
    var minute = time.getMinutes(); 
    var second = time.getSeconds(); 
    ... 
} 

EDIT: überprüfen Sie diese Geige https://jsfiddle.net/gf8g8790/2/