ReSQL.ru
     
powered by simpleCommunicator - 2.0.49     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Часы на страничке
10 сообщений из 10, страница 1 из 1
Часы на страничке
    #40037456
STestS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
STestS
Гость
Здравствуйте.
Возникла необходимость отображать часы на страничке с определенным интервалом. Посоветовали использовать фрейм поверх странички и туда выводить время а потом его скрывать. Вот код для вывода времени (возможно не самый идеальный)
 

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<script type="text/javascript">  
setInterval(function () {  
	date = new Date(),  
	h = date.getHours(),  
	m = date.getMinutes(),  
	s = date.getSeconds(),  
	h = (h < 10) ? '0' + h : h,  
	m = (m < 10) ? '0' + m : m,  
	s = (s < 10) ? '0' + s : s,  
	document.getElementById('time').innerHTML = h + ':' + m + ':' + s;  
}, 1000);
</script>
<span style="color:#7e5a21; font-size:100pt; ">
<span id="time">00:00:00</span>
</span>



Для всплывающей формы понравилось решение https://itchief.ru/examples/lab.php?topic=bootstrap&file=b3-modal

В итоге получилось соединить все вместе но что то модальная форма не хочет отображаться, хотя ошибок с консоли не видно...
Вот мой код:
 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="/Web/Test/css/bootstrap.min.css" rel="stylesheet">
		<style>
			html {
            font-size: 16px !important;
            -ms-overflow-style: scrollbar !important;
            -webkit-tap-highlight-color: transparent !important;
			}
			
			body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
            font-size: 1rem !important;
            line-height: 1.5 !important;
            color: #373a3c !important;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
			<hr>
		</div>
		<div class="container">
			
			<p>
				<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Открыть окно  </button>
			</p>
			
			<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&#215;</button>
						</div>
						<div class="modal-body">
							<script type="text/javascript">  
								setInterval(function () {  
									date = new Date(),  
									h = date.getHours(),  
									m = date.getMinutes(),  
									s = date.getSeconds(),  
									h = (h < 10) ? '0' + h : h,  
									m = (m < 10) ? '0' + m : m,  
									s = (s < 10) ? '0' + s : s,  
									document.getElementById('time').innerHTML = h + ':' + m + ':' + s;  
								}, 1000);
							</script>
							<span style="color:#7e5a21; font-size:100pt; ">
								<span id="time">00:00:00</span>
							</span>
							
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
						</div>
					</div>
				</div>
			</div>
			<hr>
		</div>
		
		<!-- jQuery -->
		<script src="/Web/Test/jquery/jquery-3.3.1.min.js"></script>
		<!-- Bootstrap -->
		<script src="/Web/Test/js/bootstrap.min.js"></script>
		
		<script>
			$(function () {
				$("#btn2").click(function () {
					$("#myModal2").modal('show');
				});
			});
		</script>
		
	</body>
</html>


Посоветуйте как решить проблему или есть другие способы отобразить время поверх готовой странички? Спасибо.
...
Рейтинг: 0 / 0
20.01.2021, 13:46
| Ответить | Цитировать | Написать  
Часы на страничке
    #40037496
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
STestS
Посоветовали использовать фрейм поверх странички и туда выводить время а потом его скрывать.

В твоем примере нет никаких фреймов...

STestS
Посоветуйте как решить проблему или есть другие способы отобразить время поверх готовой странички? Спасибо.

У тебя проблема не в часах... Ты пока не умеешь показывать обычный ДИВ в нужном тебе месте и в нужное время.
...
Рейтинг: 0 / 0
20.01.2021, 15:12
| Ответить | Цитировать | Написать  
Часы на страничке
    #40037497
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
STestS

Код: javascript
1.
2.
3.
4.
5.
$(function () {
	$("#btn2").click(function () {
		$("#myModal2").modal('show');
	});
});


В твоем примере нет элементов с ИД=btn2 ... Как и с ИД=myModal2 ...
Т.ч. х/з чего ты там гоношишь.
...
Рейтинг: 0 / 0
20.01.2021, 15:18
| Ответить | Цитировать | Написать  
Часы на страничке
    #40037504
STestS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
STestS
Гость
krvsa,

Не спорю, в данном вопросе я не эксперт, буду благодарен если подскажите как правильнее решить мою проблему.
...
Рейтинг: 0 / 0
20.01.2021, 15:28
| Ответить | Цитировать | Написать  
Часы на страничке
    #40037520
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
STestS
в данном вопросе я не эксперт, буду благодарен если подскажите как правильнее решить мою проблему.

Я не знаю как подсказывать человеку, который не умеет работать с JS и не особо понимает в структуре ДОМ-модели своего документа.

Тут скорее всего будет проще нанять того, кто это все понимает и заплатить ему деньги за решение проблемы.
...
Рейтинг: 0 / 0
20.01.2021, 16:18
| Ответить | Цитировать | Написать  
Часы на страничке
    #40037533
STestS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
STestS
Гость
krvsa,

Я вас понял. Подскажите тогда хотя бы данное решение есть верным или же есть более простые варианты отобразить время?
...
Рейтинг: 0 / 0
20.01.2021, 16:39
| Ответить | Цитировать | Написать  
Часы на страничке
    #40037695
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
STestS
или же есть более простые варианты отобразить время?

Конечно!
Можно просто показывать время в обычном ДИВе... Главное поставить его в нужное место и отобразить в стилях как хочется.
...
Рейтинг: 0 / 0
21.01.2021, 14:57
| Ответить | Цитировать | Написать  
Часы на страничке
    #40037702
STestS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
STestS
Гость
krvsa,

Спасибо. Буду осваивать информацию.
...
Рейтинг: 0 / 0
21.01.2021, 15:14
| Ответить | Цитировать | Написать  
Часы на страничке
    #40037707
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
STestS , вот так могут выглядеть тестовые примеры... ;)

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
-->
<style type='text/css'>
#time-box {
	position: fixed;
	top: 10px;
	right: 10px;
	width: 100px;
	border: 1px solid;
	text-align: center;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<p>Здравствуйте.
</p>
<p>
	Возникла необходимость отображать часы на страничке с определенным интервалом. 
	Посоветовали использовать фрейм поверх странички и туда выводить время а потом 
	его скрывать. Вот код для вывода времени (возможно не самый идеальный)
</p>
<p>Для всплывающей формы понравилось решение 'ссылка'
</p>
<p>
	В итоге получилось соединить все вместе но что то модальная форма не хочет 
	отображаться, хотя ошибок с консоли не видно...
	Вот мой код:
</p>
<code>Пример кода
</code>
<p>
	Посоветуйте как решить проблему или есть другие способы отобразить время 
	поверх готовой странички? Спасибо.
</p>
<div id='time-box'>
	<span id="time">00:00:00</span>
</div>
<script type="text/javascript">  
setInterval(function () {  
	date = new Date(),  
	h = date.getHours(),  
	m = date.getMinutes(),  
	s = date.getSeconds(),  
	h = (h < 10) ? '0' + h : h,  
	m = (m < 10) ? '0' + m : m,  
	s = (s < 10) ? '0' + s : s,  
	document.getElementById('time').innerHTML = h + ':' + m + ':' + s;  
}, 1000);
</script>
</body>
</html>
...
Рейтинг: 0 / 0
21.01.2021, 15:35
| Ответить | Цитировать | Написать  
Часы на страничке
    #40043881
STestS
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
STestS
Гость
krvsa,

Спасибо за ваш пример, я уже сделал часы аналогично к вашему примеру.
...
Рейтинг: 0 / 0
10.02.2021, 09:01
| Ответить | Цитировать | Написать  
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Часы на страничке
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru             Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=40037497&tid=1443314]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 81ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 57ms
get tp. blocked users:
 2ms
others: 277ms
total:  459ms
созд. / загр.: 459ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]