К каждой цифре добавить свой класс?

Question

[NeveR3d]

Если я запускаю скрипт я вижу 74253 Seconds, мне нужно чтоб шло. Помогите пожалуйста

<div id="txt">
<span class="digit-1">7</span>
<span class="digit-2">4</span>
<span class="digit-3">2</span>
<span class="digit-4">5</span>
<span class="digit-5">3</span>
</div>

var today = new Date();
var start = new Date(today.getFullYear(),today.getMonth(),today.getDate(),0,0,0,1);
console.log(today, start);
function startTime(){
setInterval(function() {
   document.getElementById('txt').innerHTML = (parseInt((new Date - start) / 1000));
}, 1000);

}

Comments

[gleendo]

вы еще c backend код сюда напишите...думаю будет понятней чего вы хотите

[NeveR3d]

iamevg_, его нет) это чтоб понятно просто было

[y0u]

NeveR3d, это был сарказм

[gleendo]

NeveR3d, ну серьезно, уберите лишний код. Думаю CSS тут вообще не нужен. Оставьте только значимый код. Далее оформите его нормально. Вас разве не воротит от такого code style? И к тому же сформулируйте как нибудь по другому ваш вопрос, а то в такой постановке я вообще не понял чего вы хотите.

[NeveR3d]

iamevg_, исправил, я хочу чтоб к каждой цифре в коде, шел класс digit-2, где 2 это порядковый номер цифры

[Олег]

iamevg_, Вспомнилось. пару лет назад где то, чувак bootstrap выкатил с js и css))))

[gleendo]

NeveR3d, Напиши результат который вы хотите чтобы получился...Иначе вам сомневаюсь что помогут при такой постановки вопроса. Ну ничего не понятно же чего вы хотите
Где, какие цифры, классы, порядковые номера...
Ну и ваше "Ну и так далее" вообще добивает

[NeveR3d]

iamevg_, Обновил вопрос

[gleendo]

NeveR3d, https://jsfiddle.net/tykkf14c/3/

[NeveR3d]

iamevg_, Дада оно самое, теперь подскажите как обернуть этот скрипт в теги?, а то я вставляю между divами, но не работает

[gleendo]

NeveR3d, JS код пишется в

<script>
  // some code
</sctipt>

[gleendo]

NeveR3d, Скажите для чего вам такое поведение нужно? Код который я вам предоставил, работает, но это не лучшая практика. Опишите свою задачу, подскажу как сделать лучше

[NeveR3d]

iamevg_, Да я понял, я вот так делаю

<div id="counter">
	<div id="counter-on-site">Сейчас на сайте</div>
	<div id="counter-digits">

		<div id="counter-digits-tab-1" class="counter-digits-tabs" style="display: block;">

				<script type="text/javascript">
const today = new Date();
const start = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 1);
const result = document.createElement("div");

result.id = "txt";

setInterval(() => {
	const value = (parseInt((new Date - start) / 1000));
  const arr = String(value).split("");
  const length = arr.length;
  let html = "";

  for (let i = 0; i < length; i += 1) {
  	html += `<span class="digit-${i}">${arr[i]}</span><br>`;
  }

  document.body.innerHTML = html;
}, 1000);
</script>

		</div>


	</div>
	<div id="counter-digits-tabs-triggers">

			<a href="#counter-digits-tab-1" class="active">Организаций</a>


		<div class="clear"></div>
	</div>
</div>

[gleendo]

NeveR3d, Вы явно пишите/писали на php. JS в конце документа помещайте...а не в середине разметки

[NeveR3d]

iamevg_,

const start = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0, 1);

setInterval(() => {
  const arr = String((parseInt((new Date - start) / 1000))).split("");
  const length = arr.length;
  let html = `<div id="counter"><div id="counter-on-site">Сейчас на сайте</div><div id="counter-digits"><div id="counter-digits-tab-1" class="counter-digits-tabs" style="display: block;">`;

  for (let i = 0; i < length; i += 1) {
    html += `<span class="digit-${i}">${arr[i]}</span>`;
  }

  html += "</div></div><div id=\"counter-digits-tabs-triggers\"><a href=\"#counter-digits-tab-1\" class=\"active\">Организаций</a><div class=\"clear\"></div></div></div>";

  document.body.innerHTML = html;
}, 1000);

Вот так оформил, подскажите пожалуйста теперь как последнюю цифру убрать

[gleendo]

NeveR3d, Чтобы она не отображалась?

[NeveR3d]

iamevg_, Да

[gleendo]

NeveR3d,

// заменить на вот это
for (let i = 0; i < length - 1; i += 1) {

[NeveR3d]

iamevg_, да отлично, на будущее, подскажите как инвертировать класс, т.е первой цифре digit-5, второй digit-4 и т.д. Благодарю заранее за помощь

[gleendo]

NeveR3d,
Если помог, отметьте ответ решением, а реверс делает так:

for (let i = length - 1; i >= 0; i -= 1) {
  // some code
}

[NeveR3d]

iamevg_, так пишет(
undefined7

[gleendo]

NeveR3d,

for (let i = length - 1; i >= 0; i -= 1) {
  // some code
}

[NeveR3d]

iamevg_, последняя цифра с digit-4, а должна с 6(

[gleendo]

NeveR3d, В данный момент число четырехзначное...

[NeveR3d]

iamevg_, А у меня 5((

[gleendo]

NeveR3d,

for (let i = length - 1; i >= 0; i -= 1) { // Если цифр 5, то будет 4, 3, 2, 1, 0

for (let i = length; i >= 0; i -= 1) { // Если цифр 5, то будет 5, 4, 3, 2, 1, 0

[NeveR3d]

iamevg_, если
for (let i = length; i >= 0; i -= 1) {
То ошибка undefined

[gleendo]

NeveR3d, все должно быть ок

[NeveR3d]

iamevg_,
Вот

[gleendo]

NeveR3d, Я не знаю как у вас там конкретно все реализовано, но цифр может быть не 6, а меньше.
Залейте в песочницу какую нибудь данный данный код который реализует все это...просто по картинке ванговать не вариант
К тому же у вас данный счетчик зависит от времени и исходя из этого число может получаться сильно разным, в один момент времени 2345, в другой 52345, через некоторое время опять меньше 4212

[NeveR3d]

iamevg_, https://jsfiddle.net/0d6g6wnm/1/

[gleendo]

NeveR3d,
У меня видите совсем другой результат

[NeveR3d]

iamevg_, Вот как убрать этот undefined

[gleendo]

NeveR3d, Я же вам говорю, у вас все завязано на время, а это не оптимальное решение.

for (let i = length - 1; i >= 0; i -= 1) { так...но цифры не будут прижаты к какой либо стороне..

[NeveR3d]

iamevg_, все отлично) Но именно последняя цифра все портит(

[gleendo]

NeveR3d, Вы изначально все не очень нормально сделали. Я бы вам советовал вообще все переделать, но сначала спроектировать все это и продумать все сценарии...один тот факт что длина числа будет рандомно меняться и не у всех одинаково, вы явно это не учли. В общем давайте завершим диалог, 35 сообщений уже...вы как заказчик.
бесплатный лимит уже кончился...уже простите, больше часа уже с вами тут вожусь

Answer 1

[gleendo]

const start = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0, 1);

setInterval(() => {
  const arr = String((parseInt((new Date - start) / 1000))).split("");
  const length = arr.length;
  let html = `<div id="txt">`;
  
  for (let i = 0; i < length; i += 1) {
    html += `<span class="digit-${i}">${arr[i]}</span>`;
  }
  
  html += "</div>";
  
  document.body.innerHTML = html;
}, 1000);

Answer 2

[Денис Букреев]

Задавать вопрос нормально?

Comments

[NeveR3d]

да