Форум

bk99 · #1 (**permalink**) 22.11.2011, 12:21

Мне нужна программа - таймер обратного отсчёта, написанная на яваскрипт без использования 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 · #2 (**permalink**) 22.11.2011, 14:04

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

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

Да брось...

Вторая же ссылка
Скрипт обратного отсчёта времени
в запросе...

bk99 · #3 (**permalink**) 22.11.2011, 14:46

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

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

bk99 · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 17.12.2011, 20:01

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

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

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

bk99 · #8 (**permalink**) 18.12.2011, 12:26

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

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

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

bk99 · #9 (**permalink**) 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_ · #10 (**permalink**) 22.12.2011, 22:39

А какая строка за это отвечает? Я смотрел, смотрел, но так и не понял

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

Форум

Справочник

Discord чат

Курсы javascript