Javascript 如何使用java脚本或JQuery根据在一个文本框中输入的时间在其他文本框中填充更新的时间_Javascript_Jquery

Javascript 如何使用java脚本或JQuery根据在一个文本框中输入的时间在其他文本框中填充更新的时间

javascript jquery

Javascript 如何使用java脚本或JQuery根据在一个文本框中输入的时间在其他文本框中填充更新的时间,javascript,jquery,Javascript,Jquery,再次需要你的帮助。我没有这方面的任何代码片段以下是我的问题描述：有两个文本框。在一个文本框中，用户将以24小时格式输入任何时间，如23:23或10:12 现在，我需要根据输入的时间在第二个文本框中填充时间。将24小时格式的6小时添加到输入的时间后，第二个文本框应显示值。应显示05:23或16:12等 <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></scri

再次需要你的帮助。我没有这方面的任何代码片段

以下是我的问题描述：有两个文本框。在一个文本框中，用户将以24小时格式输入任何时间，如23:23或10:12

现在，我需要根据输入的时间在第二个文本框中填充时间。将24小时格式的6小时添加到输入的时间后，第二个文本框应显示值。应显示05:23或16:12等

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
 $(document).ready(function() {
$('#new_one').on('change',function (e) {
        var first_time = $(this).val();
        var arr = first_time.split(':');
        var hrs = arr[0];

        var new_hrs = parseInt(hrs)+6;
        if(new_hrs>24)
        new_hrs = new_hrs-24;

        if(new_hrs < 10) 
        new_hrs  = '0'+new_hrs;

        var second_time = new_hrs+':'+arr[1];


        $('#new_two').val(second_time);

});
 });
</script>
</head>
<body>
Text1<input type="text" id="new_one"><br/>
Text2<input type="text" id="new_two">
</body>
</html>

这是工作小提琴：

它非常基本，只需在“：”上使用.split“：”拆分第一个框的输入字符串，并相应地增加小时数，然后将计算值放入第二个框

   $(document).ready(function()
    {
       $("#firstTime").keypress(function(){
        var firsttime = $(this).val();
        var gettime = $.trim(firsttime).split(":");
        var updatetime = parseInt(gettime [0])+6;
        if(updatetime > 24)
        {
           updatetime = updatetime-24;
        }
        if(updatetime < 10) 
         {
          updatetime  = "0"+updatetime;
         }
        $("#secondtime").val(updatetime+":"+gettime [1]);
       });
   });

您的HTML将在哪里：

  <input type="text" id="firsttime"><!-- first time -->
  <input type="text" id="secondtime"><!-- second time -->

您还可以利用以下方法简化计算。这里有一个例子。注意，没有验证检查，要添加的小时数硬编码为6

<!DOCTYPE html>
<html>
<head>
    <title>Time Sample</title>
</head>
<body>
Start Time: <input id="startTime" type="text" /><br />
End Time: <input id="endTime" type="text" />

<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/date.js"></script>
<script>
   $(function () {
        $("#startTime").change(function () {
           var endTime = Date.parse(this.value).add(6).hours();
           $("#endTime").val(endTime.toString("H:mm"));
        });
    });
</script>
</body>
</html>

对于您来说，了解这一点的最佳途径是查看有关JavaScript日期对象的文档：这将有助于您了解如何构建此功能，Date对象的.getHours方法以24小时格式返回小时值。嗨..非常感谢..我将通过参考资料来理解这个概念。嗨，非常感谢…对我来说，它没有添加分钟部分，也就是说，它将作为16:00出现意味着：分钟不会出现在第二个文本框中抱歉..我的错误..我们可以将其设置为“一次更改”吗..因为用户可能不会按键…再次感谢我需要一个帮助..当我试图独立使用此代码时，我无法实现它..你能吗请帮助。它没有被发布。让我试着用一些方法来发布我是如何做的。我已经编辑了这个问题。发布了代码。你能看一下吗谢谢你的帮助

<!DOCTYPE html>
<html>
<head>
    <title>Time Sample</title>
</head>
<body>
Start Time: <input id="startTime" type="text" /><br />
End Time: <input id="endTime" type="text" />

<script src="Scripts/jquery-1.8.2.js"></script>
<script src="Scripts/date.js"></script>
<script>
   $(function () {
        $("#startTime").change(function () {
           var endTime = Date.parse(this.value).add(6).hours();
           $("#endTime").val(endTime.toString("H:mm"));
        });
    });
</script>
</body>
</html>