同時に2つの異なるhtmlページでタイマーを開始

Question

私はタイマー制御用のページページと監視用の他のページを持っています。

私はスタートタイマーをクリックしたとき、私は時間を同時に制御ページおよび監視ページに開始し、また停止を

私はそれをどのように行うことができますクリックしたときに一緒に停止することを、したいですか？

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

<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>

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ページに

を持っているを持っています

と結果ページでは、あなたが2つのページで何を意味するかは明らかではない

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

など