Записи

 <table class="colorborder" width="500">
 <tr><td align="center">
<canvas id="canvasId7" width="180px" height="180px"></canvas>
<span>минут</span>
<canvas id="canvasId8" width="135px" height="135px"></canvas>
<span>секунд</span>
 </td></tr>
 <tr><td align="center">
 минут:
 <input id="ver7in20" name="33" type="radio" onclick="ver7MGo();" />20    
 <input id="ver7in25" name="33" type="radio" onclick="ver7MGo();" checked="checked" />25    
 <input id="ver7in30" name="33" type="radio" onclick="ver7MGo();" />30    
 <input id="ver7in40" name="33" type="radio" onclick="ver7MGo();" />40    
 <input id="ver7in45" name="33" type="radio" onclick="ver7MGo();" />45    
 <input id="ver7in60" name="33" type="radio" onclick="ver7MGo();" />60
 </td></tr>
 <tr><td align="center">
 <input type="button" id="ver7butstart" value="старт" onclick="ver7MStart();">
 <input type="button" value=" -1 " onclick="ver7timertag --;ver7MCorr();">
 <input type="button" value=" +1 " onclick="ver7timertag ++;ver7MCorr();">
 </td></tr>
 </table>

<script>
var ver7timerNY = setInterval(ver7ChangeDateTimer, 1000);
var ver7timertag = 25;
var ver7timertagsec = 0;
var ver7flagstart = false;
var ver7flagcolor = true;
var ver7H1 = 2; 
var ver7H2 = 5; 
var ver7S1 = 0; if (ver7S1 === 0) ver7S1 = 11; 
var ver7S2 = 0; 
function ver7ChangeDateTimer() {
if (ver7flagstart) {
//timer
 ver7timertagsec -- ;
 if ((ver7timertag === 3)&&(ver7timertagsec === 0)) {
 ver2DigitalClock.ver2darkColor = '#E0FF7F'; // цвет выключенного элемента 1
 ver2DigitalClock.ver2lightColor = '#0E4D21'; // цвет включенного элемента 1
 ver3DigitalClock.ver3darkColor = '#E0FF7F'; // цвет выключенного элемента 2
 ver3DigitalClock.ver3lightColor = '#0E4D21'; // цвет включенного элемента 2
 }
 if (ver7timertagsec < 0) {
 ver7timertagsec = 59;
 ver7timertag --;
 if (ver7timertag < 0) {
 if (document.getElementById('ver7in20').checked) {ver7timertag = 19;};
 if (document.getElementById('ver7in25').checked) {ver7timertag = 24;};
 if (document.getElementById('ver7in30').checked) {ver7timertag = 29;};
 if (document.getElementById('ver7in40').checked) {ver7timertag = 39;};
 if (document.getElementById('ver7in45').checked) {ver7timertag = 44;};
 if (document.getElementById('ver7in60').checked) {ver7timertag = 59;};
 if (ver7flagcolor === false) {
 ver7flagcolor = true;
 ver2DigitalClock.ver2darkColor = '#DCF3FF'; // цвет выключенного элемента 1
 ver2DigitalClock.ver2lightColor = '#0000FF'; // цвет включенного элемента 1
 ver3DigitalClock.ver3darkColor = '#DCF3FF'; // цвет выключенного элемента 2
 ver3DigitalClock.ver3lightColor = '#0000FF'; // цвет включенного элемента 2
 } else {
 ver7flagcolor = false;
 ver2DigitalClock.ver2darkColor = '#FFDDE8'; // цвет выключенного элемента 1
 ver2DigitalClock.ver2lightColor = '#DC8628'; // цвет включенного элемента 1
 ver3DigitalClock.ver3darkColor = '#FFDDE8'; // цвет выключенного элемента 2
 ver3DigitalClock.ver3lightColor = '#DC8628'; // цвет включенного элемента 2
 }
 }
}
//минуты
 var ver7H0 = "00";
 if (ver7timertag > 9) {
 ver7H0 = "" + ver7timertag;
 } else {
 ver7H0 = "0" + ver7timertag;
 }
 ver7H1 = eval(ver7H0[0]); if (ver7H1 === 0) ver7H1 = 11;
 ver7H2 = eval(ver7H0[1]); if ((ver7H1 === 11)&&(ver7H2 === 0)) ver7H2 = 11; 
//секунды
 var ver7S0 = "00";
 if (ver7timertagsec > 9) {
 ver7S0 = "" + ver7timertagsec;
 } else {
 ver7S0 = "0" + ver7timertagsec;
 }
 ver7S1 = eval(ver7S0[0]); if (ver7S1 === 0) ver7S1 = 11;
 ver7S2 = eval(ver7S0[1]); 
}
}
function ver7MCorr() {
 var ver7H0 = "00";
 if (ver7timertag > 9) {
 ver7H0 = "" + ver7timertag;
 } else {
 ver7H0 = "0" + ver7timertag;
 }
 ver7H1 = eval(ver7H0[0]); if (ver7H1 === 0) ver7H1 = 11;
 ver7H2 = eval(ver7H0[1]); if ((ver7H1 === 11)&&(ver7H2 === 0)) ver7H2 = 11; 
}
function ver7MStart() {
if (ver7flagstart === false) {
ver7flagstart = true;
document.getElementById('ver7butstart').value = "стоп";
} else {
ver7flagstart = false;
document.getElementById('ver7butstart').value = "старт";
}
}

function ver7MGo() {
 if (document.getElementById('ver7in20').checked) {ver7timertag = 19; ver7H1 = 2; ver7H2 = 0;};
 if (document.getElementById('ver7in25').checked) {ver7timertag = 24; ver7H1 = 2; ver7H2 = 5;};
 if (document.getElementById('ver7in30').checked) {ver7timertag = 29; ver7H1 = 3; ver7H2 = 0;};
 if (document.getElementById('ver7in40').checked) {ver7timertag = 39; ver7H1 = 4; ver7H2 = 0;};
 if (document.getElementById('ver7in45').checked) {ver7timertag = 44; ver7H1 = 4; ver7H2 = 5;};
 if (document.getElementById('ver7in60').checked) {ver7timertag = 59; ver7H1 = 6; ver7H2 = 0;};
 ver7timertagsec = 60;
 ver7S1 = 0; if (ver7S1 === 0) ver7S1 = 11; 
 ver7S2 = 0;
 if (ver7flagcolor === false) {
 ver7flagcolor = true;
 ver2DigitalClock.ver2darkColor = '#DCF3FF'; // цвет выключенного элемента 1
 ver2DigitalClock.ver2lightColor = '#0000FF'; // цвет включенного элемента 1
 ver3DigitalClock.ver3darkColor = '#DCF3FF'; // цвет выключенного элемента 2
 ver3DigitalClock.ver3lightColor = '#0000FF'; // цвет включенного элемента 2
 } else {
 ver7flagcolor = false;
 ver2DigitalClock.ver2darkColor = '#FFDDE8'; // цвет выключенного элемента 1
 ver2DigitalClock.ver2lightColor = '#DC8628'; // цвет включенного элемента 1
 ver3DigitalClock.ver3darkColor = '#FFDDE8'; // цвет выключенного элемента 2
 ver3DigitalClock.ver3lightColor = '#DC8628'; // цвет включенного элемента 2
 } 
}
</script>
<script>
///////////////////////////////////////////////////////////
var ver2DigitalClock = {
 
 // Параметры часов
 ver2backColor: '#FFFFFF', // цвет фона
 ver2darkColor: '#DCF3FF', // цвет выключенного элемента
 ver2lightColor: '#0000FF', // цвет включенного элемента
 ver2lineWidth: 30, // толщина линий
 ver2lineLength: 100, // длина линий
 
 /*
 - 0
 | | 1 2
 - 3
 | | 4 5
 - 6
 */
 ver2digits: [
 [1,1,1,0,1,1,1], // 0
 [0,0,1,0,0,1,0], // 1
 [1,0,1,1,1,0,1], // 2
 [1,0,1,1,0,1,1], // 3
 [0,1,1,1,0,1,0], // 4
 [1,1,0,1,0,1,1], // 5
 [1,1,0,1,1,1,1], // 6
 [1,0,1,0,0,1,0], // 7
 [1,1,1,1,1,1,1], // 8
 [1,1,1,1,0,1,1], // 9
 [0,0,0,1,0,0,0], // -
 [0,0,0,0,0,0,0] // +
 ],
 
 // Запуск часов
 ver2start: function() {
 var ver2canvas = document.getElementById('canvasId7');
 if ( ver2canvas.getContext ) {
 var ver2context = ver2canvas.getContext('2d');
 this.ver2context = ver2context;
 var ver2xScale = ver2canvas.width / (this.ver2offset(1, 4)+50);
 var ver2yScale = ver2canvas.height / this.ver2offset(4, 2);
 ver2context.scale(ver2xScale, ver2yScale);
 this.ver2tick();
 setInterval(function(){ver2DigitalClock.ver2tick()}, 100);
 }
 },
 
 // Получить цвет элемента
 ver2getColor: function(bool) {
 return ( bool ) ? this.ver2lightColor : this.ver2darkColor;
 },
 
 // Рассчитать смещение элемента
 ver2offset: function(countWidth, countLength) {
 return countWidth * this.ver2lineWidth + countLength * this.ver2lineLength;
 },
 
 // Отображение цифры на канве
 ver2drawDigit: function(x, y, digit) {
 var ver2ctx = this.ver2context;
 
 ver2ctx.save();
 ver2ctx.translate(x, y);
 ver2ctx.lineWidth = this.ver2lineWidth;
 ver2ctx.lineCap = 'round';
 
 // рисуем горизонтальные линии
 for (var i = 0; i < 3; i++) {
 var y = i * this.ver2offset(1, 1);
 ver2ctx.beginPath();
 ver2ctx.strokeStyle = this.ver2getColor(this.ver2digits[digit][i*3]);
 ver2ctx.moveTo(this.ver2offset(1, 0), y);
 ver2ctx.lineTo(this.ver2offset(0, 1), y);
 ver2ctx.stroke();
 }
 
 // рисуем вертикальные линии
 for (var j = 0; j < 2; j++) {
 var y = j * this.ver2offset(1, 1);
 for (var i = 0; i < 2; i++) {
 var x = i * this.ver2offset(1, 1);
 ver2ctx.beginPath();
 ver2ctx.strokeStyle = this.ver2getColor(this.ver2digits[digit][1+j*3+i]);
 ver2ctx.moveTo(x, y + this.ver2offset(1, 0));
 ver2ctx.lineTo(x, y + this.ver2offset(0, 1));
 ver2ctx.stroke();
 }
 }
 
 ver2ctx.restore();
 },
 
 // Отображение числа на канве
 ver2drawNumber: function(x, y) {
 this.ver2drawDigit(x, y, ver7H1);
 this.ver2drawDigit(x+250, y, ver7H2);
 },
 
 // Отрисовка часов
 ver2tick: function() {
 // выводим на канву
 this.ver2context.fillStyle = this.ver2backColor;
 this.ver2drawNumber(this.ver2offset(1, 0), this.ver2offset(1, 0));
 }
 
};
ver2DigitalClock.ver2start();
//
var ver3DigitalClock = {
 
 // Параметры часов
 ver3backColor: '#FFFFFF', // цвет фона
 ver3darkColor: '#DCF3FF', // цвет выключенного элемента
 ver3lightColor: '#0000FF', // цвет включенного элемента
 ver3lineWidth: 30, // толщина линий
 ver3lineLength: 100, // длина линий
 
 /*
 - 0
 | | 1 2
 - 3
 | | 4 5
 - 6
 */
 ver3digits: [
 [1,1,1,0,1,1,1], // 0
 [0,0,1,0,0,1,0], // 1
 [1,0,1,1,1,0,1], // 2
 [1,0,1,1,0,1,1], // 3
 [0,1,1,1,0,1,0], // 4
 [1,1,0,1,0,1,1], // 5
 [1,1,0,1,1,1,1], // 6
 [1,0,1,0,0,1,0], // 7
 [1,1,1,1,1,1,1], // 8
 [1,1,1,1,0,1,1], // 9
 [0,0,0,1,0,0,0], // -
 [0,0,0,0,0,0,0] // +
 ],
 
 // Запуск часов
 ver3start: function() {
 var ver3canvas = document.getElementById('canvasId8');
 if ( ver3canvas.getContext ) {
 var ver3context = ver3canvas.getContext('2d');
 this.ver3context = ver3context;
 var ver3xScale = ver3canvas.width / (this.ver3offset(1, 4)+50);
 var ver3yScale = ver3canvas.height / this.ver3offset(4, 2);
 ver3context.scale(ver3xScale, ver3yScale);
 this.ver3tick();
 setInterval(function(){ver3DigitalClock.ver3tick()}, 100);
 }
 },
 
 // Получить цвет элемента
 ver3getColor: function(bool) {
 return ( bool ) ? this.ver3lightColor : this.ver3darkColor;
 },
 
 // Рассчитать смещение элемента
 ver3offset: function(countWidth, countLength) {
 return countWidth * this.ver3lineWidth + countLength * this.ver3lineLength;
 },
 
 // Отображение цифры на канве
 ver3drawDigit: function(x, y, digit) {
 var ver3ctx = this.ver3context;
 
 ver3ctx.save();
 ver3ctx.translate(x, y);
 ver3ctx.lineWidth = this.ver3lineWidth;
 ver3ctx.lineCap = 'round';
 
 // рисуем горизонтальные линии
 for (var i = 0; i < 3; i++) {
 var y = i * this.ver3offset(1, 1);
 ver3ctx.beginPath();
 ver3ctx.strokeStyle = this.ver3getColor(this.ver3digits[digit][i*3]);
 ver3ctx.moveTo(this.ver3offset(1, 0), y);
 ver3ctx.lineTo(this.ver3offset(0, 1), y);
 ver3ctx.stroke();
 }
 
 // рисуем вертикальные линии
 for (var j = 0; j < 2; j++) {
 var y = j * this.ver3offset(1, 1);
 for (var i = 0; i < 2; i++) {
 var x = i * this.ver3offset(1, 1);
 ver3ctx.beginPath();
 ver3ctx.strokeStyle = this.ver3getColor(this.ver3digits[digit][1+j*3+i]);
 ver3ctx.moveTo(x, y + this.ver3offset(1, 0));
 ver3ctx.lineTo(x, y + this.ver3offset(0, 1));
 ver3ctx.stroke();
 }
 }
 
 ver3ctx.restore();
 },
 
 // Отображение числа на канве
 ver3drawNumber: function(x, y) {
 this.ver3drawDigit(x, y, ver7S1);
 this.ver3drawDigit(x+250, y, ver7S2);
 },
 
 // Отрисовка часов
 ver3tick: function() {
 // выводим на канву
 this.ver3context.fillStyle = this.ver3backColor;
 this.ver3drawNumber(this.ver3offset(1, 0), this.ver3offset(1, 0));
 }
 
};
ver3DigitalClock.ver3start();
//
</script>