首页 > 解决方案 > 如何使用Javascript制作一个在页面上显示经过时间的按钮

问题描述

希望创建一个按钮,该按钮将显示一个警报,显示在当前页面上花费的时间。

即您单击“单击我”按钮,它会在页面上弹出一个带有总经过时间的警报

到目前为止我有这个

<html>
  <body>


   <p> Total Elapsed Time on Page Button </p>


     <input type="button" value="click me" onclick="stopTime"()>


  </body>
</html>

然后我的javascript是

function stopTime() {
    alert("Elapsed Time");
    var startDate = new Date();
    var startTime = startDate.getTime();
    var date_now = new Date (); 
    var time_now = date_now.getTime (); 
    var time_diff = time_now - startTime; 
    var seconds_elapsed = Math.floor ( time_diff / 1000 );


}

当我单击按钮时,什么也没有发生。

我在搞砸什么?谢谢你。

标签: javascripthtmlcss

解决方案


您需要在引号中保留函数括号:

var startDate;

function stopTime() {

  var startTime = startDate.getTime();
  var date_now = new Date();
  var time_now = date_now.getTime();
  var time_diff = time_now - startTime;
  var seconds_elapsed = Math.floor(time_diff / 1000);
  alert(seconds_elapsed+" seconds");
}

function start() {
  startDate = new Date();
}

window.onload = start();
<p> Total Elapsed Time on Page Button </p>


<button onclick="stopTime()">click me</button>


推荐阅读