Форум

Блондинка · #11 (**permalink**) 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 милисекунд

рони · #12 (**permalink**) 15.08.2019, 19:37

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

Блондинка · #13 (**permalink**) 15.08.2019, 19:57

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

рони · #14 (**permalink**) 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 (**permalink**) 15.08.2019, 20:20

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

рони · #16 (**permalink**) 15.08.2019, 20:21

Блондинка,
да

Блондинка · #17 (**permalink**) 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>

Блондинка · #18 (**permalink**) 07.10.2019, 13:54

Блондинка · #19 (**permalink**) 20.04.2021, 01:27

Сообщение от рони

Блондинка,

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 (**permalink**) 20.04.2021, 11:57

Сообщение от Блондинка

как сделать подобную анимацию на js, только со свойством opacity

Для этого JS не нужен...
http://shpargalkablog.ru/2011/07/tra...aciya-css.html
Смотри, там есть пример с прозрачностью.

Форум

Справочник

Discord чат

Курсы javascript