Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 06.08.2020, 04:14
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 600

Сообщение от Besprizornik Посмотреть сообщение

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
<style>
span.U_003A { color: #9c9c9c; }
#clock.x  span.U_003A { color: #333399; }
#clock .timer{
    display: flex;
}
#clock .timer div:nth-child(4){
    background-color: #228B22;
    color: #FFFFFF;
}
#clock .timer div:nth-child(7){
    background-color: #FF00FF;
    color: #FFFF00;
}
#clock .timer div{
    border: 1px solid #0000FF;
    display: inline-block;
    width: 16px;
    text-align: center;
    margin: 0 1.5px;
}
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
 var date = new Date();
 var hour=date.getHours();
 var minute=date.getMinutes();
 var sec=date.getSeconds();
 var day=date.getDate();
 var month=date.getMonth();
 var year=date.getFullYear();
 var weekday=date.getDay();
 var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
 var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
 function numberWrapInDiv(num)
 {
   return [...num.toString().padStart(2, "0")].map(num => `<div>${num}</div>`).join("")
 }
 [hour, minute, sec] = [hour, minute, sec].map(numberWrapInDiv)
document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <span class='U_003A'>:</span> "+minute+" <span class='U_003A'>:</span> "+sec+"</div>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
</body>
</html>
Народ, как в этом скрипте удалить время и добавить дивы к числу и году? Тоесть число 06 должно быть в двух отдельных дивах(квадратиках) и год должен быть в 5ти отдельных дивах (квадратиках)
<div>2</div><div>0</div><div>2</div><div>0</div><div>г.</div>
Ответить с цитированием
  #32 (permalink)  
Старый 06.08.2020, 04:29
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 600

И наверное нет смысла обновлять ежесекундно если на странице должно отображаться только день недели, число, месяц, год, кажется лучше определить время от загрузки страницы до конца суток, и обновить и потом раз в 24 часа по таймеру обновлять?
Ответить с цитированием
  #33 (permalink)  
Старый 06.08.2020, 05:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,728

Сообщение от Блондинка
определить время от загрузки страницы до конца суток, и обновить и потом раз в 24 часа
То есть, есть уверенность стопроцентная, что кто-то будет сидеть по 24 часа и ждать обновления? А ничего, что время не будет ждать 24 часа, оно будет тикать, и фактически уже будет другой день, а ваш "календарь" все еще живет прошлым?
Ответить с цитированием
  #34 (permalink)  
Старый 06.08.2020, 16:56
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 600

Сообщение от laimas Посмотреть сообщение
То есть, есть уверенность стопроцентная, что кто-то будет сидеть по 24 часа и ждать обновления? А ничего, что время не будет ждать 24 часа, оно будет тикать, и фактически уже будет другой день, а ваш "календарь" все еще живет прошлым?
Немножко не так, типа осталась открытой вкладка,и посетитель зашел через сутки-двое,в этом случае надо чтобы все компоненты даты соответсвовали сегодняшней, а время вроде тут не причём, так сказать два разных отдельных скрипта, время отдельно (часы, минуты, секунды) а один скрипт с ежесекундным обновлением это один скрипт, дата (день недели, число месяц год) с обновлением раз в сутки другой скрипт...
Ответить с цитированием
  #35 (permalink)  
Старый 06.08.2020, 19:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,728

Ну это ведь речь не об обновлении, а установке текущей даты во время активации страницы, а не то, что в начале вы написали.
Ищите Page Visibility API, оно сообщит когда вкладка стала активна, о поддержке этого API и "эмуляции" его в браузерах без поддержки.
Ответить с цитированием
  #36 (permalink)  
Старый 06.08.2020, 20:16
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 600

laimas,
пока вопрос как разделить число и год на квадратики...
Ответить с цитированием
  #37 (permalink)  
Старый 06.08.2020, 20:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,728

Сообщение от Блондинка
пока вопрос как разделить число и год на квадратики...
Зачем, если у вас практически статические данные - Дата, а получать вы будете ее из объекта Date, получайте компоненты даты, разделяйте их на отдельные, и вставляйте вот что угодно. К чему вам код выше?
Ответить с цитированием
  #38 (permalink)  
Старый 06.08.2020, 21:27
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 630

Сообщение от Блондинка
пока вопрос как разделить число и год на квадратики...
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
<style>
span.U_003A { color: #9c9c9c; }
#clock.x  span.U_003A { color: #333399; }
#clock .timer{
    display: flex;
}
#clock .timer div:nth-child(4){
    background-color: #228B22;
    color: #FFFFFF;
}
#clock .timer div:nth-child(7){
    background-color: #FF00FF;
    color: #FFFF00;
}
#clock .timer div{
    border: 1px solid #0000FF;
    display: inline-block;
    width: 16px;
    text-align: center;
    margin: 0 1.5px;
}
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
 var date = new Date();
 var hour=date.getHours();
 var minute=date.getMinutes();
 var sec=date.getSeconds();
 var day=date.getDate();
 var month=date.getMonth();
 var year=date.getFullYear();
 var weekday=date.getDay();
 var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
 var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
 function numberWrapInDiv(num)
 {
   return [...num.toString().padStart(2, "0")].map(num => `<div>${num}</div>`).join("")
 }

 [hour, minute, sec, day, year] = [hour, minute, sec, day, year].map(numberWrapInDiv)
document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <span class='U_003A'>:</span> "+minute+" <span class='U_003A'>:</span> "+sec+"</div>"
	+dayNames[weekday]+"<br/>"
	+"<div class='timer'>"+day+" "+monthes[month]+" "+year+"<div>г.</div>"+"</div>";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
</body>
</html>
Ответить с цитированием
  #39 (permalink)  
Старый 06.08.2020, 22:35
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 600

Блииин, достало это раритетное дерьмо, как обычно только белый экран...
Ответить с цитированием
  #40 (permalink)  
Старый 07.08.2020, 21:14
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 600

Сообщение от voraa Посмотреть сообщение
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body>
<style>
span.U_003A { color: #9c9c9c; }
#clock.x  span.U_003A { color: #333399; }
#clock .timer{
    display: flex;
}
#clock .timer div:nth-child(4){
    background-color: #228B22;
    color: #FFFFFF;
}
#clock .timer div:nth-child(7){
    background-color: #FF00FF;
    color: #FFFF00;
}
#clock .timer div{
    border: 1px solid #0000FF;
    display: inline-block;
    width: 16px;
    text-align: center;
    margin: 0 1.5px;
}
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
 var date = new Date();
 var hour=date.getHours();
 var minute=date.getMinutes();
 var sec=date.getSeconds();
 var day=date.getDate();
 var month=date.getMonth();
 var year=date.getFullYear();
 var weekday=date.getDay();
 var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
 var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
 function numberWrapInDiv(num)
 {
   return [...num.toString().padStart(2, "0")].map(num => `<div>${num}</div>`).join("")
 }

 [hour, minute, sec, day, year] = [hour, minute, sec, day, year].map(numberWrapInDiv)
document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <span class='U_003A'>:</span> "+minute+" <span class='U_003A'>:</span> "+sec+"</div>"
	+dayNames[weekday]+"<br/>"
	+"<div class='timer'>"+day+" "+monthes[month]+" "+year+"<div>г.</div>"+"</div>";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>
</body>
</html>
На экране андроид 4, 15 года скрипт не работает, белый экран...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выводить текущее время каждую минуту DarkPhoenix Общие вопросы Javascript 3 16.06.2019 20:33
Текущее время в значение NeonMan Events/DOM/Window 2 25.05.2019 16:36
Указать текущее время. luciusred Javascript под браузер 0 03.04.2018 09:27
Нужно, чтобы getTime() постоянно показывала текущее время без обновления страницы aldrve Общие вопросы Javascript 6 03.10.2017 19:29
Position fixed, но динамический по оси ОХ tvixa Элементы интерфейса 4 09.09.2013 14:39