时间戳

首页 > 解决方案 > 在 jQuery 中定义时间？

javascript - 在 jQuery 中定义时间？

问题描述

我正在用 jQuery 制作一个计时器。我是新手。当我检查错误时，它说

有人可以帮助我指出我将如何定义它们的正确方向吗？

另外，我收到一个错误：

这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Interactivity</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="styles/site.css"/>
  <script src="scripts/jquery-3.2.1.min.js"></script>
  <script src="scripts/formatTime.js"></script>
  <script src="scripts/times.js"></script>
  <script src="scripts/reset.js"></script>
</head>
<body>
  <div id="text">
    <p>
      Can you internally count 45 seconds precisely?
    </p>
  </div>
  <button id="start">Start Timer</button>
  <button id="stop" style="display: none;">Stop Timer</button>
  <button id="reset" style="display: none;">Reset Timer</button>
  <span id="time_started" class="hidden" style="display: none;">Timer Started</span>
  <span id="time_ended" class="hidden" style="display: none;">Timer Ended</span>
</body>
</html>

这是我的CSS：

body {
  background-color: white;
  font-family: sans-serif;
  margin: 200px auto 0;
  max-width: 900px;
}

h1 {
  text-align: center;
}

div {
  margin-bottom: 50px;
}

.hidden {
  display: none;
}

这是times.js：

/* global formatTime: true */
/* Please do not remove the comment above. */

// timer to calculate the starting and stopping clicks
$(document).ready(function() {
  $("#start").on('click',function() {
    $("#start").hide();
    $("#stop").show();
    $("#time_started").hide();
    $("#time_ended").hide();
    end_time = new Date();
    start_time = new Date();
    formatted_time = formatTime(start_time);
  });

  $("#stop").on('click',function() {
    $("#stop").hide();
    $("#reset").show();
    $("#time_started").hide();
    $("#time_ended").show();
    end_time = new Date();
    formatted_end_time = formatTime(end_time);
    $("body").append("<p class='results'>You started at "+formatted_time+".</p>");
    $("body").append("<p class='results'>You finished at "+formatted_end_time+".</p>");
    time_change = end_time-start_time;
    $("body").append("<p class='results'>You counted "+(time_change/1000)+" seconds.</p>");
    $("body").append("<p class='results'>You are off by "+(time_change/1000-45)+" seconds.</p>");
  });
 
});

这是 formatTime.js：

// formats the current date/time so that it reads as hh:mm:ss PM/AM
function formatTime(time) {
  var
    end_time,
        formatted_time,
        formatted_end_time,
        start_time,
    hour = 12,
    minute = 10,
    second = 10,
    meridies;
  
    hour = time.getHours();
    if (hour>12) {
        hour = hour-12;
        meridies = "PM";
    } else {
        meridies = "AM";
    }

    minute = time.getMinutes();
    if (minute<10) {
        minute = "0"+minute;
    }

    second = time.getSeconds();
    if (second<10) {
        second = "0"+second;
    }

    return hour+":"+minute+":"+second+" "+meridies;
}

这是reset.js：

// reset everything
$("#reset").on('click',function() {
    $(".results").addClass("hidden");
    $("#reset").addClass("hidden");
    $("#start").removeClass("hidden");
    $("#time_started").addClass("hidden");
    $("#time_ended").addClass("hidden");
});

标签： javascriptjquery

解决方案

$(function() {
  // Define more Global Variables
  var end_time, start_time, formatted_time, formatted_end_time;

  // Define Functions
  function formatTime(dt) {
    return dt.getSeconds();
  }

  // Define Event Callbacks
  $("#start").on('click', function() {
    $("#start").hide();
    $("#stop").show();
    $("#time_started").hide();
    $("#time_ended").hide();
    end_time = new Date();
    start_time = new Date();
    formatted_time = formatTime(start_time, end_time);
  });

  $("#stop").on('click', function() {
    $("#stop").hide();
    $("#reset").show();
    $("#time_started").hide();
    $("#time_ended").show();
    end_time = new Date();
    formatted_end_time = formatTime(end_time);
    $("body").append("<p class='results'>You started at " + formatted_time + ".</p>");
    $("body").append("<p class='results'>You finished at " + formatted_end_time + ".</p>");
    var time_change = end_time - start_time;
    $("body").append("<p class='results'>You counted " + (time_change / 1000) + " seconds.</p>");
    $("body").append("<p class='results'>You are off by " + (time_change / 1000 - 45) + " seconds.</p>");
  });
});
body {
  background-color: white;
  font-family: sans-serif;
  margin: 200px auto 0;
  max-width: 900px;
}

h1 {
  text-align: center;
}

div {
  margin-bottom: 50px;
}

.hidden {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="text">
  <p>
    Can you internally count 45 seconds precisely?
  </p>
</div>
<button id="start">Start Timer</button>
<button id="stop" style="display: none;">Stop Timer</button>
<button id="reset" style="display: none;">Reset Timer</button>
<span id="time_started" class="hidden" style="display: none;">Timer Started</span>
<span id="time_ended" class="hidden" style="display: none;">Timer Ended</span>

推荐阅读