Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Часы на страничке / 10 сообщений из 10, страница 1 из 1
20.01.2021, 13:46
    #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, 15:12
    #40037496
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Часы на страничке
STestS
Посоветовали использовать фрейм поверх странички и туда выводить время а потом его скрывать.

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

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

У тебя проблема не в часах... Ты пока не умеешь показывать обычный ДИВ в нужном тебе месте и в нужное время.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.01.2021, 15:18
    #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:28
    #40037504
STestS
STestS
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Часы на страничке
krvsa,

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

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

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

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

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

Спасибо. Буду осваивать информацию.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.01.2021, 15:35
    #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
| Ответить | Цитировать | Написать  
10.02.2021, 09:01
    #40043881
STestS
STestS
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Часы на страничке
krvsa,

Спасибо за ваш пример, я уже сделал часы аналогично к вашему примеру.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Часы на страничке / 10 сообщений из 10, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 141ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443314]:
 0ms
get settings:
 11ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 29ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 14ms
total:  141ms
x
x
Закрыть


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