Question

所以，我正在尝试构建一个计时器，但我的setInterval()没有运行。另一件事是，当我在Chrome的JavaScript控制台中测试setInterval()时，它完美无缺。我也试过了var run = setInterval(count_down, 1000);，但那没用。有没有人对如何更改我的代码有任何想法？

的JavaScript

// VARIABLES
var hour = 0;
var min = 0;
var sec = 0;

// MAIN
function main() {
  // setup page
  setup();

  // get user input
  $('.control').on('click', val_input);
}

// OUTPUT TIME
function output_time() {
  // display time
  $('.h').html(hour);
  $('.m').html(min);
  $('.s').html(sec);

  setInterval(count_down, 1000);
}

// COUNT DOWN
function count_down() {
  // count down from the given time
  console.log("It works!");
}

// VALIDATE INPUT
function val_input() {
  // check if inputs have a value in them

  if (!$('.hour').val() || !$('.minute').val() || !$('.second').val()) {
    $('.errors').html('<h1>Please add a input value</h1>');
  } else {
    // check if users input is a number

    if (isNaN($('.hour').val()) || isNaN($('.minute').val()) || isNaN($('.second').val())) {
      $('.errors').html('<h1>You must input numbers</h1>');

      reset_input();
    } else {
      // check if minutes and seconds > 59

      if ($('.minute').val() > 59 || $('.second').val() > 59) {
        $('.errors').html('<h1>Your minutes and seconds can only go up to 59</h1>');
      } else {
        // check if hours are > 48

        if ($('.hour').val() > 48) {
          $('.errors').html('<h1>Your hours can only go up to 48</h1>');
        } else {
          $('.errors').html('');

          // store time
          store_time();
        }
      }
    }
  }
}

function store_time() {
  hour = $('.hour').val();
  min = $('.minute').val();
  sec = $('.second').val();

  // output time
  output_time();
}

// SETUP
function setup() {
  // set default time
  set_time();
}

// SET TIME
function set_time() {
  $('.h').html(hour);
  $('.m').html(min);
  $('.s').html(sec);
}

// RESET INPUT
function reset_input() {
  $('.hour').val('');
  $('.minute').val('');
  $('.second').val('');
}

// ONLOAD
$(document).ready(main);

<!-- HOME PAGE -->

<!DOCTYPE html>
<html>

<head>
  <title>Timer</title>

  <!-- STYLES -->
  <link rel="stylesheet" type="text/css" href="assets/css/large.css" media="(min-width: 800px)">
  <link rel="stylesheet" type="text/css" href="assets/css/medium.css" media="(max-width: 799px) and (min-width: 301px)">
  <link rel="stylesheet" type="text/css" href="assets/css/small.css" media="(max-width: 300px)">

  <!-- FONT-AWESOME -->
  <script src="https://use.fontawesome.com/e99695fe86.js"></script>

  <!-- FAVICON -->
  <link rel="icon" type="image/png" href="assets/img/favicon.png">

  <!-- GOOGLE FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:500,700" rel="stylesheet">
</head>

<body>
  <div class="container">

    <div class="errors">
    </div>

    <header class="time-container">
      <h1 class="time"><span class="h"></span> : <span class="m"></span> : <span class="s"></span></h1>
    </header>

    <section class="input-time-container">
      <input type="text" name="hour" placeholder="Hour" class="hour">
      <input type="text" name="min" placeholder="Minutes" class="minute">
      <input type="text" name="sec" placeholder="Seconds" class="second">

      <div class="control-container">
        <button class="control start"><i class="fa fa-play-circle" aria-hidden="true"></i></button>
        <button class="control reset"><i class="fa fa-times-circle" aria-hidden="true"></i></button>
      </div>
    </section>

  </div>

  <!-- JQUERY -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

  <!-- MAIN -->
  <script src="assets/js/main.js"></script>
</body>

</html>

Answer 1

下面我编写了一个代号为11的代码，你可以编辑它来创建你想要的东西

i=0;

output_time();
function output_time() {
// display time

if(i<=10){
setInterval(function(){

count(i+1);
i++;

},1000);

}
}

function count(p){
if(i<=10){
console.log("It works! "+p);
}
}

的setInterval（）;没有执行

1 个答案: