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

【问题标题】：How to populate updated time in other text box based on time entered in one text box using java script or JQuery如何根据使用 java 脚本或 JQuery 在一个文本框中输入的时间在其他文本框中填充更新时间
【发布时间】：2014-01-30 22:00:19
【问题描述】：

再次需要您的帮助。我没有任何代码sn-p。

以下是我的问题描述：有两个文本框。在一个文本框中，用户将以 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>

【问题讨论】：

开始解决这个问题的最佳方式是查看 JavaScript Date 对象上的文档：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 这应该有助于您学习如何构建它功能。
为了帮助您，Date 对象的 .getHours() 方法以 24 小时格式返回小时值。
嗨..非常感谢..我将通过参考资料来理解这个概念。

标签： javascript jquery

【解决方案1】：

这是工作小提琴：Working Fiddle

 $('#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];


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

});

使用.split(':') 拆分':' 上第一个框的输入字符串并相应地增加小时数并将计算值放入第二个框是非常基本的

【讨论】：

嗨，非常感谢....对我来说，它没有添加分钟部分，即它是 16: 对于 10:00 意味着：分钟没有出现在第二个文本框中跨度>
对不起..我的错误..我们可以让它'onchange'..因为用户可能没有按键...再次感谢
嗨需要一个帮助..当我尝试独立使用此代码时，我无法实现它..请您帮忙。
它没有发布..让我尝试一些方法来发布我正在尝试的方式
我已经编辑了问题..发布了代码..你能看看

【解决方案2】：

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

【讨论】：

非常感谢您的帮助

【解决方案3】：

您还可以利用DateJS 来简化计算，如下所示。这是JS Fiddle 中的一个示例。请注意，没有验证检查，添加的小时数硬编码为 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>

【讨论】：