128 lines
2.5 KiB
JavaScript
128 lines
2.5 KiB
JavaScript
|
|
|||
|
|
function CountDown(zeitgeist){
|
|||
|
|
zeitgeist = zeitgeist-1;
|
|||
|
|
if(zeitgeist < 0){
|
|||
|
|
zeitgeist = 60;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return zeitgeist;
|
|||
|
|
}
|
|||
|
|
function degToRad(degree){
|
|||
|
|
var factor = Math.PI/180;
|
|||
|
|
return degree*factor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var cds = 60;
|
|||
|
|
|
|||
|
|
function renderTime(){
|
|||
|
|
|
|||
|
|
//Von der "Bib" Date now obj
|
|||
|
|
var canvas = document.getElementById('canvas');
|
|||
|
|
var ctx = canvas.getContext('2d');
|
|||
|
|
//style
|
|||
|
|
if(cds>30){
|
|||
|
|
ctx.strokeStyle ='green';
|
|||
|
|
ctx.lineWidth = 17;
|
|||
|
|
ctx.lineCap = 'round';
|
|||
|
|
ctx.shadowBlur =15;
|
|||
|
|
ctx.shadowColor='lightgreen';
|
|||
|
|
}
|
|||
|
|
if(cds<=31){
|
|||
|
|
ctx.strokeStyle ='yellow';
|
|||
|
|
ctx.lineWidth = 17;
|
|||
|
|
ctx.lineCap = 'round';
|
|||
|
|
ctx.shadowBlur =5;
|
|||
|
|
ctx.shadowColor='blue';
|
|||
|
|
}
|
|||
|
|
if(cds<=21){
|
|||
|
|
|
|||
|
|
ctx.strokeStyle ='orange';
|
|||
|
|
ctx.lineWidth = 17;
|
|||
|
|
ctx.lineCap = 'round';
|
|||
|
|
ctx.shadowBlur =15;
|
|||
|
|
ctx.shadowColor='blue';
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if(cds<=11){
|
|||
|
|
ctx.strokeStyle ='orange';
|
|||
|
|
ctx.lineWidth = 17;
|
|||
|
|
ctx.lineCap = 'round';
|
|||
|
|
ctx.shadowBlur =5;
|
|||
|
|
ctx.shadowColor='red';
|
|||
|
|
}
|
|||
|
|
if(cds<=6){
|
|||
|
|
ctx.strokeStyle ='red';
|
|||
|
|
ctx.lineWidth = 17;
|
|||
|
|
ctx.lineCap = 'round';
|
|||
|
|
ctx.shadowBlur =15;
|
|||
|
|
ctx.shadowColor='red';
|
|||
|
|
}
|
|||
|
|
if(cds<=0){
|
|||
|
|
alert("verpennt OPFA");
|
|||
|
|
//ctx.fillText("verpennt OPFA",240,260);
|
|||
|
|
clearInterval(myvar);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var now = new Date();
|
|||
|
|
var today = now.toDateString();
|
|||
|
|
var time = now.toLocaleTimeString();
|
|||
|
|
var seconds = now.getSeconds();
|
|||
|
|
var milliseconds = now.getMilliseconds();
|
|||
|
|
var newSeconds = seconds+(milliseconds/1000);
|
|||
|
|
|
|||
|
|
//Background
|
|||
|
|
//au<61>en innen
|
|||
|
|
gradient = ctx.createRadialGradient(250,250,5, 250,250,300);
|
|||
|
|
gradient.addColorStop(0, 'lightblue');
|
|||
|
|
gradient.addColorStop(1, 'white');
|
|||
|
|
//ctx.fillStyle = 'grey';
|
|||
|
|
ctx.fillStyle = gradient;
|
|||
|
|
ctx.fillRect(0, 0, 500, 500);
|
|||
|
|
|
|||
|
|
|
|||
|
|
//MilliSeconds
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.arc(250, 250, 140, degToRad(270), degToRad((cds*6)-90));
|
|||
|
|
ctx.stroke();
|
|||
|
|
|
|||
|
|
|
|||
|
|
//Time
|
|||
|
|
if(cds>30){
|
|||
|
|
ctx.font = "20px Arial ";
|
|||
|
|
ctx.fillStyle ='green';
|
|||
|
|
ctx.fillText(CountDown(cds),240,260);
|
|||
|
|
}
|
|||
|
|
if(cds<=31){
|
|||
|
|
ctx.font = "20px Arial ";
|
|||
|
|
ctx.fillStyle ='yellow';
|
|||
|
|
ctx.fillText(CountDown(cds),240,260);
|
|||
|
|
}
|
|||
|
|
if(cds<=21){
|
|||
|
|
ctx.font = "20px Arial ";
|
|||
|
|
ctx.fillStyle ='orange';
|
|||
|
|
ctx.fillText(CountDown(cds),240,260);
|
|||
|
|
}
|
|||
|
|
if(cds<=11){
|
|||
|
|
ctx.font = "20px Arial ";
|
|||
|
|
ctx.fillStyle ='lightred';
|
|||
|
|
ctx.fillText(CountDown(cds),240,260);
|
|||
|
|
}
|
|||
|
|
if(cds<=6){
|
|||
|
|
ctx.font = "20px Arial ";
|
|||
|
|
ctx.fillStyle ='red';
|
|||
|
|
ctx.fillText(CountDown(cds),240,260);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
cds = CountDown(cds);
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|