Javascript脚本不抓取时间类型的数据(?)

<html>
<script type="text/javascript">
function hoursWorked(){
//This is a line to help debug
alert("entered hoursWorked() function")
var date = new Date();
var hour = date.getHours(),
min  = date.getMinutes();
hour = (hour < 10 ? "0" : "") + hour;
min = (min < 10 ? "0" : "") + min;
var endtime = hour + ":" + min; 
var starttime = hour + ":" + min;
document.getElementById("endtime").value = endtime;
document.getElementById("starttime").value = starttime;
/*The above block is, as I understand it, how you are supposed to work with military time in javascript.  
I think i may have referenced the id's wrong.*/
if (starttime > endtime) {
var hoursworked = (endtime + 12:00) - (starttime - 12:00);
if (hoursworked < 08:00) {
alert("Shift entered as less than 8 hours, please double check before 
submitting");
}}  else {
var hoursworked = (endtime - starttime);
if (hoursworked < 08:00) {
alert("Shift entered as less than 8 hours, please double check 
before submitting");
}}       
}
document.getElementById("endtime").addEventListener.on('change', hoursWorked());
</script>

事件侦听器也可能是错误的。

<label class="yard/ylard" name="lya">Start Time:</label>
<br>
<input id="starttime" name="ly"type="time" size="20" step="1800" required>
<br>

<label>Finish Time:</label>
<br>
<input id="endtime" name="iy" type="time" size="20" step="1800" 
onchange="hoursWorked();" required>
</html>

因此，此代码应该从两个字段中获取时间输入并将它们相互比较。如果结束时间小于开始时间，则结束时间相加 12 小时，而开始时间减去 12 小时。这是为了避免不提取日期信息，因为两个字段的日期将保持不变。

因为它拉入军事时间，所以我在小于 10：00 的任何时间之前添加了这些行以前缀"0"。这是在我们的网站上，供用户记录他们的工作时间。如果他们工作时间少于 8 小时，我们希望向用户发送警报，要求他们仔细检查他们输入的信息。

我对Javascript语法不是很有经验，所以我在这里拥有的内容主要是通过互联网上的片段以及我对其他编程语言的了解拼凑在一起的。任何帮助将不胜感激！

首先注意以下更改，我已经从 html 中删除了内联事件处理程序，javascript 事件侦听器现在document.getElementById("endtime").addEventListener('change', hoursWorked);。我已经从 jQuery 库中删除了on，并在工作时间后删除了()。重要的一点是，hoursWorked将方法分配给事件侦听器，hoursWorked()立即运行该方法。

现在进入基本问题。8:00不是 JavaScript 的有效数值，则无法执行数学函数或与之进行比较。我们需要使用JavaScript理解的东西。我为下面选择了几分钟。

/*Set up values outside the event listern*/
var date = new Date();
var hour = date.getHours(),
min = date.getMinutes();
hour = (hour < 10 ? "0" : "") + hour;
min = (min < 10 ? "0" : "") + min;
var endtime = hour + ":" + min;
var starttime = hour + ":" + min;
document.getElementById("endtime").value = endtime;
document.getElementById("starttime").value = starttime;
/*Convert military time to minutes*/
function timeToMinutes(militaryTime) {
var timeArray = militaryTime.split(":");
return timeArray[0] * 60 + parseInt(timeArray[1], 10);
}
function hoursWorked() {
//This is a line to help debug
alert("entered hoursWorked() function")
//Get raw values
var startTime = document.getElementById("starttime").value;
var endTime = document.getElementById("endtime").value;
//convert to minutes
startTime = timeToMinutes(startTime);
endTime = timeToMinutes(endTime)
//Adjust for overnight shift
if (startTime > endTime) {
endTime += 24 * 60;
}
var minutesWorked = endTime - startTime;
console.log(minutesWorked / 60);
if (minutesWorked < (8 * 60)) {
alert("Shift entered as less than 8 hours, please double check before submitting");
}
}
document.getElementById("endtime").addEventListener('change', hoursWorked);

</script>
The event listener also might be wrong.
<label class="yard/ylard" name="lya">Start Time:</label>
<br>
<input id="starttime" name="ly" type="time" size="20" step="1800" required>
<br>
<label>Finish Time:</label>
<br>
<input id="endtime" name="iy" type="time" size="20" step="1800"  required>

事件侦听器未触发。您应该进行一些更改。这是一个稍微精简的示例。您应该按名称而不是名称和括号引用处理程序，因为您不是直接"调用"处理程序，而是通过对它的"引用"传递。

另外，我认为除非您为时间选择器设置初始值，否则change事件不会触发。我在下面做了。

您可能需要小心time输入控件;我不相信它在IE中有效。请参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

function hoursWorked(){
alert("entered hoursWorked() function");
var date = new Date();
var hour = date.getHours(),
min  = date.getMinutes();
hour = (hour < 10 ? "0" : "") + hour;
min = (min < 10 ? "0" : "") + min;
var endtime = hour + ":" + min; 
var starttime = hour + ":" + min;
		document.getElementById("endtime").value = endtime;
		document.getElementById("starttime").value = starttime;
}
document.getElementById("endtime").value = '00:00';
document.getElementById("endtime").addEventListener('change', hoursWorked);

<label class="yard/ylard" name="lya">Start Time:</label>
<br>
<input id="starttime" name="ly"type="time" size="20" step="1800" required>
<br>
<label>Finish Time:</label>
<br>
<input id="endtime" name="iy" type="time" size="20" step="1800" required>

<script type="text/javascript">
/*Convert military time to minutes*/
function timeToMinutes(militaryTime) {
var timeArray = militaryTime.split(":");
return timeArray[0] * 60 + parseInt(timeArray[1], 10);
}
function hoursWorked() {

//Get raw values
var startTime = document.getElementById("starttime").value;
var endTime = document.getElementById("endtime").value;
//convert to minutes
startTime = timeToMinutes(startTime);
endTime = timeToMinutes(endTime)
//Adjust for overnight shift
if (startTime > endTime) {
endTime += 24 * 60;
}
var minutesWorked = endTime - startTime;

if (minutesWorked < (8 * 60)) {
alert("Shift entered as less than 8 hours, please double check 
before submitting");
}
}
document.getElementById("endtime").addEventListener('change', 
hoursWorked);
</script>

<label class="yard/ylard" name="lya">Start Time:</label>
<br>
<input id="starttime" name="ly" type="time" size="20" step="1800" 
required value="06:00">
<br>

<label>Finish Time:</label>
<br>
<input id="endtime" name="iy" type="time" size="20" step="1800"  
required value="17:00" onchange="hoursWorked()">

这是运行的最终代码，感谢您的帮助!!

相关内容

最新更新

热门标签：