14.08.2019, 18:45
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
остался один вопросик, как сделать ежесекундное обновление дива?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
font: 14px serif;
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 5px;
text-align: center;
}
#block_time-data {
display: inline-block;
white-spage: nowrap; }
span { display: inline-block;
white-space: nowrap; }
#hours, #min, #sec { }
.colon { color: hsl(0, 0%, 60%); }
</style>
</head>
<body>
<div id="block_time-data">
<span id="hours"></span><span class="colon">:</span><span id="min"></span><span class="colon">:</span><span id="sec"></span><br>
<span id="day"></span><br>
<span id="date"></span>
<span id="month_name"></span>(<span id="month"></span>)
<span id="year"></span>
г.
</div>
<script>
var hours = document.getElementById('hours');
var minutes = document.getElementById('min');
var seconds = document.getElementById('sec');
var day = document.getElementById('day');
var date_name = document.getElementById('date');
var month = document.getElementById('month');
var month_name = document.getElementById('month_name');
var year = document.getElementById('year');
var date = new Date();
var days = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'];
var monthes = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
hours.innerHTML = date.getHours();
minutes.innerHTML = date.getMinutes();
seconds.innerHTML = date.getSeconds();
day.innerHTML = days[date.getDay()];
date_name.innerHTML = date.getDate();
month.innerHTML = date.getMonth()+1;
month_name.innerHTML = monthes[date.getMonth()];
year.innerHTML = date.getFullYear();
[hours, min, sec, date_name, month].forEach(function(el) {
el.innerHTML = ("0"+ el.innerHTML).slice(-2)
})
</script>
</body>
</html>
|
|
14.08.2019, 18:52
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Блондинка,
(function timer()
{
//сюда строки 42, 46 - 57
window.setTimeout(timer, 1000);
})()
|
|
15.08.2019, 03:04
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Есть десять цветов hsl(0, 0%, 54%) hsl(0, 0%, 48%) hsl(0, 0%, 42%) hsl(0, 0%, 36%) hsl(0, 0%, 30%) hsl(0, 0%, 24%) hsl(0, 0% 18%) hsl(0, 0%, 12%) hsl(0, 0%, 6%) hsl(0, 0%, 0%), возможно ли сделать чтобы <span class="colon"> менял цвет от светлосерого до чёрного с интервалом в 100 милисекунд?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
font: 14px serif;
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 5px;
text-align: center;
}
#block_time-data {
display: inline-block;
white-spage: nowrap; }
span { display: inline-block;
white-space: nowrap; }
#hours, #min, #sec { }
colon { color: hsl(0, 0%, 54%); }
</style>
</head>
<body>
<div id="block_time-data">
<span id="hours"></span><span class="colon">:</span><span id="min"></span><span class="colon">:</span><span id="sec"></span><br>
<span id="day"></span><br>
<span id="date"></span>
<span id="month_name"></span>(<span id="month"></span>)
<span id="year"></span>
г.
</div>
<script>
var hours = document.getElementById('hours');
var minutes = document.getElementById('min');
var seconds = document.getElementById('sec');
var day = document.getElementById('day');
var date_name = document.getElementById('date');
var month = document.getElementById('month');
var month_name = document.getElementById('month_name');
var year = document.getElementById('year');
var days = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'];
var monthes = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
(function timer()
{
var date = new Date();
hours.innerHTML = date.getHours();
minutes.innerHTML = date.getMinutes();
seconds.innerHTML = date.getSeconds();
day.innerHTML = days[date.getDay()];
date_name.innerHTML = date.getDate();
month.innerHTML = date.getMonth()+1;
month_name.innerHTML = monthes[date.getMonth()];
year.innerHTML = date.getFullYear();
[hours, min, sec, date_name, month].forEach(function(el) {
el.innerHTML = ("0"+ el.innerHTML).slice(-2)
})
window.setTimeout(timer, 1e3);
})()
</script>
</body>
</html>
Последний раз редактировалось Блондинка, 15.08.2019 в 03:44.
|
|
15.08.2019, 04:07
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
P. S. использовать css-свойство animation нежелательно, поскольку загрузка страницы происходит в разные моменты времени, а не точно в 000 милисекунд, и анимация начнет работать асинхронно с обновлением секунд...
|
|
15.08.2019, 04:27
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
Сообщение от Блондинка
|
|
это я знаю, надо было именно массив...
|
зачем? такого же результата как у вас, рамка с часами и датой можно добиться гораздо проще.
|
Сообщение от Блондинка
|
|
возможно ли сделать чтобы <span class="colon"> менял цвет от светлосерого до чёрного с интервалом в 100 милисекунд?
|
<span class="colon" style="font-size: 100px">:</span>
<script>
var colon = document.querySelectorAll('.colon'), i=0;
(function timer() {
i = i ? i-6 : 54;
colon.forEach(el=>el.style.color = 'hsl(0, 0%, '+i+'%)');
setTimeout(timer, 100);
})();
</script>
|
|
15.08.2019, 04:32
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
функцию timer можно использовать одну, время обновлять по условию
|
|
15.08.2019, 06:15
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Сообщение от j0hnik
|
|
зачем? такого же результата как у вас, рамка с часами и датой можно добиться гораздо проще.
|
в массив можно внести сокращенные названия месяцев, можно менять окончания названий, можно изменить регистр букв заглавные/прописные, можно заменить на римские цифры и т. д.
а можно скрипт попроще, типа массив из десяти цветов(неажно в каком формате hex, rgb, hsl) и просто изменение цвета с интервалом в 100 милисекунд... |
|
|
|
