2015-01-27 3 views
-3

나는이 학교에서 가르치는 교사 한 명을 보여주기 위해 타이머를 만들려고합니다. 때로는 하단 타이머가 작동하지 않는 경우도 있습니다. 도움이 필요하지만 때로는 제대로로드되고 때로는 기본 텍스트가 표시됩니다. 그러나 새로운 버튼/유형을 선택할 때마다 자동으로 시간이 업데이트되도록해야합니다. 내가 어떻게 이걸 얻을 수 있니?자바 스크립트 기능이 자동으로 업데이트됩니다.

var setTime=setInterval(function() {clock()}, 1000) 
 
function clock() { 
 
    var d = new Date(); 
 
    document.getElementById("time").innerHTML = d.toLocaleTimeString(); 
 
} 
 
var ringerTime = function() { 
 
    var mark = document.getElementById("time2"); 
 
    var norm = document.getElementById("nday"); 
 
    var thur = document.getElementById("tday"); 
 
    var redN = document.getElementById("reg"); 
 
    var redF = document.getElementById("full"); 
 
    var period1 = document.getElementById("p1"); 
 
    var period2 = document.getElementById("p2"); 
 
    var period4 = document.getElementById("p4"); 
 
    var period5 = document.getElementById("p5"); 
 
    var period7 = document.getElementById("p7"); 
 
    var period8 = document.getElementById("p8"); 
 
    if(period1.checked && norm.checked) { 
 
    mark.innerHTML = "8:56:00 AM"; 
 
    } 
 
    else if(period1.checked && thur.checked) { 
 
    mark.innerHTML = "8:49:00 AM"; 
 
    } 
 
    else if(period1.checked && redN.checked) { 
 
    mark.innerHTML = "8:53:00 AM"; 
 
    } 
 
    else if(period1.checked && redF.checked) { 
 
    mark.innerHTML = "8:51:00 AM"; 
 
    } 
 
    if(period2.checked && norm.checked) { 
 
    mark.innerHTML = "9:46:00 AM"; 
 
    } 
 
    else if(period2.checked && thur.checked) { 
 
    mark.innerHTML = "9:32:00 AM"; 
 
    } 
 
    else if(period2.checked && redN.checked) { 
 
    mark.innerHTML = "9:40:00 AM"; 
 
    } 
 
    else if(period2.checked && redF.checked) { 
 
    mark.innerHTML === "9:35:00 AM"; 
 
    } 
 
    if(period4.checked && norm.checked) { 
 
    mark.innerHTML = "12:00:00 PM"; 
 
    } 
 
    else if(period4.checked && thur.checked) { 
 
    mark.innerHTML = "11:31:00 AM"; 
 
    } 
 
    else if(period4.checked && redN.checked) { 
 
    mark.innerHTML = "11:48:00 AM"; 
 
    } 
 
    else if(period4.checked && redF.checked) { 
 
    mark.innerHTML = "11:37:00 AM"; 
 
    } 
 
    if(period5.checked && norm.checked) { 
 
    mark.innerHTML = "12:50:00 PM"; 
 
    } 
 
    else if(period5.checked && thur.checked) { 
 
    mark.innerHTML = "12:13:00 PM"; 
 
    } 
 
    else if(period5.checked && redN.checked) { 
 
    mark.innerHTML = "12:35:00 PM"; 
 
    } 
 
    else if(period5.checked && redF.checked) { 
 
    mark.innerHTML = "12:21:00 PM"; 
 
    } 
 
    if(period7.checked && norm.checked) { 
 
    mark.innerHTML = "2:30:00 PM"; 
 
    } 
 
    else if(period7.checked && thur.checked) { 
 
    mark.innerHTML = "1:37:00 PM"; 
 
    } 
 
    else if(period7.checked && redN.checked) { 
 
    mark.innerHTML = "2:09:00 PM"; 
 
    } 
 
    else if(period7.checked && redF.checked) { 
 
    mark.innerHTML = "1:51:00 PM"; 
 
    } 
 
    if(period8.checked && norm.checked) { 
 
    mark.innerHTML = "3:20:00 PM"; 
 
    } 
 
    else if(period8.checked && thur.checked) { 
 
    mark.innerHTML = "2:20:00 PM"; 
 
    } 
 
    else if(period8.checked && redN.checked) { 
 
    mark.innerHTML = "2:56:00 PM"; 
 
    } 
 
    else if(period8.checked && redF.checked) { 
 
    mark.innerHTML = "2:35:00 PM"; 
 
    } 
 
} 
 
window.onload = function() { 
 
    clock(); 
 
    ringerTime; document.getElementById("p1").checked = true; 
 
    document.getElementById("nday").checked = true; 
 
};
.date, h2 p { 
 
    text-align: center; 
 
    font-size: 200%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.date h2 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.date p { 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background: linear-gradient(#101010, #151515, #101010); 
 
    border: 1px solid red; 
 
    color: white; 
 
    width: 875px; 
 
    font-size: 225%; 
 
} 
 
.select { 
 
    text-align: center; 
 
    font-family: arial; 
 
    font-size: 125%; 
 
    margin: 0; 
 
    margin-top: 25px; 
 
    padding: 0; 
 
}
<html> 
 
    <body onload="javascript:ringerTime()"> 
 
    <div class="date"> 
 
     <h2>Time</h2> 
 
     <br> 
 
     <p id="time"></p> 
 
     <br> 
 
     <h2>Time Period Ends</h2> 
 
     <br> 
 
     <p id="time2">%TIME_PERIOD_ENDS%</p> 
 
    </div> 
 
    <div class="select"> 
 
     <input id="p1" type="radio" name="period" value="period1">Period 1 
 
     <input id="p2" type="radio" name="period" value="period2">Period 2 
 
     <input id="p4" type="radio" name="period" value="period4">Period 4 
 
     <input id="p5" type="radio" name="period" value="period5">Period 5 
 
     <input id="p7" type="radio" name="period" value="period7">Period 7 
 
     <input id="p8" type="radio" name="period" value="period8">Period 8 
 
     <br> 
 
     <input id="nday" type="radio" name="day" value="normal">Regular Day 
 
     <input id="tday" type="radio" name="day" value="thursday">Thursday 
 
     <input id="reg" type="radio" name="day" value="regularMon">Regular Monday 
 
     <input id="full" type="radio" name="day" value="fullMon">Full Monday 
 
    </div> 
 
    </body> 
 
</html>

JSFiddle : 당신이 그들을 설정하기 전에 값을 확인하고 있기 때문에 http://jsfiddle.net/5b2f68qd/

+2

"jsfiddle 링크가 코드와 함께 있어야합니다"라는 제한 사항을 해결하기 위해 코드를 복사하여 붙여 넣으시겠습니까? – JJJ

+1

일부 코드를 보여주십시오. 바이올린은 훌륭하지만 질문은 자급 자족해야합니다. –

+0

관련 코드 tho 만 :) – Andy

답변

0

가 작동하지 않는 이유입니다. 이 다른 몇 가지 문제도하지만 당신의 몸 태그를 전화를 벗을 경우 : <body onload="javascript:ringerTime()"><body> 에 그리고 하단에 스크립트에서 함수 호출을 수정하고 끝으로 벨소리 통화를 이동 :

window.onload = function() { 
    clock(); 
    document.getElementById("p1").checked = true; 
    document.getElementById("nday").checked = true; 
ringerTime(); 
}; 

해결해야합니다. Here's a working fiddle.

+1

와우, 효과가있었습니다. 감사! – PyPySpy

관련 문제