Question

我有用于计时器控制的页面页面和用于监控的其他页面。

我希望当我点击开始计时器时，时间在控制页面和监控页面上同时开始，并且在点击停止时也一起停止

我该怎么做？

＆＃13;

var team1_timer = 00;
window.onload = function () {
  
  var seconds = 00; 
  var tens    = 00; 
  var appendTens    = document.getElementById("tens")
  var appendSeconds = document.getElementById("seconds")
  var buttonStart   = document.getElementById('button-start');
  var buttonStop    = document.getElementById('button-stop');
  var buttonReset   = document.getElementById('button-reset');
  var Interval;

  buttonStart.onclick = function() {
     clearInterval(Interval);
     Interval = setInterval(startTimer, 10);
  }
  
  buttonStop.onclick = function() {
       clearInterval(Interval);
  }
  
  buttonReset.onclick = function() {
     clearInterval(Interval);
    tens = "00";
    seconds = "00";
    appendTens.innerHTML = tens;
    appendSeconds.innerHTML = seconds;
  }
  
  function startTimer () {
    tens++; 
    
    if(tens < 9){
      appendTens.innerHTML = "0" + tens;
    }
    
    if (tens > 9){
      appendTens.innerHTML = tens;
      
    } 
    
    if (tens > 99) {
      console.log("seconds");
      seconds++;
      team1_timer = seconds;
      appendSeconds.innerHTML = "0" + seconds;
      tens = 0;
      appendTens.innerHTML = "0" + 0;
    }
    
    if (seconds > 9){
      appendSeconds.innerHTML = seconds;
    }
    team1_timer = seconds;
  }

  ///////////////////////////////////////////

  var seconds_hold = 00; 
  var tens_hold = 00; 
  var appendTens_hold = document.getElementById("tens_hold")
  var appendSeconds_hold = document.getElementById("seconds_hold")
  var buttonStart_hold = document.getElementById('button-start_hold');
  var buttonStop_hold = document.getElementById('button-stop_hold');
  var buttonReset_hold = document.getElementById('button-reset_hold');
  var Interval_hold ;

  buttonStart_hold.onclick = function() {
     clearInterval(Interval_hold);
     Interval_hold = setInterval(startTimer_hold, 10);
  }
  
  buttonStop_hold.onclick = function() {
     clearInterval(Interval_hold);
  }
  
  buttonReset_hold.onclick = function() {
    clearInterval(Interval_hold);
    tens_hold = "00";
    seconds_hold = "00";
    appendTens_hold.innerHTML = tens_hold;
    appendSeconds_hold.innerHTML = seconds_hold;
  }
  
  function startTimer_hold () {
    tens_hold++; 
    
    if(tens_hold < 9){
      appendTens_hold.innerHTML = "0" + tens_hold;
    }
    
    if (tens_hold > 9){
      appendTens_hold.innerHTML = tens_hold;
      
    } 
    
    if (tens_hold > 99) {
      console.log("seconds_hold");
      seconds_hold++;
      appendSeconds_hold.innerHTML = "0" + seconds_hold;
      tens_hold = 0;
      appendTens_hold.innerHTML = "0" + 0;
    }
    
    if (seconds_hold > 9){
      appendSeconds_hold.innerHTML = seconds_hold;
    }
  }
}

＆＃13;

<div class="wrapper"   style="float:left;">
      <a id="button-start" style="margin-right: 10px; margin-top: -12px;" class="btn btn-success">Start</a>
      <button name="saveRoundTeam1" style=" margin-right: 10px;margin-top: -12px;" onclick="getTime()"  class="btn btn-warning">Stop</button>
      
      <a id="button-reset"  class="btn btn-danger" style=" margin-right: 10px;margin-right:30px; margin-top: -12px;">Reset</a>
      <span style="font-size:30px; color:red; margin-right:30px;" id="">AHT</span> 
      <span id="seconds" style="font-size:30px; ">00</span>
      <span style="font-size:0px; color: #eff4ff;" id="tens">00</span>
    </div> 
    <br><br><br><br>
    <div class="wrapper">
      <a id="button-start_hold" style="margin-right: 10px; margin-top: -12px" class="btn btn-success">Start </a>
      <a id="button-stop_hold" style=" margin-right: 10px;margin-top: -12px"  class="btn btn-warning">Stop </a>
      <a id="button-reset_hold" class="btn btn-danger" style=" margin-right: 10px;margin-right:30px; margin-top: -12px">Reset </a>
      <span style="font-size:30px; color:red; margin-right:30px;" id="">HOLD</span>
      <span style="font-size:30px;" id="seconds_hold">00</span><span id="tens_hold" style="font-size:0px; color: #eff4ff;">00</span>
      <a id="button-stop"></a>
    </div>

＆＃13;

Answer 1

在父页面

var team1_timer = 0;    
var  team1Win = window.open("team1.php","team1");
var  resultWin = window.open("result.php","team1");

并且在子页面中有

opener.team1_timer = seconds;

并且在team1页面中有

buttonStart_hold.onclick=function() {
  opener.result.buttonStart_hold.onclick();
...

并在结果页面中

buttonStart_hold.onclick=function() {
  opener.team1.buttonStart_hold.onclick();
...

等

在两个不同的html页面上同时启动计时器

1 个答案: