Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.12.2019, 22:44
Кандидат Javascript-наук
Отправить личное сообщение для Besprizornik Посмотреть профиль Найти все сообщения от Besprizornik
 
Регистрация: 24.02.2019
Сообщений: 126

текущее время с анимацией
возможно ли сделать идущие часы с эффектом счётчика ?
Ответить с цитированием
  #2 (permalink)  
Старый 15.12.2019, 22:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Besprizornik,
звучит как можно ли масло сделать масляным?
не могли бы уточнить проблему.
Ответить с цитированием
  #3 (permalink)  
Старый 15.12.2019, 23:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

flipclock часы таймер секундометр
Besprizornik,

<!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://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
  <script>
$(function() {
var clock = $('.your-clock').FlipClock({
clockFace: 'TwentyFourHourClock'
})
});
  </script>
</head>
<body>
<div class="your-clock"></div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 16.12.2019, 17:52
Кандидат Javascript-наук
Отправить личное сообщение для Besprizornik Посмотреть профиль Найти все сообщения от Besprizornik
 
Регистрация: 24.02.2019
Сообщений: 126

Сообщение от рони Посмотреть сообщение
Besprizornik,
звучит как можно ли масло сделать масляным?
не могли бы уточнить проблему.
рони, вопрос в том возможно ли числа показывающее часы минуты и секунды разделить на отдельные цифры, что-то типа

(onload=function(){
var n, m;
n=59;
m=(n+"").match(/\d{1}/g);
Ответить с цитированием
  #5 (permalink)  
Старый 16.12.2019, 19:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Besprizornik,
не понимаю.
Ответить с цитированием
  #6 (permalink)  
Старый 16.12.2019, 19:27
Кандидат Javascript-наук
Отправить личное сообщение для Besprizornik Посмотреть профиль Найти все сообщения от Besprizornik
 
Регистрация: 24.02.2019
Сообщений: 126

рони,
возможно ли сделать чтобы каждая цифра из двухзначного числа была в отдельном div'е?
Ответить с цитированием
  #7 (permalink)  
Старый 16.12.2019, 19:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Besprizornik,
а сейчас каждая цифра в отдельном li, что не устраивает?
Ответить с цитированием
  #8 (permalink)  
Старый 16.12.2019, 19:42
Кандидат Javascript-наук
Отправить личное сообщение для Besprizornik Посмотреть профиль Найти все сообщения от Besprizornik
 
Регистрация: 24.02.2019
Сообщений: 126

и потом применить подобную анимацию, только чуть другой эффект
position: absolute; top: -100%; opacity: 0.2

position: absolute; top: 0%; opacity: 1.0;

position: absolute; 100%; opacity: 0.2;
Ответить с цитированием
  #9 (permalink)  
Старый 16.12.2019, 19:45
Кандидат Javascript-наук
Отправить личное сообщение для Besprizornik Посмотреть профиль Найти все сообщения от Besprizornik
 
Регистрация: 24.02.2019
Сообщений: 126

рони,
я имел ввиду простые часы с использованием методов объекта дата без внешних скриптов
Ответить с цитированием
  #10 (permalink)  
Старый 16.12.2019, 19:58
Кандидат Javascript-наук
Отправить личное сообщение для Besprizornik Посмотреть профиль Найти все сообщения от Besprizornik
 
Регистрация: 24.02.2019
Сообщений: 126

рони,
например в твоём скрипте

<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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выводить текущее время каждую минуту DarkPhoenix Общие вопросы Javascript 3 16.06.2019 20:33
Текущее время в значение NeonMan Events/DOM/Window 2 25.05.2019 16:36
Указать текущее время. luciusred Javascript под браузер 0 03.04.2018 09:27
Нужно, чтобы getTime() постоянно показывала текущее время без обновления страницы aldrve Общие вопросы Javascript 6 03.10.2017 19:29
Position fixed, но динамический по оси ОХ tvixa Элементы интерфейса 4 09.09.2013 15:39