[Механизм интерфейса] Часы

31.08.20

Добавляем цифровые часы на форму, как бонус рассмотрим вариант и с аналоговыми.

Добрый день, Коллеги!

Задача

Необходимо на терминал вывести в заголовок "цифровые часы".

Проблема

Для реализации использовал реквизит формы «Время» (состав даты – время) и обработчик ожидания, который раз в секунду обновлял время. Программный код ниже.

&НаКлиенте

Процедура ПриОткрытии(Отказ)        

                Время = ТекущаяДата();

                ПодключитьОбработчикОжидания("ОбновитьВремя", 1);   

КонецПроцедуры



&НаКлиенте

Процедура ОбновитьВремя()               

                Время = ТекущаяДата();           

КонецПроцедуры

Но так как на терминале используются поля для ввода данных, при попытке что-либо в них написать наблюдалось странное поведение – вводимые данные не сохранялись, и неожиданно обнулялась вводимая информация.

Решение

Причина была в обработчике ожидания. Решением проблемы является использование поля HTML и вывода времени в него. Демонстрация ниже.

Разработка

Алгоритм вывода времени

//infostart.ru/upload/iblock/c60/c60641c5caab5b8a59cccc4433dad40f.jpg Создаем реквизит «ВремяХТМЛ» тип строка (0). Переносим его на форму и настраиваем . Необходимо указать вид, отключить заголовок и цвет рамочки для красоты сделать схожим с цветом формы, а вертикальную полосу прокрутки уберём позже.

Реквизит и элемент формы готовы //infostart.ru/upload/iblock/c60/c60641c5caab5b8a59cccc4433dad40f.jpg . Теперь необходим алгоритм. В интернете не сложно найти готовый javascript, останется только настроить css стили.

Определяем при старте формы вызов функции по формированию времени:

&НаКлиенте

Процедура ПриОткрытии(Отказ)

                УстановитьВремяХТМЛ();       

КонецПроцедуры

Формируем html-код страницы (уже здесь и пропишем скрытие вертикальной полосы прокрутки):

Код функции "УстановитьВремяХТМЛ"

&НаКлиенте

Процедура УстановитьВремяХТМЛ()

                тЦвет  = "0,150,70";

                ВремяХТМЛ = "<html>

                |<head>

                |<style>

                |p {

                |font-family: Arial;

                |font-size: 20pt; /* Размер шрифта в пунктах */

                |color: rgb(" + тЦвет + "); /* Цвет шрифта */

                |}

                |html { overflow:  hidden; } /* Скрываем вертикальную полосу прокрутки*/

                |</style>                           

                |<script type=""text/javascript"">

                |function startTime()

                |{

                |var tm=new Date();

                |var h=tm.getHours();

                |var m=tm.getMinutes();

                |var s=tm.getSeconds();

                |m=checkTime(m);

                |s=checkTime(s);

                |document.getElementById('txt').innerHTML=h+"":""+m+"":""+s;

                |t=setTimeout('startTime()',500);

                |}

                |function checkTime(i)

                |{

                |if (i<10)

                |{

                |i=""0"" + i;

                |}

                |return i;

                |}

                |</script>

                |</head>

                |<body>

                |<p id=""txt""></p>

                |</body>

                |</html>";

КонецПроцедуры

Цвет часов вынесен отдельно и мы можем привести заголовок к общему стилю.

Немного о цвете...

Вот тут я конечно удивился. У псевдозаголовка установлен цвет из набора стилей (ЦветАкцента), оказывается из данного стиля вытащить палитру не так просто. Была найдена функция «ПолучитьАбсолютныйЦвет». Она оказалось не до конца рабочей. Главная причина она возвращает оттенок схожий, но не тот. К примеру цвет в стиле (0,150,70), цвет возвращаемый функцией (0,128,0). Неприятный момент.

Код функции "ПолучитьАбсолютныйЦвет"

&НаСервере

Функция ПолучитьАбсолютныйЦвет(ИсходныйЦвет) Экспорт



    Если ИсходныйЦвет.Вид = ВидЦвета.Абсолютный Тогда

        Возврат ИсходныйЦвет;

    КонецЕсли;



    ТабДок = Новый ТабличныйДокумент;

    ТабДок.Область("R1C1").ЦветФона = ИсходныйЦвет;

    ВФ = ПолучитьИмяВременногоФайла("mxl");

    ТабДок.Записать(ВФ, ТипФайлаТабличногоДокумента.MXL7);

    ТабДок.Прочитать(ВФ);



    АЦвет = ТабДок.Область("R1C1").ЦветФона;

    ТабДок = Неопределено;

    УдалитьФайлы(ВФ);



    Возврат АЦвет;



КонецФункции

Была найдена вторая функция - «ПолучитьRGBЦвет», у меня она тоже не взлетела, вместо зеленого возвращает голубой. Но в комментарии привлек внимание код, который тоже не заработал. Но интуитивно добавил вторую строчку... и тут просто произошел парадокс. В комментарии отмечено назначение цвета фону, я добавил ещё строчку с "ЦветТекста" и именно тексту цвет установился, убрал строчку с "ЦветФона" и цвет тексту присваивается "Авто". Фича платформы? Код функции ниже (может работать как на сервере, так и на клиенте, установите нужную директиву, в примере &НаКлиенте).

&НаКлиенте
Функция ПолучитьЦвет(ЦветСтиля)
	ТекстХТМЛДокумента = "";
	ФорматированныйДокумент = Новый ФорматированныйДокумент; 
	ФорматированныйДокумент.Добавить("ОпределениеЦвета", Тип("ТекстФорматированногоДокумента")); 
	ФорматированныйДокумент.Элементы[0].Элементы[0].ЦветФона = ЦветСтиля; //Не устанавливается хз почему, но если убрать, то и в ЦветТекста не встанет
	ФорматированныйДокумент.Элементы[0].Элементы[0].ЦветТекста = ЦветСтиля;	//Устанавливается :)
	ФорматированныйДокумент.ПолучитьHTML(ТекстХТМЛДокумента, Новый Структура); 
	ФорматированныйДокумент.УстановитьHTML(ТекстХТМЛДокумента, Новый Структура); 
	Возврат ФорматированныйДокумент.Элементы[0].Элементы[0].ЦветТекста;	
КонецФункции

Теперь мы можем назначить цвет часам такой же как у псевдозаголовка. Для этого необходимо переписать строчку с назначением переменной "тЦвет" значения.

тЦвет = ПолучитьЦвет(ЦветаСтиля.ЦветАкцента); //Если мы знаем стиль

//ИЛИ

тЦвет = ПолучитьЦвет(Элементы.НадписьЗаголовок.ЦветТекста); //Если мы не знаем стиль :)

//Где элемент "НадписьЗаголовок" - тот самый псевдозаголовок тип элемента "Декорация-Надпись"

В будущем изменение корпоративного стиля отразится и на псевдозаголовке.

Если потребуется обратная функция, возвращаемое значение стиля по RGB-строке:

Код функции "СформироватьСтиль"

&НаСервере

Функция СформироватьСтиль(аЦвет)

                аЦвет = СтрЗаменить(аЦвет," ","");

                Разделитель1 = Найти(аЦвет, ",");

                R = Лев(аЦвет, Разделитель1-1);

                GB = Прав(аЦвет, СтрДлина(аЦвет)-Разделитель1);

                Разделитель2 = Найти(GB, ",");

                G = Лев(GB, Разделитель2-1);

                B = Прав(GB, СтрДлина(GB) - Разделитель2);              

                СтильЦвет = Новый Цвет(R,G,B);         

                Возврат               СтильЦвет;

КонецФункции

PS:

Так же можно вывести на форму аналоговые часы. Практически готовый алгоритм html-страницы можно взять на сайте https://codepen.io/, демонстрация одного из алгоритмов ниже.

Текст HTML-страницы "Аналоговые часы в 1С"

<html><head>
<style>
body {
	background: #282e3a;
	color: #f9f9f9;
	font: 100%/1.5em "Droid Sans", sans-serif;
	margin: 0;
}

p { margin: 0; }

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- GENERAL-CLASSES ---------- */

.container {
	height: 228px;
	left: 50%;
	margin: -124px 0 0 -100px;
	position: absolute;
	top: 50%;
	width: 200px;
}

/* ---------- APP ---------- */

.app {
	text-align: center;
}

.app-title {
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 5px #15181f;
}

.clock {
	background: #1a1d24;
	border-radius: 35px;
	-webkit-box-shadow: 0 8px 0 #15181f;
	box-shadow: 0 8px 0 #15181f;
	height: 200px;
	margin-bottom: 24px;
	position: relative;
	width: 200px;
}

.clock-inner {
	background: #f9f9f9;
	border-radius: 50%;
	height: 160px;
	left: 50%;
	margin: -80px 0 0 -80px;
	position: absolute;
	top: 50%;
	width: 160px;
}

.clock-center,
#clock-seconds,
#clock-minutes,
#clock-hours {
	left: 50%;
	position: absolute;
	top: 50%;
}

.clock-center {
	background: #1a1d24;
	border-radius: 50%;
	height: 12px;
	margin: -6px 0 0 -6px;
	width: 12px;
	z-index: 4;
}

#clock-seconds {
	background: #c40206;
	border-radius: 2px;
	height: 60px;
	margin: -60px 0 0 -1px;
	-webkit-transform-origin: 1px 60px;
	-moz-transform-origin: 1px 60px;
	-ms-transform-origin: 1px 60px;
	-o-transform-origin: 1px 60px;
	transform-origin: 1px 60px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	width: 2px;
  z-index: 3;
}

#clock-minutes {
	background: #aaa;
	border-radius: 4px;
	height: 50px;
	margin: -50px 0 0 -2px;
	-webkit-transform-origin: 2px 50px;
	-moz-transform-origin: 2px 50px;
	-ms-transform-origin: 2px 50px;
	-o-transform-origin: 2px 50px;
	transform-origin: 2px 50px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	width: 4px;
  z-index: 2;
}

#clock-hours {
	background: #1a1d24;
	border-radius: 4px;
	height: 40px;
	margin: -40px 0 0 -2px;
	-webkit-transform-origin: 2px 40px;
	-moz-transform-origin: 2px 40px;
	-ms-transform-origin: 2px 40px;
	-o-transform-origin: 2px 40px;
	transform-origin: 2px 40px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	width: 4px;
  z-index: 1;
}

.clock-numbers {
	color: #888;
	display: block;
	font-size: 16px;
	font-weight: bold;
	height: 120px;
	margin: -60px 0 0 -60px;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 120px;
}

.clock-numbers li {
	height: 20px;
	line-height: 20px;
	margin: -10px;
	position: absolute;
	text-align: center;
	width: 20px;
}

.clock-numbers li:nth-child(1) {
	left: 50%;
	top: 0;
}

.clock-numbers li:nth-child(2) {
	right: 0;
	top: 50%;
}

.clock-numbers li:nth-child(3) {
	bottom: 0;
	left: 50%;
}

.clock-numbers li:nth-child(4) {
	left: 0;
	top: 50%;
}
</style>
<script>
function startTime() 
{

	var clockSeconds = document.getElementById("clock-seconds"),
	clockMinutes = document.getElementById("clock-minutes"),
	clockHours = document.getElementById("clock-hours");

	function getTime() {

		var date = new Date(),
		seconds = date.getSeconds(),
		minutes = date.getMinutes(),
		hours = date.getHours(),

		degSeconds = seconds * 360 / 60,
		degMinutes = (minutes + seconds / 60) * 360 / 60,
		degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;

		clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);');
		clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);');
		clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);');
	}

	setInterval(getTime, 1000);
	getTime();

} 
</script>
<title></title>
	<meta charset="UTF-8">
	<title>Clock App Icon</title>

	<link rel="stylesheet" href="/redirect.php?url=aHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3M/ZmFtaWx5PURyb2lkK1NhbnM6NDAwLDcwMA==">

</head>
<body

	<div class="container">

		<div class="app">

			<div class="clock">

				<div class="clock-inner">

					<div class="clock-center"></div>
					<div id="clock-seconds"></div>
					<div id="clock-minutes"></div>
					<div id="clock-hours"></div>

					<ul class="clock-numbers">

						<li>12</li>
						<li>3</li>
						<li>6</li>
						<li>9</li>

					</ul>

				</div> <!-- end clock-inner -->

			</div> <!-- end clock -->

			<p class="app-title">Аналоговые часы в 1С</p>

		</div> <!-- end app -->

	</div> <!-- end container -->
	
</body>
</html>

Всем удачного кодинга!

//+++ Обновление публикации от 31.08.2020 г.

// Посмотрите новую статью "Динамическое формирование интерфейса"

//--- Обновление публикации от 31.08.2020 г.

часы аналоговые цифровые время абсолютный цвет цвета ui ux дизайн

+71 –1

См. также

Богатый редактор картинок 1С, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Богатый редактор картинок 1С предназначен для обработки изображений в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015 63100 44 59

Управление дашбордами

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 1С:ERP Управление предприятием 2 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020 18969 26 6

Настройки управляемых форм (списков, объектов), заполнение реквизитов по условиям, контроль заполнения, доступ [Расширение]

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы 1С:Управление торговлей 11 Россия Платные (руб)

Настройки упр.форм (списков, объектов), заполнение реквизитов по условиям, контроль заполнения, условное оформление, доступ.

2000 руб.

20.02.2018 20639 24 21

Редактор графов в 1С

Работа с интерфейсом Программист Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Россия Платные (руб)

Редактор графов в 1С - внешний отчет, который формирует графы на основе таблицы значений, используя рисунки табличного документа. Есть возможность добавления, редактирования объектов графа и выгрузки результата в таблицу значений.

1500 руб.

06.10.2020 10330 7 7

Дизайн Гайд для создания форм на 1С. Когда и как использовать различные элементы, примеры и антипримеры по использованию

Работа с интерфейсом Программист Стажер Платформа 1С v8.3 Бесплатно (free)

Это инструкция по дизайну форм в среде 1С. Гайд охватывает рекомендации и стандарты для оптимизации пользовательского интерфейса. В гайде содержатся указания по использованию элементов интерфейса, включая как основные, так и продвинутые аспекты. Предоставляются также примеры и антипримеры для наглядного понимания принципов дизайна

20.08.2024 17679 mrXoxot 43

121

Прогресс-бар в поле динамического списка

Работа с интерфейсом Программист Платформа 1С v8.3 Бесплатно (free)

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024 7950 smielka 37

100

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023 15250 973 elcoan 49

117

Обработка для верстки html-страниц и отладки javascript. Отлично подойдет для быстрого создания интерактивных HTML-страниц тем, кто слабо знаком с веб-разработкой.

Инструментарий разработчика Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

2 стартмани

10.04.2023 12027 163 acces969 31

124

Отзывы

18. qwinter 683 26.08.19 15:27 Сейчас в теме

Опять велосипеды в центре внимания... Ну когда уже 1Сники будут элементарные вещи знать?

Прикрепленные файлы:

Ответить

Остальные комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

1. greenLiss 145 26.08.19 13:13 Сейчас в теме

Я наверное глупость скажу, но...

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	ПодключитьОбработчикОжидания("УстановитьВремя",1);
КонецПроцедуры

&НаКлиенте
Процедура УстановитьВремя()  
	ЭтаФорма.Заголовок = "Заголовок "+Строка(Формат(ТекущаяДата(),"ДЛФ=T")); //Заголовок формы
	Элементы.Часы.Заголовок = "Заголовок "+Строка(Формат(ТекущаяДата(),"ДЛФ=T")); //Декорация-надпись
КонецПроцедуры

Показать

Прикрепленные файлы:

Часы.epf

Ответить

2. 🅵🅾️🆇 524 26.08.19 13:16 Сейчас в теме

(1) Сам собрался написать про обработчик ожидания)

Алсо, с таймаутами и подписками жабьегоскрипта надо быть поаккуратнее, зачастую они не умирают вместе со смертью пользовательского сеанса и висят на сервере мертвым грузом, постепенно накапливая свое число.

3. greenLiss 145 26.08.19 13:19 Сейчас в теме

(2) ну там вроде проблема была, что при срабатывании обработчика ожидания введенный текст сбрасывался... Но если изменять не реквизит формы, а элемент формы или заголовок, то всё норм.

4. Tria 14 26.08.19 13:21 Сейчас в теме

(1) Вообще-то в начале статьи автор как раз и описал решение с обработчиком ожидания и проблемы такого решения.

5. greenLiss 145 26.08.19 13:22 Сейчас в теме

(4) Так в том-то и проблема, что нет проблемы...

6. spacecraft 26.08.19 13:27 Сейчас в теме

(1) И? Как я понял статью, там упор делался решение проблемы: сброс вводимого текста в поле ввода при подключаемом обработчике ожидания.
Ваш код так же сбрасывает вводимый текст при установке "времени". Форма обновляется и вводимый текст сбрасывается.

7. greenLiss 145 26.08.19 13:31 Сейчас в теме

(6) Я проверил, не сбрасывается, обработка прикреплена к первому комментарию, можете скачать и тоже проверить.

8. spacecraft 26.08.19 13:32 Сейчас в теме

(7) так я ее и проверил. Сбрасывается. 1С:Предприятие 8.3 (8.3.13.1690)

9. greenLiss 145 26.08.19 13:36 Сейчас в теме

(8) Я делал на 1С:Предприятие 8.3 (8.3.15.1489), может позже гляну на 13, даже интересно.

11. greenLiss 145 26.08.19 13:40 Сейчас в теме

(8) Нашел установленную 13 версию, и правда, сбрасывается...
Ну что можно сказать, тут только словами Фирмы 1С, "Попробуйте обновить платформу до актуального релиза" XD

Ответить

12. rpgshnik 3797 26.08.19 14:49 Сейчас в теме

(8) всё верно, именно на этой платформе и веду разработку

Прикрепленные файлы:

13. rpgshnik 3797 26.08.19 15:06 Сейчас в теме

В публикации демонстрируется функционал цифровых часов на платформе 8.3.13.1690. Функционал аналоговых на платформе 8.3.15.1534 (причина новый движок для HTML).

Проверил вариант комментария (1), на нескольких боевых платформах и тестовой (15-й). Поведение странное. Назовём мой первоначальный вариант - "Реквизит", а предложенный "Декорация".

Результат:

8.3.13.1690
Реквизит - Обнуляет поле ввода
Декорация - Обнуляет поле ввода

8.3.14.1694
Реквизит - Обнуляет поле ввода
Декорация - Обнуляет поле ввода

8.3.15.1534
Реквизит - Обнуляет поле ввода
Декорация - Работает

Забавно, ну ок. Пока нет боевой платформы 8.3.15.

Файл обработки прилагаю

Прикрепленные файлы:

ПроверкаОбработчикаИПоляВвода.epf

16. BigB 193 26.08.19 15:23 Сейчас в теме

(13) Проверил на платформе 8.3.15.1565 - обнуляется в обоих случаях!

10. ltfriend 26.08.19 13:38 Сейчас в теме

Нужно просто вместо реквизита для времени использовать декорацию «Надпись» (что и показано в комментарии выше) и не нужны ни какие html.

14. CSiER 36 26.08.19 15:10 Сейчас в теме

Дело в фокусе - чтобы решить проблему, нужно в обработчик добавить Элементы.Текст1.ВыделенныйТекст = "";

Прикрепленные файлы:

Часы.epf

15. rpgshnik 3797 26.08.19 15:15 Сейчас в теме

(14)

Элементы.Текст1.ВыделенныйТекст = "";

Вариант, для декорации. При использование реквизита для времени, поведение поля ввода остается не менее странным.

Прикрепленные файлы:

ПроверкаОбработчикаИПоляВвода.epf

19. BigB 193 26.08.19 15:28 Сейчас в теме

(15) На платформе 8.3.15.1565 в режиме "Реквизит" вводил последовательно числа 1234567890. В результате получил хрень какую-то 8907564231.
В режиме "Декорация" работает правильно!

17. BigB 193 26.08.19 15:24 Сейчас в теме

(14) На платформе 8.3.15.1565 работает правильно.

20. shard 281 26.08.19 15:35 Сейчас в теме

(14) главное - не выделять текст вручную

18. qwinter 683 26.08.19 15:27 Сейчас в теме

Опять велосипеды в центре внимания... Ну когда уже 1Сники будут элементарные вещи знать?

Прикрепленные файлы:

Ответить

21. rpgshnik 3797 26.08.19 16:35 Сейчас в теме

(18) век учись, спасибо 👍

22. rpgshnik 3797 27.08.19 04:08 Сейчас в теме

(18) проверил - не работает, текст удаляет при его выделение

25. spacecraft 27.08.19 08:17 Сейчас в теме

(22) все работает правильно. Может не убран код из (15)?

26. rpgshnik 3797 27.08.19 09:30 Сейчас в теме

(25) Точно :) запутался

23. rpgshnik 3797 27.08.19 05:19 Сейчас в теме

(18) комментарий жалко нельзя редактировать :) по этому гифка поведения прилагается отдельно, что ещё можно включить?

Прикрепленные файлы:

27. Anchoret 65 28.08.19 10:59 Сейчас в теме

(18) Который раз убеждаюсь, что практически на каждый велосипед, можно найти "галку" в свойствах

28. rpgshnik 3797 28.08.19 11:26 Сейчас в теме

(27) ещё немного прокачался в HTML :) и аналоговые часы выводить намного приятнее именно в HTML. Так же всегда думал, что обработчик ожидания это не асинхронный вызов.

24. Неопределено 91 27.08.19 05:58 Сейчас в теме

Практически готовый алгоритм html-страницы можно взять на

А можно взять полностью готовый на чистом 1С в моей публикации.

29. oafan 27 04.09.19 15:00 Сейчас в теме

Некорректно выводит в поле часы. Есть варианты?

Прикрепленные файлы:

31. rpgshnik 3797 05.09.19 05:57 Сейчас в теме

(29) можно высоту увеличить поля на форме... я думаю, что тут нужно с css стилями поиграть, но сам не силён, как под самый "потолок" вывести время.

30. oafan 27 04.09.19 15:17 Сейчас в теме

Почему -то данный код не заработал для цифровых часов использовал
<html>
<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 id="time">00:00:00</span>
</span>

32. rpgshnik 3797 05.09.19 06:15 Сейчас в теме

(30) что-то я намудрил... позже гляну код в конфиге где это применяю... Пока можете вот это использовать:

&НаКлиенте
Процедура УстановитьВремяХТМЛ()	
	ВремяХТМЛ = "<ht ml>
	|<head>
	|<st yle>
	|p {
	|font-family: Arial; 
	|font-size: 20pt; /* Размер шрифта в пунктах */ 
	|color: #009646; /* Цвет шрифта */
	|}
	|html { overflow:  hidden; } /* Скрываем вертикальную полосу прокрутки*/
	|</style>		
	|<sc ript type=""text/javascript"">
	|function startTime()
	|{
	|var tm=new Date();
	|var h=tm.getHours();
	|var m=tm.getMinutes();
	|var s=tm.getSeconds();
	|m=checkTime(m);
	|s=checkTime(s);
	|document.getElementById('txt').innerHTML=h+"":""+m+"":""+s;
	|t=setTimeout('startTime()',500);
	|}
	|function checkTime(i)
	|{
	|if (i<10)
	|{
	|i=""0"" + i;
	|}
	|return i;
	|}
	|</sc ript>
	|</head>
	|<body on load=""startTime()"">
	|<p id=""txt""></p> 
	|</body>
	|</html>";
КонецПроцедуры

Показать

Ещё возможно что код как-то криво копирует и транслируется... заметил что местами появляются пробелы, возьмите код из обработки ниже

Прикрепленные файлы:

ПроверкаВремениХТМЛ.epf

33. rpgshnik 3797 05.09.19 06:18 Сейчас в теме

(30) так же если интересно обработка с кодом аналоговых часов

Прикрепленные файлы:

АналоговыеЧасы.epf

34. SlavaKron 20.10.19 09:32 Сейчас в теме

(33)

:nth-child

Вот это не взлетит на платформах 1С до 8.3.14, если на компьютере IE8 или ниже. http://htmlbook.ru/css/nth-child

35. Oleg_nsk 279 18.02.20 11:31 Сейчас в теме

Чтобы не извращаться с форматированием минут-секунд в вашем случае достаточно весь JS код заменить на:

function startTime()
{
document.getElementById('txt').innerHTML=new Date().toLocaleTimeString();
setTimeout('startTime()',500);
}

36. Fragster 1151 18.02.20 13:53 Сейчас в теме

У элементов надо свойство "обновление текста редактирования" поменять с "авто" на "Обновлять при изменении значения". Почему Авто так не работает - не знаю, вопросы к разработчикам платформы. Все дело в неявном серверном вызове.

Оставьте свое сообщение

E-mail:

Автор:

Дмитрий Котов (rpgshnik)

Рейтинг: 3797

Для получения уведомлений о новых публикациях автора подключите телеграм бот: Инфостарт бот

Публикация:

№ 1112550

Создание 26.08.19 11:00

Обновление 31.08.20 04:49

Статистика:

Просмотры 16034

Загрузки 0

Рейтинг 70

Комментарии 36

Характеристики:

Код открыт Да

Рубрики Работа с интерфейсом

Кому Программист

Тип файла Нет файла

Платформа Платформа 1С v8.3

Конфигурация Конфигурации 1cv8

Операционная система Не имеет значения

Страна Не имеет значения

Отрасль Не имеет значения

Налоги Не имеет значения

Вид учета Не имеет значения

Доступ к файлу Бесплатно (free)