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

31.08.20

–1

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

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

Задача

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

Проблема

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

&НаКлиенте

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

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

                ПодключитьОбработчикОжидания("ОбновитьВремя", 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 дизайн

–1

См. также

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

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

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

2400 руб.

29.06.2020 14859 18 4

Условное оформление элементов форм в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

Работа с интерфейсом Платформа 1С v8.3 Платные (руб)

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

6000 руб.

18.01.2022 7716 1 2

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

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

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

6000 руб.

16.01.2015 59985 40 57

Редактор граф

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

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

1500 руб.

06.10.2020 8785 6 7

Конструктор HTML, CSS и javascript

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

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

2 стартмани

10.04.2023 7450 142 acces969 31

107

Модель состояния для MVC

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

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022 2134 kalyaka 2

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022 10560 1 5

Программный интерфейс для доработки форм

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

Реализовал простой способ программного создания новых элементов, команд и реквизитов на форме.

25.11.2021 7826 AtamanovYS 19

130

Комментарии

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

Свернуть все

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

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

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

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

Показать

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

Часы.epf

Ответить

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

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

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

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

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

Ответить

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

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

Ответить

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

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

Ответить

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

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

Ответить

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

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

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

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

Ответить

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

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

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

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

Ответить

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

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

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

13. rpgshnik 3491 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 187 26.08.19 15:23 Сейчас в теме

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

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

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

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

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

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

Часы.epf

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

(14)

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31. rpgshnik 3491 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 3491 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 3491 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 267 18.02.20 11:31 Сейчас в теме

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

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

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

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

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

E-mail:

Автор:

Дмитрий Котов

rpgshnik

Рейтинг: 3491

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

Публикация:

№ 1112550

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

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

Статистика:

Просмотры 13700

Загрузки 0

Рейтинг 67

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

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

Код открыт Да

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

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

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

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

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

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

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

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

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

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

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