Форум

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

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

независимое и синхронное мигание текста двух div

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .BlinkText{
      width: 100px;
      height: 100px;
      background-color: #0000CD;
      color: #FFFFFF;
      text-align: center;
      line-height: 100px;
      transition: .5s;
  }
  .BlinkText.disable{
      background-color: #F0E68C;
      color: #FF0000;
   }
  </style>

</head>

<body>
<div class="BlinkText">1</div>
<div class="BlinkText">2</div>
<button class="BlinkText">click 1</button>
<button class="BlinkText">click 2</button>
<script>
  let DivsBlinkText = [...document.querySelectorAll("div.BlinkText")],
      ButtonsBlinkText = [...document.querySelectorAll("button.BlinkText")],
      opacity = 1;
  ButtonsBlinkText.forEach((button, i) => {
     DivsBlinkText[i].timer ^= 1;
     button.addEventListener("click", () => {
     DivsBlinkText[i].timer ^= 1;
     button.classList.toggle("disable")
     })
  });
  (function timer()
 { opacity ^= 1;
   for (let div of DivsBlinkText) {
      div.style.opacity = div.timer ? opacity : 1;
  }
   window.setTimeout(timer, 500)
 })()
</script>
</body>
</html>

m~r.Nemo · #22 (**permalink**) 09.10.2019, 16:33

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

m~r.Nemo,

<style>
span.U_003A { color: #9c9c9c; }
#clock.x  span.U_003A { color: #333399; }
</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("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
document.getElementById("clock").innerHTML = (hour<10?"0":"")+hour+" <span class='U_003A'>:</span> "+(minute<10?"0":"")+minute+" <span class='U_003A'>:</span> "+(sec<10?"0":"")+sec+"<br/>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>

народ, а возможно ли часы минуты секунды разделить на два отдельных спана?

<style>
span { display: inline-block; border: 1px solid #aaa; padding: 10px 20px;  margin.....  }
<div>
<span id="hours"><span>1</span><span>6</span></span>.....

16 часов...
Как реализовать подобное?
и возможно ли добавить анимацию только тогда когда цифры меняются?

m~r.Nemo · #23 (**permalink**) 09.10.2019, 19:06

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

Форум

Справочник

Discord чат

Курсы javascript