Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   помочь с функцией (https://javascript.ru/forum/misc/78222-pomoch-s-funkciejj.html)

Блондинка 11.08.2019 22:56
помочь с функцией
 
Помогите добавить функцию, которая добавит ноль перед цифрой если число меньше 10ти сразу у всех элементов из списка
['hours', 'minutes', 'seconds', 'date', 'month']

если ноль не нужен, то просто удаляется этот элемент из списка...

в этом скрипте 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <style>
            div {
                font: 14px serif;
                border: 1px solid #ccc;
                padding: 5px;
                margin-bottom: 5px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="hours"></div>
        <div id="minutes"></div>
        <div id="seconds"></div>
        <div id="day"></div>
        <div id="date"></div>
        <div id="month"></div>
        <div id="month_name"></div>
        <div id="year"></div>
        <script>
            var hours = document.getElementById('hours');
            var minutes = document.getElementById('minutes');
            var seconds = document.getElementById('seconds');
            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();
 
            hours.innerHTML = date.getHours();
            minutes.innerHTML = date.getMinutes();
            seconds.innerHTML = date.getSeconds();
 
            day.innerHTML = date.toLocaleString(window.navigator.language, { weekday: 'long' });
            date_name.innerHTML = date.getDate();
            month.innerHTML = date.getMonth()+1;
            month_name.innerHTML = date.toLocaleString(window.navigator.language, { month: 'long' });
            year.innerHTML = date.getFullYear();
        </script>
    </body>
</html>

рони 11.08.2019 23:51
Блондинка,
в конец скрипта
[hours, minutes, seconds, date_name, month].forEach(function(el) {
               el.innerHTML = ("0"+ el.innerHTML).slice(-2)
             })

Блондинка 12.08.2019 02:54
что значат и как работают 43 и 46 строчки, а ты именно window.navigator.language?

Блондинка 12.08.2019 03:10
можно ли заменить (и нужно ли? ) на массивы с названиями дней недели месяцев, чтобы можно было манипулировать окончанием август/августа, строчными и прописными буквами Августа/августа/АВГУСТА, языком русский/украинский/белоруский/литовский/латышский/эстонский

рони 12.08.2019 09:29
Цитата:
Сообщение от Блондинка
что значат
выделить незнакомый термин и поискать в гугле.
https://developer.mozilla.org/ru/doc...toLocaleString
это значит форматировать строку в зависимости от языка, window.navigator.language это язык страницы на которой работает скрипт, например ru. остальные параметры смотрите по ссылке.

Блондинка 12.08.2019 17:18 
<!DOCTYPE html>
<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;
        }
    </style>
</head>
<body>
    <script type="module">
        let days = ["Воскресенье", "Понедельник", "Вторник",
            "Среда", "Четверг", "Пятница", "Суббота"],
            months = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
                "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];
        let d = new Date();
        for (let item of [
            ["hours", () => d.getHours()],
            ["minutes", () => d.getMinutes()],
            ["seconds", () => d.getSeconds()],
            ["day", () => days[d.getDay()]],
            ["date", () => d.getDate()],
            ["month", () => d.getMonth() + 1],
            ["month_name", () => months[d.getMonth()]],
            ["year", () => d.getFullYear()]
        ])
            document.getElementById(item[0]).textContent = item[1]();
    </script>
    <div id="hours"></div>
    <div id="minutes"></div>
    <div id="seconds"></div>
    <div id="day"></div>
    <div id="date"></div>
    <div id="month"></div>
    <div id="month_name"></div>
    <div id="year"></div>
</body>
</html>

Почему не показывает компоненты даты ? только пустые дивы...

Блондинка 12.08.2019 17:22
рони,
лучше подскажи как заменить на массивы в первом посте

рони 12.08.2019 17:24
Цитата:
Сообщение от Блондинка
Почему не показывает компоненты даты ?
потому что это код для современных браузеров

Блондинка 13.08.2019 00:46
рони,
как правильно заменить дни недели и месяцы на массивы в этом скрипте? 

<!DOCTYPE html>
<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;
            }
        </style>
    </head>
    <body>
        <div id="hours"></div>
        <div id="minutes"></div>
        <div id="seconds"></div>
        <div id="day"></div>
        <div id="date"></div>
        <div id="month"></div>
        <div id="month_name"></div>
        <div id="year"></div>
        <script>
            var hours = document.getElementById('hours');
            var minutes = document.getElementById('minutes');
            var seconds = document.getElementById('seconds');
            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();
 
            hours.innerHTML = date.getHours();
            minutes.innerHTML = date.getMinutes();
            seconds.innerHTML = date.getSeconds();
 
            day.innerHTML = date.toLocaleString(window.navigator.language, { weekday: 'long' });
            date_name.innerHTML = date.getDate();
            month.innerHTML = date.getMonth()+1;
            month_name.innerHTML = date.toLocaleString(window.navigator.language, { month: 'long' });
            year.innerHTML = date.getFullYear();
            [hours, minutes, seconds, date_name, month].forEach(function(el) {
               el.innerHTML = ("0"+ el.innerHTML).slice(-2)
             })
         </script>
    </body>
</html>

ksa 13.08.2019 08:25
Блондинка, не дублируй вопросы в разных темах. :nono:

Блондинка 15.08.2019 19:22
если добавить массив 
var colons =["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%)"]
(коды цветов могут быть в любом формате hex rgb hsl)

в этот скрипт 
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link href="http://allfont.ru/allfont.css?fonts=lcdmono-ultra" rel="stylesheet" type="text/css">
    <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 { font-family: 'LCDMono Ultra', arial; font-size: 24px; }
        .colon { font-size: 20px; padding: 5px; position: relative; bottom: 3.5px; 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>


как сделать чтобы цвет спанов с классом colon плавно менялся от светлосерого до чёрного с интервалом в 100 милисекунд

рони 15.08.2019 19:37
Блондинка,
https://developer.mozilla.org/ru/doc...CSS/@keyframes

Блондинка 15.08.2019 19:57
рони,
использовать анимацию нежелательно, страница загружается в разные моменты времени, а не в 000 милисекунд, и анимация будет работать асинхронно с обновлением секунд, как это сделать на js? сорри, но моих познаний в яваскрипт тут явно недостаточно...

рони 15.08.2019 20:13
Блондинка,
var spans = [].slice.call(document.querySelectorAll('.colon'), 0);
            var colons =["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%)"];
            step = 0;
            (function color()
            {
            spans.forEach(function(elem) {
            elem.style.color = colons[step];
              });
            step = ++step % colons.length;
            window.setTimeout(color, 100);
            })()

Блондинка 15.08.2019 20:20
насколько я поняла это добавить в конец скрипта?

рони 15.08.2019 20:21
Блондинка,
да

Блондинка 07.10.2019 12:21
Как внутри элемента с Id link-calendar найти ссылку и в случае если адрес указанный в ссылке совпадает с текущим, то скрыть ссылку (display none), другими словами при переходе по ссылке на странице 'календарь' надо скрыть ссылку ведущую на саму себя использую location href

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://cactus.lark.ru/css/logo.css">
    <style>
    @import url('https://fonts.googleapis.com/css?family=Baumans&display=swap');
@font-face { font-family: Cactus; font-style: normal; font-weight: 400; src: url(https://www.fontrepo.com/font/3008/cactus-cuties.ttf) format('truetype'); }
    #header { width: 960px; border: 1px solid #a9a9a9; border-radius: 15px/12px; display: flex; justify-content: space-between; width: 100%; height: auto; }

    #header_left { width: 785px; border: 1px solid #a9a9a9; border-radius: 15px/12px; margin-bottom: 0; flex: 0 1 785px; overflow:  hidden; }
    #box-logo { position: relative; top: 51.5px; }
    #block_time-data {border: 1px solid #a9a9a9; border-radius: 15px/12px; margin: 0 0 0 5px; flex: 0 1 auto; }
    #header-time { width: 150px; height: 37px; padding: 0px; background: ; color: hsl(120,100%,25%); text-align: center; font-family: 'Baumans', cursive; font-size: 30px; font-weight: bold; white-space: nowrap; border: 1px solid #a9a9a9; border-radius: 15px/12px; }
    #header-date { width: 150px; padding: 0px; color: hsl(120,100%,25%); font-family: 'Baumans', cursive; font-weight: bold; font-size: 18px; height: 182px; margin-bottom: 0; border: 1px solid #a9a9a9; border-radius: 15px/12px; }
      #header_day { padding: 0px; font: bold 18px serif; }
      #header_date { padding: 0px; font-family: 'Baumans', cursive; font-weight: bold; font-size: 48px; }
      #header_month { padding: 0px; font: bold 18px serif; }
      #header_year { padding: 0px; font: bold 18px serif; }
      #link-calendar { padding: 0px; font-weight: normal; font-size: 10px; font-family; serif; margin-bottom: 0; }
      #link-calendar { color: hsl(210,100%,40%); }
      div {
        font: 14px serif;
        padding: 5px;
        margin-bottom: 5px;
        text-align: center; }
        #block_time-data {
        display: inline-block;
        white-spage: nowrap; }
        span { 
        white-space: nowrap; }
        #hours, #min, #sec { margin: 0 3px; padding-right: 2px; position: relative; top: 1.5px; }
.colon { position: relative; bottom: 2px; }
    </style>
    </head>
    <body>
    <div id="header">
    <div id="header_left">
    <div id="box-logo">
    <span id="C_f">c</span><span id="a_f">a</span><span id="c_f">c</span><span id="t_f">t</span><span id="u_f">u</span><span id="s_f">s</span>
    <span id="C">c</span><span id="a">a</span><span id="c">c</span><span id="t">t</span><span id="u">u</span><span id="s">s</span>
</div>
    </div>
        <div id="block_time-data">
<div id="header-time"><span id="hours"></span><span class="colon">:</span><span id="min"></span><span class="colon">:</span><span id="sec"></span></div>
<div id="header-date">
        <div id="header_day"><span id="day"></span></div>
        <div id="header_date"><span id="date"></span></div>
        <div id="header_month"><span id="month_name"></span></div>
        <div id="header_year"><span id="year"></span> г.</div>
<div id="link-calendar"><a>календарь</a></div>
        </div>
        </div>
        </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_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_name.innerHTML = monthes[date.getMonth()];
      year.innerHTML = date.getFullYear();
      [hours, min, sec].forEach(function(el) {
      el.innerHTML = ("0"+ el.innerHTML).slice(-2)
      })
      window.setTimeout(timer, 1e3);
      })()
      var spans = [].slice.call(document.querySelectorAll('.colon'), 0);
      var colons =["hsl(120, 100%, 97%)", "hsl(120, 100%, 89%)", "hsl(120, 100%, 81%)", "hsl(120, 100%, 73%)", "hsl(120, 100%, 65%)", "hsl(120, 100%, 57%)", "hsl(120, 100%, 49%)", "hsl(120, 100%, 41%)", "hsl(120, 100%, 33%)", "hsl(120, 100%, 25%)"];
      step = 0;
      (function color()
      {
spans.forEach(function(elem) {   elem.style.color = colons[step];
      });
      step = ++step % colons.length;
 window.setTimeout(color, 100);
      })()
    </script>
  </body>
</html>

Блондинка 07.10.2019 13:54
U p

Блондинка 20.04.2021 01:27
Цитата:
Сообщение от рони (Сообщение 511724)
Блондинка,
var spans = [].slice.call(document.querySelectorAll('.colon'), 0);
            var colons =["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%)"];
            step = 0;
            (function color()
            {
            spans.forEach(function(elem) {
            elem.style.color = colons[step];
              });
            step = ++step % colons.length;
            window.setTimeout(color, 100);
            })()


народ, подскажите как сделать подобную анимацию на js, только со свойством opacity, начальное значение к примеру 02 и в течении секунды постепенно переходит к значению opacity: 1.0:

ksa 20.04.2021 11:57
Цитата:
Сообщение от Блондинка
как сделать подобную анимацию на js, только со свойством opacity
Для этого JS не нужен...
http://shpargalkablog.ru/2011/07/tra...aciya-css.html
Смотри, там есть пример с прозрачностью. ;)

Блондинка 20.04.2021 12:06
ksa,
см пост 12 и 13, использовать свойство стилей анимация крайне не желательно, как найти решение на js

ksa 20.04.2021 15:52
Цитата:
Сообщение от Блондинка
как найти решение на js
Для этого есть setTimeout()...
https://javascript.ru/blog/andrej-pa...mmnoy-animacii

Блондинка 20.04.2021 18:30
ksa,
лучше бы помог решить эту проблему, как рони в 12 посте... 
var spans = [].slice.call(document.querySelectorAll('.colon'), 0);
            var colons =["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%)"];
            step = 0;
            (function color()
            {
            spans.forEach(function(elem) {
            elem.style.color = colons[step];
              });
            step = ++step % colons.length;
            window.setTimeout(color, 100);
            })()


есть один/несколько спанов с классом "colon",как их заставить мигать с помощью js, чтобы раз в 0.5 сек меняли значение свойства "opacity" с 0.2 на 1.0 например, значения подберу методом тыка...

ksa 20.04.2021 18:52
Я не на столько заинтересован в решении этой "проблемы"...

Цитата:
Сообщение от Блондинка
чтобы раз в 0.5 сек меняли значение свойства "opacity" с 0.2 на 1.0 например
Для этого есть setInterval()...

рони 20.04.2021 19:11
Блондинка,
var spans = document.querySelectorAll('.colon');
var colons = ["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%)"];
var op = [.2, .4, .6, .8, 1, 1, .8, .6, .4, .2];
step = 0;
(function color() {
    spans.forEach(function(elem) {
        elem.style.color = colons[step];
        elem.style.opacity = op[step];
    });
    step = ++step % colons.length;
    setTimeout(color, 200);
})()

Блондинка 20.04.2021 20:26
рони,
надо что-то типа 
var spans = document.querySelectorAll('.colon');
var op = [0.2, 0.4, 0.6, 0.8, 1.0];
step = 0;
(function color() {
    spans.forEach(function(elem) {
        elem.style.opacity = op[step];
    });
    step = ++step % colons.length;
    setTimeout(color, 200);
})()


чтобы элементы с классом "colon" от прозрачного стали непрозрачными, а потом опять, только в одну сторону с 0.2 до 1.0, правда не знаю будет этот мой код работать...

рони 20.04.2021 20:39
Блондинка,
colons.length; op.length;

Блондинка 20.04.2021 20:52 
var spans = document.querySelectorAll('.colon');
var op = [0.2, 0.4, 0.6, 0.8, 1.0];
step = 0;
(function color() {
    spans.forEach(function(elem) {
        elem.style.opacity = op[step];
    });
    step = ++step % op.length;
    setTimeout(color, 200);
})()


вроде так... ничего не пропустила?


Часовой пояс GMT +3, время: 18:43.