Форум

рони · #21 (**permalink**) 19.12.2019, 09:53

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

а зачем использовать nth-child? если можно сразу обратится к span class="colon", смотри запускаемый пример в 19 посте, пока установила синий цвет, вопрос как на js сделать?

мне сложно понять что вы пишите.

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

а зачем использовать nth-child?

а что нужно использовать если нет класса?

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

а зачем использовать nth-child? если можно сразу обратится к span class="colon"

причём тут class="colon"

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

вопрос как на js сделать?

как у вас написано так и сделать, только класс заменить на nth-child

<!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>

Блондинка · #22 (**permalink**) 19.12.2019, 10:13

рони,
ВСЁ СУПЕР, сейчас у меня будут действительно крутые часы...

в 19 посте в запускаемом примере, я просто скопировала код скрипта TimeTo, добавила класс и разместила на своём так называемом 'сайте'...

Besprizornik · #23 (**permalink**) 21.12.2019, 02:07

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

рони · #24 (**permalink**) 21.12.2019, 09:32

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>

Besprizornik · #25 (**permalink**) 26.12.2019, 17:27

Эх, если бы этот скрипт

<!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>

работал во всех браузерах, и в операх на андроид, а не только в хроме...

рони · #26 (**permalink**) 26.12.2019, 18:11

Besprizornik,
https://closure-compiler.appspot.com/
вставить код скрипта, нажать Compile

Besprizornik · #27 (**permalink**) 26.12.2019, 21:01

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
<style>
#clock { overflow: hidden; }
#clock.x .U_003A { color: #333399; }
#clock .date { clear: left; }
#clock .U_003A {
	color: #9c9c9c;
    float: left;
}
#clock .timer .digit:nth-child(4) {
    background-color: #228B22;
    color: #FFFFFF;
}
#clock .timer .digit:nth-child(7) {
    background-color: #FF00FF;
    color: #FFFF00;
}
#clock .timer .digit {
    border: 1px solid #0000FF;
    float: left;
    width: 16px;
    text-align: center;
    margin: 0 1.5px;
}
</style>
<span id="clock"></span>
<script>
function clock() {
	setTimeout(clock, 500);
	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 months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
	var dayNames = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
	function numberWrapInDiv(num) {
		num = String(num);
		if(num.length === 1) num = "0" + num;
		for (var i = 0, html = ""; i < num.length; i++) html += "<div class=\"digit\">" + num.charAt(i) + "</div>";
		return html;
	}
	hour = numberWrapInDiv(hour), minute = numberWrapInDiv(minute), sec = numberWrapInDiv(sec);
	document.getElementById("clock").innerHTML = "<div class='timer'>"+hour+" <div class='U_003A'>:</div> "+minute+" <div class='U_003A'>:</div> "+sec+"</div><div class='date'>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+months[month]+" "+year+" г.</div>";
	document.getElementById("clock").className.toggle("x");
}
clock();
</script>
</body>
</html>

блин, а сейчас элемент U_003A не мигает...

Malleys · #28 (**permalink**) 26.12.2019, 21:50

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

блин, а сейчас элемент U_003A не мигает...

На строке №53 вместо className должно быть classList... В IE6 не мигает и не выделяется цвет, а остальное также...

Besprizornik · #29 (**permalink**) 26.12.2019, 22:32

Malleys,
спасибо, всё работает

Блондинка · #30 (**permalink**) 06.08.2020, 04:14

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript