时间戳

首页 > 解决方案 > 将 Inputtext 替换为 javascript 变量返回 [object HTMLInputElement]

javascript - 将 Inputtext 替换为 javascript 变量返回 [object HTMLInputElement]

问题描述

我正在努力使以下代码正常工作。我想用函数 calcTime() 中计算的值替换输入的 id="timeDiff" 值。

我只是无法让它工作并继续获得 [object HTMLInputElement] 的值 - 任何帮助将不胜感激，因为我不精通 javascript。

请查看下面的 html 和 javascript，如果您能够提供解决方案，请提供帮助。

提前致谢

(function(d) {

var
	start = d.getElementById('timeStart'),
	stop = d.getElementById('timeStop'),
	diff = d.getElementById('timeDiff');

function textReplace() {
	$("#timeDiff").val(diff);
}
function addEvent(e, event, handler) {
	if (e.addEventListener) e.addEventListener(event, handler, false);
		else e.attachEvent('on' + event, handler);
}
function selectHours(e) {
	return new Date(
		'01/01/1971 ' + e.options[e.selectedIndex].value
	).getTime(); 
}
function calcTime(e) {
	d = new Date(selectHours(stop) - selectHours(start));
	minutes = (diff, d.getUTCHours()*60 + d.getUTCMinutes());
	textReplace(diff, minutes/60);
}
addEvent(start, 'change', calcTime);
addEvent(stop, 'change', calcTime);
})(document);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
<head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<title>
	&lt;SELECT&gt; Time Difference Demo
</title>

</head> <body>

<h1>
	<code>&lt;SELECT&gt;</code> Time Difference Demo
</h1>

<div><!-- since SELECT cannot be a direct child of BODY! -->

<select name="timestart" id="timeStart">
	<option value="00:00:00">12:00 am</option>
	<option value="00:30:00">12:30 am</option>
	<option value="01:00:00">1:00 am</option>
	<option value="01:30:00">1:30 am</option>
	<option value="02:00:00">2:00 am</option>
	<option value="02:30:00">2:30 am</option>
	<option value="03:00:00">3:00 am</option>
	<option value="03:30:00">3:30 am</option>
	<option value="04:00:00">4:00 am</option>
	<option value="04:30:00">4:30 am</option>
	<option value="05:00:00">5:00 am</option>
	<option value="05:30:00">5:30 am</option>
	<option value="06:00:00">6:00 am</option>
	<option value="06:30:00">6:30 am</option>
	<option value="07:00:00">7:00 am</option>
	<option value="07:30:00">7:30 am</option>
	<option value="08:00:00">8:00 am</option>
	<option value="08:30:00">8:30 am</option>
	<option value="09:00:00">9:00 am</option>
	<option value="09:30:00">9:30 am</option>
	<option value="10:00:00">10:00 am</option>
	<option value="10:30:00">10:30 am</option>
	<option value="11:00:00">11:00 am</option>
	<option value="11:30:00">11:30 am</option>
	<option value="12:00:00">12:00 pm</option>
	<option value="12:30:00">12:30 pm</option>
	<option value="13:00:00">1:00 pm</option>
	<option value="13:30:00">1:30 pm</option>
	<option value="14:00:00">2:00 pm</option>
	<option value="14:30:00">2:30 pm</option>
	<option value="15:00:00">3:00 pm</option>
	<option value="15:30:00">3:30 pm</option>
	<option value="16:00:00">4:00 pm</option>
	<option value="16:30:00">4:30 pm</option>
	<option value="17:00:00">5:00 pm</option>
	<option value="17:30:00">5:30 pm</option>
	<option value="18:00:00">6:00 pm</option>
	<option value="18:30:00">6:30 pm</option>
	<option value="19:00:00">7:00 pm</option>
	<option value="19:30:00">7:30 pm</option>
	<option value="20:00:00">8:00 pm</option>
	<option value="20:30:00">8:30 pm</option>
	<option value="21:00:00">9:00 pm</option>
	<option value="21:30:00">9:30 pm</option>
	<option value="22:00:00">10:00 pm</option>
	<option value="22:30:00">10:30 pm</option>
	<option value="23:00:00">11:00 pm</option>
	<option value="23:30:00">11:30 pm</option>
</select>

<select name="timestop" id="timeStop">
	<option value="00:00:00">12:00 am</option>
	<option value="00:30:00">12:30 am</option>
	<option value="01:00:00">1:00 am</option>
	<option value="01:30:00">1:30 am</option>
	<option value="02:00:00">2:00 am</option>
	<option value="02:30:00">2:30 am</option>
	<option value="03:00:00">3:00 am</option>
	<option value="03:30:00">3:30 am</option>
	<option value="04:00:00">4:00 am</option>
	<option value="04:30:00">4:30 am</option>
	<option value="05:00:00">5:00 am</option>
	<option value="05:30:00">5:30 am</option>
	<option value="06:00:00">6:00 am</option>
	<option value="06:30:00">6:30 am</option>
	<option value="07:00:00">7:00 am</option>
	<option value="07:30:00">7:30 am</option>
	<option value="08:00:00">8:00 am</option>
	<option value="08:30:00">8:30 am</option>
	<option value="09:00:00">9:00 am</option>
	<option value="09:30:00">9:30 am</option>
	<option value="10:00:00">10:00 am</option>
	<option value="10:30:00">10:30 am</option>
	<option value="11:00:00">11:00 am</option>
	<option value="11:30:00">11:30 am</option>
	<option value="12:00:00">12:00 pm</option>
	<option value="12:30:00">12:30 pm</option>
	<option value="13:00:00">1:00 pm</option>
	<option value="13:30:00">1:30 pm</option>
	<option value="14:00:00">2:00 pm</option>
	<option value="14:30:00">2:30 pm</option>
	<option value="15:00:00">3:00 pm</option>
	<option value="15:30:00">3:30 pm</option>
	<option value="16:00:00">4:00 pm</option>
	<option value="16:30:00">4:30 pm</option>
	<option value="17:00:00">5:00 pm</option>
	<option value="17:30:00">5:30 pm</option>
	<option value="18:00:00">6:00 pm</option>
	<option value="18:30:00">6:30 pm</option>
	<option value="19:00:00">7:00 pm</option>
	<option value="19:30:00">7:30 pm</option>
	<option value="20:00:00">8:00 pm</option>
	<option value="20:30:00">8:30 pm</option>
	<option value="21:00:00">9:00 pm</option>
	<option value="21:30:00">9:30 pm</option>
	<option value="22:00:00">10:00 pm</option>
	<option value="22:30:00">10:30 pm</option>
	<option value="23:00:00">11:00 pm</option>
	<option value="23:30:00">11:30 pm</option>
</select>
</div>

<p>
	Difference: <input id="timeDiff" value="0">
</p>





  </body>
</html>

标签： javascript

解决方案

你要接近解决方案

只需更改您的textReplace()如下：

function textReplace(diff) {
    $("#timeDiff").val(diff);
}

并称之为：textReplace(minutes/60);

演示： 

(function(d) {

var
	start = d.getElementById('timeStart'),
	stop = d.getElementById('timeStop'),
	diff = d.getElementById('timeDiff');

function textReplace(diff) {
	$("#timeDiff").val(diff);
}
function addEvent(e, event, handler) {
	if (e.addEventListener) e.addEventListener(event, handler, false);
		else e.attachEvent('on' + event, handler);
}
function selectHours(e) {
	return new Date(
		'01/01/1971 ' + e.options[e.selectedIndex].value
	).getTime(); 
}
function calcTime(e) {
	d = new Date(selectHours(stop) - selectHours(start));
	minutes = (diff, d.getUTCHours()*60 + d.getUTCMinutes());
	textReplace(minutes/60);
  console.log(diff+','+minutes/60);
}
//addEvent(start, 'change', calcTime);
addEvent(stop, 'change', calcTime);
})(document);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
<head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<title>
	&lt;SELECT&gt; Time Difference Demo
</title>

</head> <body>

<h1>
	<code>&lt;SELECT&gt;</code> Time Difference Demo
</h1>

<div><!-- since SELECT cannot be a direct child of BODY! -->

<select name="timestart" id="timeStart">
	<option value="00:00:00">12:00 am</option>
	<option value="00:30:00">12:30 am</option>
	<option value="01:00:00">1:00 am</option>
	<option value="01:30:00">1:30 am</option>
	<option value="02:00:00">2:00 am</option>
	<option value="02:30:00">2:30 am</option>
	<option value="03:00:00">3:00 am</option>
	<option value="03:30:00">3:30 am</option>
	<option value="04:00:00">4:00 am</option>
	<option value="04:30:00">4:30 am</option>
	<option value="05:00:00">5:00 am</option>
	<option value="05:30:00">5:30 am</option>
	<option value="06:00:00">6:00 am</option>
	<option value="06:30:00">6:30 am</option>
	<option value="07:00:00">7:00 am</option>
	<option value="07:30:00">7:30 am</option>
	<option value="08:00:00">8:00 am</option>
	<option value="08:30:00">8:30 am</option>
	<option value="09:00:00">9:00 am</option>
	<option value="09:30:00">9:30 am</option>
	<option value="10:00:00">10:00 am</option>
	<option value="10:30:00">10:30 am</option>
	<option value="11:00:00">11:00 am</option>
	<option value="11:30:00">11:30 am</option>
	<option value="12:00:00">12:00 pm</option>
	<option value="12:30:00">12:30 pm</option>
	<option value="13:00:00">1:00 pm</option>
	<option value="13:30:00">1:30 pm</option>
	<option value="14:00:00">2:00 pm</option>
	<option value="14:30:00">2:30 pm</option>
	<option value="15:00:00">3:00 pm</option>
	<option value="15:30:00">3:30 pm</option>
	<option value="16:00:00">4:00 pm</option>
	<option value="16:30:00">4:30 pm</option>
	<option value="17:00:00">5:00 pm</option>
	<option value="17:30:00">5:30 pm</option>
	<option value="18:00:00">6:00 pm</option>
	<option value="18:30:00">6:30 pm</option>
	<option value="19:00:00">7:00 pm</option>
	<option value="19:30:00">7:30 pm</option>
	<option value="20:00:00">8:00 pm</option>
	<option value="20:30:00">8:30 pm</option>
	<option value="21:00:00">9:00 pm</option>
	<option value="21:30:00">9:30 pm</option>
	<option value="22:00:00">10:00 pm</option>
	<option value="22:30:00">10:30 pm</option>
	<option value="23:00:00">11:00 pm</option>
	<option value="23:30:00">11:30 pm</option>
</select>

<select name="timestop" id="timeStop">
	<option value="00:00:00">12:00 am</option>
	<option value="00:30:00">12:30 am</option>
	<option value="01:00:00">1:00 am</option>
	<option value="01:30:00">1:30 am</option>
	<option value="02:00:00">2:00 am</option>
	<option value="02:30:00">2:30 am</option>
	<option value="03:00:00">3:00 am</option>
	<option value="03:30:00">3:30 am</option>
	<option value="04:00:00">4:00 am</option>
	<option value="04:30:00">4:30 am</option>
	<option value="05:00:00">5:00 am</option>
	<option value="05:30:00">5:30 am</option>
	<option value="06:00:00">6:00 am</option>
	<option value="06:30:00">6:30 am</option>
	<option value="07:00:00">7:00 am</option>
	<option value="07:30:00">7:30 am</option>
	<option value="08:00:00">8:00 am</option>
	<option value="08:30:00">8:30 am</option>
	<option value="09:00:00">9:00 am</option>
	<option value="09:30:00">9:30 am</option>
	<option value="10:00:00">10:00 am</option>
	<option value="10:30:00">10:30 am</option>
	<option value="11:00:00">11:00 am</option>
	<option value="11:30:00">11:30 am</option>
	<option value="12:00:00">12:00 pm</option>
	<option value="12:30:00">12:30 pm</option>
	<option value="13:00:00">1:00 pm</option>
	<option value="13:30:00">1:30 pm</option>
	<option value="14:00:00">2:00 pm</option>
	<option value="14:30:00">2:30 pm</option>
	<option value="15:00:00">3:00 pm</option>
	<option value="15:30:00">3:30 pm</option>
	<option value="16:00:00">4:00 pm</option>
	<option value="16:30:00">4:30 pm</option>
	<option value="17:00:00">5:00 pm</option>
	<option value="17:30:00">5:30 pm</option>
	<option value="18:00:00">6:00 pm</option>
	<option value="18:30:00">6:30 pm</option>
	<option value="19:00:00">7:00 pm</option>
	<option value="19:30:00">7:30 pm</option>
	<option value="20:00:00">8:00 pm</option>
	<option value="20:30:00">8:30 pm</option>
	<option value="21:00:00">9:00 pm</option>
	<option value="21:30:00">9:30 pm</option>
	<option value="22:00:00">10:00 pm</option>
	<option value="22:30:00">10:30 pm</option>
	<option value="23:00:00">11:00 pm</option>
	<option value="23:30:00">11:30 pm</option>
</select>
</div>

<p>
	Difference: <input id="timeDiff" value="0">
</p>





  </body>
</html>

推荐阅读