Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 15.08.2019, 16:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

Сообщение от 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>
Ответить с цитированием
  #22 (permalink)  
Старый 09.10.2019, 16:33
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 80

Сообщение от рони Посмотреть сообщение
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 часов...
Как реализовать подобное?
и возможно ли добавить анимацию только тогда когда цифры меняются?
Ответить с цитированием
  #23 (permalink)  
Старый 09.10.2019, 19:06
Аватар для m~r.Nemo
Аспирант
Отправить личное сообщение для m~r.Nemo Посмотреть профиль Найти все сообщения от m~r.Nemo
 
Регистрация: 27.10.2012
Сообщений: 80

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 13:46
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 02:30
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 15:34
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 11:03