堆棧內存溢出
  簡體   English   中英

單擊“重置”按鈕后如何使“開始”按鈕可見

[英]How to make "Start" button visible after clicking "Reset" button

 原文  2021-04-12 00:19:19  2   1    javascript/ html/ jquery/ css

問題描述

我正在用 jQuery 做一個計時器。 當您按下“重置”按鈕時，應該使“開始”按鈕再次可見。

我收到此錯誤：

  • 單擊“重置”按鈕：選擇器“#reset”未呈現屬性“顯示”的預期 css：預期“內聯塊”深度等於“無”

這是我的 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">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;
}

這是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");
});

這是 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;
}

這是times.js：

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

// timer to calculate the starting and stopping clicks
var start_time;
var formatted_time;
var end_time;
var formatted_end_time;
var time_change;

$(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>");
  });
 
});

1 個解決方案

解決方案1
 1  2021-04-12 01:06:37

避免混合addClass() / removeClass()與hide() / show() 。

addClass() / removeClass()的作用應該很明顯。 hide() / show()添加和刪除內聯 css styles 以實現類似的最終結果（但內聯 styles 將始終優先）。 

 $(function() { $("#reset").on("click", function() { $(".results").remove(); $("#reset").addClass("hidden"); $("#time_ended").addClass("hidden"); $("#start").removeClass("hidden"); }); // timer to calculate the starting and stopping clicks var start_time; var formatted_time; var end_time; var formatted_end_time; var time_change; $("#start").on("click", function() { $("#start").addClass("hidden"); $("#stop").removeClass("hidden"); $("#time_started").removeClass("hidden"); $("#time_ended").addClass("hidden"); end_time = new Date(); start_time = new Date(); formatted_time = formatTime(start_time); }); $("#stop").on("click", function() { // $("#stop").hide(); $("#stop").addClass("hidden"); // $("#reset").show(); $("#reset").removeClass("hidden"); // $("#time_started").hide(); $("#time_started").addClass("hidden"); // $("#time_ended").show(); $("#time_ended").removeClass("hidden"); 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>" ); }); }); 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; }
 .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" class="hidden">Stop Timer</button> <button id="reset" class="hidden">Reset Timer</button> <span id="time_started" class="hidden">Timer Started</span> <span id="time_ended" class="hidden">Timer Ended</span>

此外，在每一輪添加新內容然后在最后隱藏它（而不是實際刪除它）時要小心。 您最終會得到不必要的重復 html。

或者，您可以在起始 html 中添加.results和 .hidden 的.hidden以對所有內容使用相同的隱藏/顯示方法。 

 $(function() { $("#reset").on("click", function() { $(".results").addClass("hidden"); $("#reset").addClass("hidden"); $("#time_ended").addClass("hidden"); $("#start").removeClass("hidden"); }); // timer to calculate the starting and stopping clicks var start_time; var formatted_time; var end_time; var formatted_end_time; var time_change; $("#start").on("click", function() { $("#start").addClass("hidden"); $("#stop").removeClass("hidden"); $("#time_started").removeClass("hidden"); $("#time_ended").addClass("hidden"); end_time = new Date(); start_time = new Date(); formatted_time = formatTime(start_time); }); $("#stop").on("click", function() { $("#stop").addClass("hidden"); $("#reset").removeClass("hidden"); $("#time_started").addClass("hidden"); $("#time_ended").removeClass("hidden"); $(".results").removeClass("hidden"); end_time = new Date(); formatted_end_time = formatTime(end_time); time_change = end_time - start_time; $('#results-time-started span').text(formatted_time); $('#results-time-ended span').text(formatted_end_time); $('#results-time-counted span').text(time_change / 1000); $('#results-time-off-by span').text(time_change / 1000 - 45); }); }); 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; }
 .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" class="hidden">Stop Timer</button> <button id="reset" class="hidden">Reset Timer</button> <span id="time_started" class="hidden">Timer Started</span> <span id="time_ended" class="hidden">Timer Ended</span> <p id='results-time-started' class='hidden results'>You started at <span></span>.</p> <p id='results-time-ended' class='hidden results'>You finised at <span></span>.</p> <p id='results-time-counted' class='hidden results'>You counted <span></span> seconds.</p> <p id='results-time-off-by' class='hidden results'>You are off by <span></span> seconds.</p>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何通過單擊另一個按鈕使一個按鈕可見？ 單擊按鈕后如何顯示下拉列表 單擊重置按鈕后如何重置表單並刪除 Cookie？ 單擊提交按鈕后如何重置輸入值？ 點擊后將Bootstrap按鈕重置為正常的styles 單擊提交按鈕后重置表單字段 單擊后將按鈕設為只讀 單擊其他按鈕后激活按鈕 單擊html中的按鈕后如何啟動自動重定向？ 單擊按鈕后再次啟動 setInterval
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM