рони,
а зачем использовать nth-child? если можно сразу обратится к span class="colon", смотри запускаемый пример в 19 посте, пока установила синий цвет, вопрос как на js сделать? |
Цитата:
Цитата:
Цитата:
Цитата:
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/time-to@1.2.3/timeTo.css"> <script src="https://cdn.jsdelivr.net/npm/time-to@1.2.3/jquery.time-to.js"></script> <script> $(function() { var clock = $('.your-clock').timeTo({theme: "black"}); var spans = [].slice.call(document.querySelectorAll('div.your-clock > span:nth-child(6), div.your-clock > span:nth-child(3)'), 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); })() }); </script> </head> <body> <div class="your-clock"></div> </body> </html> |
рони,
ВСЁ СУПЕР, сейчас у меня будут действительно крутые часы... в 19 посте в запускаемом примере, я просто скопировала код скрипта TimeTo, добавила класс и разместила на своём так называемом 'сайте'... |
рони,
я хотел спросить, получится ли в скрипте из 10 поста, числа часов минут секунд разделить на отдельные цифры, и каждую цифру поместить в отдельный див? без всяких анимаций и дополнительных скриптов? |
Besprizornik,
что мешает добавить теги div в код. <!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 } </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> |
Эх, если бы этот скрипт
<!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> работал во всех браузерах, и в операх на андроид, а не только в хроме... |
|
Цитата:
|
Цитата:
|
Malleys,
спасибо, всё работает :thanks: |
Часовой пояс GMT +3, время: 20:39. |