Question

我正在尝试创建一个提交按钮，单击该按钮将显示当前日期和时间，然后该按钮将被隐藏，这意味着该按钮将由时间和日期代替>。我看到了一个示例，但它显示了GMT和当前位置名称。那么如何更换按钮并显示时间呢？

使用此代码显示带有格林尼治标准时间和位置名称的日期和时间，但它没有保留，并且页面正在重新加载，仅显示按钮。我不需要显示位置名称和格林尼治标准时间，只需显示当前时间和日期。

$(document).ready(function(){
    $("#hide").click(function(){
        $("#button-to-hide").hide();
        $("p1").show();
    });

});
$('#button-to-hide').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form method="post" action="{{route('signInUpdate','id')}}">
  {{ csrf_field()}}
  <input type="hidden" name="isSignIn" value="{{$internalVisitor->isSignIn}}"/>
  <input type="hidden" name="tableId" value="{{$internalVisitor->id}}"/>
  <button type="submit">
<a id="hide" onclick="document.getElementById('hide').innerHTML = Date()">Hide</a></button>
</form>

Answer 1

由于它位于表单中，因此需要使用e.preventDefault

来防止按钮的默认行为。

$(document).ready(function() {
  $("#hide").click(function(e) {
    e.preventDefault();
    document.getElementById('hide').innerHTML = Date();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">

  <button type="submit">
    <a id="hide">Hide</a></button>
</form>

Answer 2

您可以使用toLocaleDateString()来缩短日期。然后，您可以分别花费数小时，数分钟和数秒。请尝试以下方式：

$(document).ready(function(){
    $("#hide").click(function(event){
      event.preventDefault();
      var d = new Date();
      var t = d.getHours() +':'+ d.getMinutes() +':'+ d.getSeconds();
      $("#p1").text(d.toLocaleDateString()  +'  '+ t);
      $(this).parent().hide();
      $("#p1").show();
    });
});
$('#button-to-hide').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
  <input type="hidden" name="isSignIn" value=""/>
  <input type="hidden" name="tableId" value=""/>
  <button type="submit">
  <a id="hide">Hide</a></button>
  <p id="p1"></p>
</form>

一次单击时如何隐藏按钮，它将显示当前时间和日期

2 个答案: