如何在浏览器中显示输出值

Question

嗨，我正在控制台中获取时间间隔的输出（在开发人员模式下）我只想在浏览器中显示它，但它没有显示，这是我工作的屏幕截图 https://ibb.co/9gBH3WL 我只想将输出从控制台获取到浏览器

代码：

   <p>Selected DateTime: <b><span id="showdatetime">[date]</span></b></p>


   dt1 = new Date(st);
dt2 = new Date(en);
alert(dt1);
var timeslot=Math.abs(Math.round(diff_hours(dt1, dt2)/timesslot));
console.log(timeslot);

var temp = [];
var newc=new Date(st);
for( i=0; i<timeslot;i++){

  var current=add_minutes(newc, timesslot);
  newc=current;
  temp[i] = newc.toString();

}

 for(var j = 0; j<temp.length; j++){

 console.log(temp[j]);


 }

  });

  $('.start').click(function() {
     var btn = $(".start").val();
     if(btn=='') {

     $('#field1').text("Enter Some Text In Input Field");
   }
   else{
     alert(btn);
     }
     if(btn=='') {

     $('#field1').text("Enter Some Text In Input Field");
   }
   else{
     alert(btn);
     }
  });


  //$('#showdatetime').text(event.label);
  $('#showdatetime').innerHTML(event.label);

Answer 1

考虑以下示例，基于 jQuery 日期选择器示例。

$(function() {
  // Functions
  function addZero(i) {
    /*--
    Input:
      Integer
    Output:
      String formatted with preceding 0
    --*/
    return (i < 10 ? "0" + i : i);
  }

  function getTime(dObj, m) {
    /*--
    Input:
      Date Object
      Military Format (Boolean) [Option, default: true]
    Output:
      Time (String)
    --*/
    var t;
    if (m == undefined) {
      m = true;
    }
    if (m) {
      var hh = addZero(dObj.getHours());
      var mm = addZero(dObj.getMinutes());
      t = hh + ":" + mm;
    } else {
      t = dObj.toLocaleTimeString();
    }
    return t;
  }

  function addMin(dt, m) {
    /*--
    Input:
      Date Object
      Minutes (Integer)
    Output:
      Sum of Date + Minutes as Date Object
    --*/
    var t = dt.getTime();
    t = t + (1000 * 60 * m);
    return new Date(t);
  }

  function getMinDiff(a, b) {
    /*--
    Input:
      Date Object
      Date Object
    Output:
      Calculated difference of minutes as Integer
    --*/
    var h = b.getHours() - a.getHours();
    var m = b.getMinutes() - a.getMinutes();
    m = m + (h * 60);
    return m;
  }

  function updateTime(d, t, m) {
    /*--
    Input:
      Date Field (Object)
      Time (String)
      Military Format (Boolean) [Optional, Default: true]
    Output:
      Date Object set to Date & Time
    --*/
    if (m == undefined) {
      m = true;
    }
    var hh, mm;
    if (m) {
      // Format: 14:12
      hh = parseInt(t.val().slice(0, 2));
      mm = parseInt(t.val().slice(3));
    } else {
      // Format: 2:12 PM
      var re = /(\d+):(\d+):\d+\s(AM|PM)/i;
      var p = re.exec(t.val());
      hh = parseInt(p[1]);
      mm = parseInt(p[2]);
      if (p[3].toLowerCase() == "pm") {
        if (hh < 12) {
          hh = 12 + hh;
        }
      }
    }
    var ms = Date.parse(d.val());
    var dt = new Date(ms);
    dt.setHours(hh);
    dt.setMinutes(mm);
    dt.setSeconds(0);
    dt.setMilliseconds(0);
    return dt;
  }

  // Initialization
  var dt = $("#datepicker").datepicker({
      onSelect: function(str, obj) {
        var now = new Date();
        now.setSeconds(0);
        now.setMilliseconds(0);
        var then = addMin(now, 30);
        st.val(getTime(now, false)).data("time", now);
        en.val(getTime(then, false)).data("time", then);
      }
    }),
    st = $("#starttime"),
    en = $("#endtime");

  // Event Callbacks
  $(".time").change(function() {
    var nt = updateTime(dt, $(this), false);
    $(this).data("time", nt);
  });

  $("#addevent").click(function() {
    if (dt.val() == "" || st.val() == "") {
      return false;
    }
    $("#showdatetime").html(dt.val() + " " + st.val() + " (" + getMinDiff(st.data("time"), en.data("time")) + " Mins)");
  });
});

.row {
  padding: 0;
  margin: 0;
  list-style: none;
}

.row li em {
  color: red;
}

.row li label {
  display: inline-block;
  width: 100px;
}

.row li input {
  width: 120px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul class="row">
  <li><label>Date:</label><input type="text" id="datepicker" class="date" /><em>*</em></li>
  <li><label>Start Time:</label><input type="text" id="starttime" class="time" /><em>*</em></li>
  <li><label>End Time:</label><input type="text" id="endtime" class="time" /><em>*</em></li>
</ul>

<button id="addevent">Add Date</button>
<p>Selected DateTime: <b><span id="showdatetime">[date]</span></b></p>

要用 jQuery 替换元素的 innerHTML，您需要使用 .html()。使用 .text() 将设置文本内容，更新文本节点，但根据您的结构，它可能会产生不同的结果。通常的做法是使用.html().

如您所见，您可以使用 12 或 24 小时制。有许多额外的辅助函数可以根据需要执行各种操作。

不清楚您要完成什么，但我希望这对您有所帮助。如果您需要更多帮助，请提供更完整的示例。

如何在浏览器中显示输出值

how to show an output value in browser

javascript

jquery

jquery-ui