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

标签 javascript html asp.net

<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>

关于Javascript 脚本不抓取时间类型的数据(?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58016711/

相关文章:

javascript - A-Frame 组件之间的异步交互

javascript - 如何在 vue.js 中调用 webassembly 方法?

html - 无法将表格布局转换为 DIV

javascript - 是否有帮助将 Prototype JavaScript 转换为 jQuery 的资源?

c# - MVC ActionLink 从当前 url 添加所有(可选)参数

asp.net - 为什么我的网页放在 IIS 上时会发生变化

javascript - 为什么 javascript 没有更好的方法来包含文件?

javascript - 如何根据状态中的链接更改列表项的颜色?

html - RoR 中的图像叠加

javascript - 通过 Javascript 改变 Div 宽度