Javascript-форум - Таймер обратного отсчёта на .hta

Javascript-форум (https://javascript.ru/forum/)

- Internet Explorer (https://javascript.ru/forum/css-html-internet-explorer/)

- - Таймер обратного отсчёта на .hta (https://javascript.ru/forum/css-html-internet-explorer/23397-tajjmer-obratnogo-otschjota-na-hta.html)

bk99	22.11.2011 12:21

Таймер обратного отсчёта на .hta

Мне нужна программа - таймер обратного отсчёта, написанная на яваскрипт без использования jQuery и сделанная в виде .hta файла. Но есть одна проблема - "языками не владею". Максимум, что смог - это "НаХардКодить" такое:

<html>
<head>
<title>Timer</title>
  <hta:application
    applicationname=Timer
    innerborder=no
    scroll=no
    contextmenu=no
  />

<script language="javascript">
    window.resizeTo(380, 174);
    window.moveTo((screen.width/2-190), (screen.height/2-87));
</script>

<style type="text/css">
    body {
        background:buttonface;
        margin:3;
        font-family:monospace;
    }
    table {
        border-collapse:collapse;
        text-align:center;
        }
    tbody#a {
        line-height:0.85;
        font-family:sans-serif;
        font-size:55pt;
    }
    tbody#b {
        line-height:0.55;
        font-size:16pt;
        color:buttonshadow;
    }
    button {
        height:33;
        width:33;
        border;
        font-family:monospace;
        font-size:45px;
        color:buttonshadow;
    }
</style>
</head>
<body>

<table border="0">
 <tbody id="a">
  <tr>
    <td><button title="Сброс">&#9632;</button></td>
    <td>00</td>
    <td>:</td>
    <td>00</td>
    <td>:</td>
    <td>00</td>
    <td><button title="Старт/Стоп">&#9658;</button></td>
  </tr>
 </tbody>
 <tbody id="b">
  <tr>
    <td></td>
    <td>час</td>
    <td></td>
    <td>мин</td>
    <td></td>
    <td>сек</td>
    <td></td>
  </tr>
 </tbody>
</table>

<textarea style="width:100%; overflow:auto;" rows="3"></textarea>

</body>
</html>

Это начинка .hta файла. Если у кого поплывёт - на всякий пожарный даю скрин того, что задумывалось:

Пожалуйста (у кого будет желание и время), вставьте туда "часовой механизм" обратного отсчёта времени! Работать должно так:
- вместо 00:00:00 выставляешь часы, минуты и секунды (т.е. это должны быть редактируемые поля);
- нажимаешь кнопку справа (треугольник) - таймер попёр отсчитывать время в обратную сторону;
- по истечении времени должно выскакивать окошко с текстом, заранее введённым в поле textarea (если это поле было незаполнено, то текст во всплывающем окошке должен быть по умолчанию, скажем, такой: "Время истекло!");
- кнопка слева (квадрат) - сброс таймера на ноль.
Спасибо.

PS Фильтром по форуму и поиском "по интернету" пользовался. Не помогло...
PPS Прошу прощения за наглость!

ksa	22.11.2011 14:04

Цитата:

Сообщение от bk99

Фильтром по форуму и поиском "по интернету" пользовался. Не помогло...

Да брось... :D
Вторая же ссылка
http://javascript.ru/forum/dom-windo...a-vremeni.html
в запросе...

bk99	22.11.2011 14:46

Да, я видел этот топик (и не только его). Долго смотрел на него... Много думал... Стыдно признаться, но я не смогу прикрутить даже готовый скрипт к html содержимому (кнопки, поля ввода чисел, всплывающее сообщение и пр.)... Увы!, чукча не писатель, чукча читатель. Я ищу добровольца-альтруиста, кто сделает это, пардон, за меня. Мне, правда, очень неудобно, но с моими познаниями у меня нет вариантов (хотя, нет, вру - есть вариант: погрузится в теорию и заняться изучением языка).

ЗЫ Я искал скрипт, который уже был бы привязан к нужным мне кнопкам на .html странице, а фейс-то я подрихтовать смогу...

bk99	25.11.2011 11:42

ОК, пойдём длинным путём... Будем допиливать до обтекаемости уже готовый скрипт.
Имеем начинку .hta файла:

<html>
<head>
<title>Timer</title>
  <hta:application />
</head>

<script type="text/javascript">
 var h0=0; 
 var m0=0;
 var s0=0;
 var timeId=null;

 function f2 (v) { return (v<10?'0'+v:v); }

 function changetime() {
  s0--;
  if (s0<0) {
   s0=59;
   m0--;
   if (m0<0) {
    m0=59;
    if (h0>0) h0--;
    else { h0=m0=s0=0; }
   }
  }
 }

 function showtime () {
  var t=h0*3600+m0*60+s0;
  if (t>0) {
   document.getElementById('clock1').innerHTML = f2(h0)+':'+f2(m0)+':'+f2(s0);
   changetime();
   window.setTimeout("showtime();",1000);
  }
  else if (t<1) {
   document.getElementById('clock1').innerHTML = '';
   window.clearTimeout (timeID);
  }
 }

 function inittime (hour,min,sec) {
  h0=Math.max(hour,0); m0=Math.max(min,0); s0=Math.max(sec,0);
  timeID=window.setTimeout("showtime();",1000);
 }
</script>
<body>

<span id="clock1"></span>
<br>

<script type="text/javascript">
 function generate_list (name,min,step,max,deft) {
  document.writeln ('<select name="'+name+'" size="1">');
  for (var i=min; i<=max; i+=step) {
   document.write ('<option value="'+i+'"');
   if (i==deft) { document.write (' selected'); }
   document.writeln ('>'+(i<10?'0'+i:i)+'</option>');
  }
  document.writeln ('</select>');
 }
</script>

<form name="f1">
	<script type="text/javascript">generate_list ('h0',0,1,50,1);</script>&nbsp;час&nbsp;
	<script type="text/javascript">generate_list ('m0',0,1,59,0);</script>&nbsp;мин&nbsp;
	<script type="text/javascript">generate_list ('s0',0,1,59,3);</script>&nbsp;сек&nbsp;
	<input type="button" value="старт" 
		onclick="inittime(
			document.f1.h0.options[document.f1.h0.selectedIndex].value,
			document.f1.m0.options[document.f1.m0.selectedIndex].value,
			document.f1.s0.options[document.f1.s0.selectedIndex].value);" />
</form>

</body>
</html>

Если запустить этот таймер и в процессе обратного отсчёта несколько раз нажать кнопку "старт", то секунды начинают "прыгать". Как это победить?

bk99	03.12.2011 10:58

Ну вот, сделал то, что задумывал (начинка .hta файла):

<html>
<head>
<title>Timer</title>
  <hta:application
    applicationname=Timer
    innerborder=no
    scroll=no
    contextmenu=no
  />

<script language="javascript">
	resizeTo(380,126);
	moveTo((screen.width/2-190),(screen.height/2-63));
</script>

<script type="text/javascript">
	var h=m=s=0;
	var timeId=null;

function f2 (v) { return (v<10?'0'+v:v); }

function inittime (hour,min,sec) {
	h=Math.max(hour,0); m=Math.max(min,0); s=Math.max(sec,0);
	timeID=setTimeout("showtime();",1000);
	}

function changetime() {
	s--;
		if (s<0) {
		s=59;
		m--;
			if (m<0) {
			m=59;
				if (h>0) h--;
				else { h=m=s=0; }
	}}}

function showtime () {
	var t=h*3600+m*60+s;
	if (t>0) {
		document.getElementById('clock').innerHTML=f2(h)+':'+f2(m)+':'+f2(s);
		changetime();
		setTimeout("showtime();",1000);
	}
	else if (t<1) {
		document.getElementById('clock').innerHTML='00:00:00';
		clearTimeout(timeID);
		alert('Время истекло!');
		close();
	}}
</script>

<style type="text/css">
	body {
		background:buttonface;
		margin:3px;
	}
	table {
		border-collapse:collapse;
		text-align:center;
		}
	#a {
		width:100%;
		box-sizing:border-box;
		font:55px sans-serif;
	}
	#b {
		font:22px/.76 monospace;
		color:buttonshadow;
	}
    button {
		height:65px;
		border;
		font:48px monospace;
		color:buttonshadow;
	}
	input {
		background-color:buttonface;
		border:transparent;
		font:86px/.77 sans-serif;
		height:65px;
		width:96px;
	}
	#clock {
		font:94px/.85 sans-serif;
	}
</style>
</head>
<body>

<div id="clock">
<table>
 <tbody id="a">
  <tr>
	<td><input type=text name="h" value="00" maxlength="2"></td>
	<td>:</td>
	<td><input type=text name="m" value="00" maxlength="2"></td>
	<td>:</td>
	<td><input type=text name="s" value="00" maxlength="2"></td>
	<td><button title="Старт" onclick="inittime(
			document.getElementById('h').value,
			document.getElementById('m').value,
			document.getElementById('s').value);">&#9658;</button></td>
  </tr>
 </tbody>
 <tbody id="b">
  <tr>
	<td>час</td>
	<td></td>
	<td>мин</td>
	<td></td>
	<td>сек</td>
	<td></tr>
 </tbody>
</table>
</div>

</body>
</html>

Посмотрите, пожалуйста, на предмет оптимизации/уменьшения размера (чем меньше, тем лучше!) - приветствую любые замечания.
И вопросы:
1. можно ли сделать так, чтобы при запуске таймера окно программы сворачивалось в трей;
2. как сделать, чтобы окно alert по истечении времени всплывало поверх ВСЕХ окон?
Спасибо.

bk99	17.12.2011 18:40

Вот, теперь окно alert по истечении времени всплывает поверх всех окон:

<html>
<head>
<title>Timer</title>
  <hta:application
    applicationname=Timer
    innerborder=no
    scroll=no
    contextmenu=no
  />

<script language="JavaScript">
	resizeTo(380,126);
	moveTo((screen.width/2-190),(screen.height/2-63));
</script>

<script language="JavaScript">
	var h=m=s=0;
	var timeId=null;

function f2 (v) { return (v<10?'0'+v:v); }

function inittime (hour,min,sec) {
	h=Math.max(hour,0); m=Math.max(min,0); s=Math.max(sec,0);
	timeID=setTimeout("showtime();",1000);
	}

function changetime() {
	s--;
		if (s<0) {
		s=59;
		m--;
			if (m<0) {
			m=59;
				if (h>0) h--;
				else { h=m=s=0; }
	}}}

function showtime () {
	var t=h*3600+m*60+s;
	if (t>0) {
		document.getElementById('clock').innerHTML=f2(h)+':'+f2(m)+':'+f2(s);
		changetime();
		setTimeout("showtime();",1000);
	}
	else if (t<1) {
		document.getElementById('clock').innerHTML='00:00:00';
		callDWorld(fin())
	}}
</script>

<script language="VBScript">
function fin()
	MsgBox "Время истекло!", vbSystemModal
	close
end function
</script>

<style>
	body {
		background:buttonface;
		margin:3px;
	}
	table {
		border-collapse:collapse;
		text-align:center;
		}
	#a {
		width:100%;
		box-sizing:border-box;
		font:55px sans-serif;
	}
	#b {
		font:22px/.76 monospace;
		color:buttonshadow;
	}
    button {
		height:65px;
		border;
		font:48px monospace;
		color:buttonshadow;
	}
	input {
		background-color:buttonface;
		border:transparent;
		font:86px/.77 sans-serif;
		height:65px;
		width:96px;
	}
	#clock {
		font:94px/.85 sans-serif;
	}
</style>
</head>
<body>

<div id="clock">
<table>
 <tbody id="a">
  <tr>
	<td><input type=text name="h" value="00" maxlength="2"></td>
	<td>:</td>
	<td><input type=text name="m" value="00" maxlength="2"></td>
	<td>:</td>
	<td><input type=text name="s" value="00" maxlength="2"></td>
	<td><button title="Старт" onclick="inittime(
			document.getElementById('h').value,
			document.getElementById('m').value,
			document.getElementById('s').value);">&#9658;</button></td>
  </tr>
 </tbody>
 <tbody id="b">
  <tr>
	<td>час</td>
	<td></td>
	<td>мин</td>
	<td></td>
	<td>сек</td>
	<td></tr>
 </tbody>
</table>
</div>

</body>
</html>

Наверняка сделано через задницу, но ... работает!
Осталось сделать так, чтобы после запуска таймера окно программы сворачивалось в трей.
Ужо помогайте...

Magneto

17.12.2011 20:01

У HTA Application есть атрибут windowState который принимает значения normal(по умолчанию) | minimize | maximize. Но к сожалению этот аттрибут можно изменить только один раз, при инициализации приложения. В дальнейшем из него можно только читать. Тоесть можно узнать в каком из 3 (трех) состояний находится приложение (обычное, минимизированное, или развернутое на весь экран).

Но если внимательно присмотреться к минимизации, то можно заметить что приложение на самом деле никуда не минимизируется, а просто ему устанавливаются отрицательные координаты его положения на экране. А именно X: -32000, Y: -32000. Тоесть это можно сэмулировать - moveTo(-32000, -32000);. Но при этом при попытке вернуть приложение на прежнее место, чтоб его было видно на рабочем столе, путем нажатия иконки в таскбаре - ничего не происходит.

Поэтому вооружившись полученными знаниями, проверяя|устанавливая координаты приложения и следя за свойством windowState, можно реализовать необходимый функционал.

bk99	18.12.2011 12:26

Цитата:

Сообщение от Magneto

можно сэмулировать - moveTo(-32000, -32000);. Но при этом при попытке вернуть приложение на прежнее место, чтоб его было видно на рабочем столе, путем нажатия иконки в таскбаре - ничего не происходит

Спасибо, попробую.
А можно ли сделать так:
- нажимаю кнопку "Старт" и перехожу на vbs;
- этот vbs сворачивает окно .hta и передаёт управление в js (собственно таймер);
- ну а далее уже всё есть и работает.
Единственный вопрос - как сделать, чтобы vbs свернул своё же окно (хотя бы не в трей, а на панель задач)? Ведь vbs вроде может сворачивать окна?

bk99	22.12.2011 20:53

Добрые люди помогли - теперь таймер при запуске сворачивается в панель задач:

<html>
<head>
<title>Timer</title>
  <hta:application
    applicationname=Timer
    innerborder=no
    scroll=no
    contextmenu=no
  />

<script language="JavaScript">
	var h=m=s=0;
	var timeId=null;

	resizeTo(380,126);
	moveTo((screen.width/2-190),(screen.height/2-63));

function f2 (v) { return (v<10?'0'+v:v); }

function inittime(hour,min,sec) {
	start()
	h=Math.max(hour,0); m=Math.max(min,0); s=Math.max(sec,0);
	timeID=setTimeout("showtime();",1000);
	}

function changetime() {
	s--;
		if (s<0) {
		s=59;
		m--;
			if (m<0) {
			m=59;
				if (h>0) h--;
				else { h=m=s=0; }
	}}}

function showtime() {
	var t=h*3600+m*60+s;
	if (t>0) {
		document.getElementById('clock').innerHTML=f2(h)+':'+f2(m)+':'+f2(s);
		changetime();
		setTimeout("showtime();",1000);
	}
	else if (t<1) {
		document.getElementById('clock').innerHTML='00:00:00';
		fin()
	}}
</script>

<script language="VBScript">
sub start()
	Set oShell = CreateObject("WScript.Shell")
	oShell.SendKeys "% n{down 3}{enter}"
end sub
sub fin()
	MsgBox "Время истекло!", vbSystemModal
	close
end sub
</script>

<style>
	body {
		background:buttonface;
		margin:3px;
	}
	table {
		border-collapse:collapse;
		text-align:center;
		}
	#a {
		width:100%;
		box-sizing:border-box;
		font:55px sans-serif;
	}
	#b {
		font:22px/.76 monospace;
		color:buttonshadow;
	}
    button {
		height:65px;
		border;
		font:48px monospace;
		color:buttonshadow;
	}
	input {
		background-color:buttonface;
		border:transparent;
		font:86px/.77 sans-serif;
		height:65px;
		width:96px;
	}
	#clock {
		font:94px/.85 sans-serif;
	}
</style>
</head>
<body>

<div id="clock">
<table>
 <tbody id="a">
  <tr>
	<td><input type=text name="h" value="00" maxlength="2"></td>
	<td>:</td>
	<td><input type=text name="m" value="00" maxlength="2"></td>
	<td>:</td>
	<td><input type=text name="s" value="00" maxlength="2"></td>
	<td><button title="Старт" onclick="inittime(
			document.getElementById('h').value,
			document.getElementById('m').value,
			document.getElementById('s').value);">&#9658;</button></td>
  </tr>
 </tbody>
 <tbody id="b">
  <tr>
	<td>час</td>
	<td></td>
	<td>мин</td>
	<td></td>
	<td>сек</td>
	<td></tr>
 </tbody>
</table>
</div>

</body>
</html>

Как бы сделать, чтобы он сворачивался не на панель задач, а в трей к часам?
И ещё. Возможно ли перевести .hta в .ехе? И желательно онлайн конвертер...

nerv_

22.12.2011 22:39

А какая строка за это отвечает? Я смотрел, смотрел, но так и не понял :) С hta дело иметь не приходилось, но, как мне кажется, зная дескриптор окна через Win API (VBScript) можно нарулить то, что Вам нужно. Хотя, может быть найдутся способы попроще.

Magneto

22.12.2011 22:58

стр. 53:

Код:

oShell.SendKeys "% n{down 3}{enter}"

bk99	23.12.2011 10:02

Цитата:

Сообщение от nerv_

как мне кажется, зная дескриптор окна через Win API (VBScript) можно нарулить то, что Вам нужно.

Увы, я не умею...

Цитата:

Сообщение от nerv_

какая строка за это отвечает

вот рабочий пример:

<html>
<head>
<title></title>
  <hta:application
    applicationname=test
  />
<script language="VBScript">
	sub start()
		Set oShell = CreateObject("WScript.Shell")
        oShell.SendKeys "% n{DOWN 3}{ENTER}"
	end sub
</script>
</head>
<body>

<button onclick="start">Свернуть</button></td>

</body>
</html>

bk99	19.02.2012 13:17

Ну вот, сделал, что хотел:

При запуске Таймер сворачивается на панель задач, а по истечении времени пикает системным динамиком и выбрасывает окно с предупреждением.
Можно ли сделать так, чтобы главное окно Таймера нельзя было масштабировать (растягивать) потянув за уголок или за рамку окна?
Спасибо.

Magneto

19.02.2012 14:05

<hta:application
  id="MyApp"
  applicationname="MyApp"
  border="dialog"
  borderstyle="normal"
  innerborder="no"
  icon="myapp.ico"
  maximizeButton="no"
  minimizeButton="yes"
  scroll="no"
  selection="no"
  showintaskbar="yes"
  singleinstance="yes"
  version="1.0">
</hta:application>

bk99	19.02.2012 18:00

Цитата:

Сообщение от Magneto (Сообщение 158442)

...
  border="dialog"
...

Да, то, что надо!
Спасибо!

bk99	09.03.2012 22:38

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

document.getElementById('c').innerHTML=f2(h)+':'+f2(m)+':'+f2(s);

а стало так:

document.title=document.getElementById('c').innerHTML=f2(h)+':'+f2(m)+':'+f2(s);

Но, почему-то, время, отображаемое в названии окна, немного отстаёт от времени, отображаемом в самой программе. Чуть-чуть, буквально на долю секунды, но отстаёт! В чём может быть причина? Как это поправить? Xочу, чтобы время там и там тикало синхронно.
Спасибо.

<title>Timer</title>
  <hta:application
	border=thin
    innerborder=no
    scroll=no
    contextmenu=no
	maximizeButton=no
  />

<script language="JavaScript">
	var h=m=s=0;
	var timeId=null;
	resizeTo(380,126);
	moveTo((screen.width/2-190),(screen.height/2-63));
function f2 (v) {return (v<10?'0'+v:v)}
function inittime(hour,min,sec) {
	h=Math.max(hour,0); m=Math.max(min,0); s=Math.max(sec,0);
	timeID=setTimeout("showtime()",1000)}
function showtime() {
	var t=h*3600+m*60+s;
	setTimeout("showtime()",1000);
	document.title=document.getElementById('c').innerHTML=f2(h)+':'+f2(m)+':'+f2(s);
	if (t>0) {changetime()}
	else {fin()}}
function changetime() {
	s--;
	if (s<0) {
		s=59;
		m--;
		if (m<0) {
			m=59;
			if (h>0) h--;
	else {h=m=s=0}}}}
</script>

<script language="VBScript">
sub fin()
	Set S = CreateObject("WScript.Shell")   
	S.Run "%comspec% /c" & Chr(7),0
	MsgBox "Time is over!", vbSystemModal
	close
end sub
</script>

<style>
	body {background:buttonface; margin:2}
	table {border-collapse:collapse; text-align:center}
	button {height:55; border; font:50 monospace; color:buttonshadow}
	input {background-color:buttonface; border:transparent; height:66; width:97; font:86/.77 sans-serif}
	#a {font:55 sans-serif}
	#b {font:22/.76 monospace; color:buttonshadow}
	#c {font:95/.95 sans-serif}
</style>

<div id="c">
<table>
  <tr id="a">
	<td><input id="h" value="00" maxlength="2"></td>
	<td>:
	<td><input id="m" value="00" maxlength="2"></td>
	<td>:
	<td><input id="s" value="00" maxlength="2"></td>
	<td><button title="Start" onclick="inittime(
			getElementById('h').value,
			getElementById('m').value,
			getElementById('s').value)">&#9658;</button></td>
  <tr id="b">
	<td>hour
	<td>
	<td>min
	<td>
	<td>sec
	<td>
</table>
</div>

bk99	12.05.2012 10:12

Прошу помощи в таком вопросе.
Сейчас таймер запускается по нажатии на кнопку "Start". Как сделать, чтобы таймер запускался при нажатии Enter. Т.е. вводим в поля input часы, минуты и секунды, нажимаем Enter, и таймер запускается.
Спасибо.

Kolyaj

12.05.2012 10:28

Делаем форму, кнопку Start делаем submit, запуск таймера делаем на событии onsubmit формы, не забывая остановить обработку события, чтобы форма не отправилась, profit.

bk99	12.05.2012 12:40

Kolyaj, спасибо за ответ!
Честно говоря, имею наглость надеяться на то, что _НекийДобрыйЧеловек_ ~~сделает это всё за меня~~ покажет мне на примере как это всё делается. Сам я не силён в этом.
Мне правда очень неудобно!
Прошу прощения!

bk99	03.06.2012 14:21

Цитата:

Сообщение от bk99 (Сообщение 173945)

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

в кнопку button просто добавил

type="submit"

и всё заработало!
т.е. стало так:

<button type="submit" title="Start" onclick="inittime(getElementById('h').value,getElementById('m').value,getElementById('s').value)">

А как теперь сделать, чтобы кнопка button исчезла? Если поставить style="display:none;", то кнопка становится невидна, но и таймер по Enter не запускается.
Спасибо.

9xakep

03.06.2012 17:40

style.opacity=0

bk99	03.06.2012 18:04

Цитата:

Сообщение от 9xakep (Сообщение 178504)

style.opacity=0

А куда это, пардон, вставить?

9xakep

04.06.2012 12:02

<div style='opacity:0'>1</div>
<div id='div2'>2</div>
<script>
document.getElementById('div2').style.opacity = 0
</script>

Первый див скрываем через самого него. Второй через js.

bk99	04.06.2012 19:22

9xakep,
Спасибо, браза, попробую.
Получится - отпишусь, не получится - тем более отпишусь...

Deff	04.06.2012 19:46

bk99,

<style>
 form {
 position:absolute; z-index:-120;

}
</style>

меняй z-index: от 0 до -

Часовой пояс GMT +3, время: 19:03.