Всё, вроде сделал, ну будет немножко время расходиться, зато не жрет так, как предыдущий...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var e, sec = 0 // Элемент с часами, секунды
function DecToHex(c) // Перевести число(байт) в HEX
{
var hex = c.toString(16)
return hex.length == 1 ? "0" + hex : hex
}
function update_hours() // Обновить время в элементе
{
var h = (sec % 86400) / 3600 ^ 0 // Получить часы (остаток от деления на сутки - чтобы не было 25 часов)
var m = (sec % 3600) / 60 ^ 0 // Получить минуты
var s = sec % 60 // Получить секунды
sec++ // Считать секунды
e.innerHTML = ' ' + (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s) + ' '
var rg = [0, 0] // Массив для красного и зеленого цвета
if(s < 30) rg = [127 + Math.round(s * 4.25), 255] // До 30 секунд медленно из зеленого в желтый
else if(s < 50) rg = [255, 255 - (Math.round(s * 4.25) - 127)] // До 50 из желтого в оранжевый
else rg = [255, 170 - (Math.round(s * 17) - 850)] // До 59 из оранжевого в красный
var col = "#" + DecToHex(rg[0]) + DecToHex(rg[1]) + '00' // Форматирование цвета
e.style.color = col // Задать цвет текста элементу
}
function main() // Стартовая функция
{
var b = document.querySelector('body') // Найти элемент body
e = document.createElement('block') // Создать элемент
e.style.backgroundColor = '#000000' // Задать цвет фона элементу
b.appendChild(e) // Вставить элемент в body
var t = new Date() // Получить 1 раз локальное время для UTC +00
var h = t.getUTCHours()
var m = t.getUTCMinutes()
var s = t.getUTCSeconds()
// Перевести всё в секунды, и прибавить нужный часовой пояс, и скорректировать секунды
sec = ((h * 3600) + (m * 60) + s) + ((3 * 3600) - 4)
update_hours() // Сразу отобразить
setInterval(update_hours, 1000) // И каждую секунду
}
document.addEventListener('DOMContentLoaded', main)
</script>
</head>
<body></body>
</html>