12 시간 및 24 시간 표시

현재 시간을 표시하는 웹 페이지를 만들고 싶습니다. "12 시간 형식"버튼을 클릭하면 12 시간 단위로 시간이 div 영역에 표시됩니다. "24 시간 형식"버튼을 클릭하면 div 영역에 시간이 24 시간 표시됩니다. 현재이 버튼을 클릭하면 아무 일도 일어나지 않습니다. 도움!12 시간 및 24 시간 표시

HTML :

<html> 
<head> 
<title>Clock</title> 
<script type="text/javascript" src="clock.js"></script> 
</head> 
<body> 
<div id="textbox"></div> 
<br/> 
<button type="radio" onclick="getTwelveHrs()">12 Hour Format</button> 
<button type="radio" onclick="getTwentyFourHrs()">24 Hour Format</button> 
</body> 
</html>

자바 스크립트 :

function getTwelveHours{ 
if (i < 10) { 
    i = "0" + i; 
} 
return i; 
} 

function startTime() { 
var today = new Date(); 
var h = today.getHours(); 
var m = today.getMinutes(); 
var s = today.getSeconds(); 
m = checkTime(m); 
s = checkTime(s); 
document.getElementById('textbox').innerHTML = h + ":" + m + ":" + s; 
t = setTimeout(function() { 
    startTime() 
}, 500); 
} 
startTime(); 
} 

function getTwentyFourHrs() { 
var today=new Date(); 
var h=today.getHours(); 
var m=today.getMinutes(); 
var s=today.getSeconds(); 
m = checkTime(m); 
s = checkTime(s); 
document.getElementById('textbox').innerHTML = h+":"+m+":"+s; 
var t = setTimeout(function(){startTime()},500); 
} 

function checkTime(i) { 
if (i<10) {i = "0" + i}; 
return i; 
}

출처

2014-09-25 yolotheone

getTwelveHrs 한 곳을 철자가 잘못 또는 데일는 말 이외에 다른 –

, 당신은 몇 가지 구문 오류를 가지고있다. – Jias

왜 당신은 당신을 위해이 일을 Moment.js 같은 라이브러리를 사용하지 말아.

http://momentjs.com/docs/

H, HH  24 hour time 
h, or hh 12 hour time (use in conjunction with a or A)

순간() 메소드는 특정 형식으로 현재 날짜를 반환 moment.js

를 사용하는 경우, 그래서 그냥 자바 스크립트에서이 코드를 사용합니다. 당신은 사용자가 버튼을 클릭 할 때 그래서 어떻게 완전히 확실하지 않다, 당신은

moment().format("YYYY-MM-DD HH:mm"); // 24H clock 
moment().format("YYYY-MM-DD hh:mm"); // 12H clock

havn't는이 테스트를 각 버튼에 다음과 같은 메소드를 호출 할 수 있지만, 솔직히 말해서

출처

2014-09-25 16:50:30

작동합니다 너는이 일을하려고 노력했지만, 나는 네가 원하는 것을 이해하고 있다고 생각한다.

window.onload = function() { 
var h, m, s; 
document.getElementById('twelveHrs').style.display = 'none'; 
document.getElementById('twentyFourHrs').style.display = 'none'; 
getTwelveHrs(); 
getTwentyFourHrs(); 

function getTwelveHrs() { 
    var tag = 'AM'; 
    checkTime(); 
    if(h > 12) { 
    h -= 12 
    tag = 'PM'; 
    } 
    document.getElementById('twelveHrs').innerHTML = h + ':' + m + ':' + s + ' ' + tag; 
    t = setTimeout(function() { 
    getTwelveHrs() 
    }, 1000); 
} 

function getTwentyFourHrs() { 
    checkTime(); 
    document.getElementById('twentyFourHrs').innerHTML = h + ':' + m + ':' + s; 
    var t = setTimeout(function() { 
    getTwentyFourHrs() 
    }, 1000); 
} 

function checkTime() { 
    var today = new Date(); 
    h = today.getHours(); 
    m = today.getMinutes(); 
    s = today.getSeconds(); 
    if(h < 10) 
    h = '0' + h; 
    if(m < 10) 
    m = '0' + m; 
    if(s < 10) 
    s = '0' + s; 
    return h, m, s; 
} 
} 

function displayTwelveHrs() { 
document.getElementById('twentyFourHrs').style.display = 'none'; 
document.getElementById('twelveHrs').style.display = ''; 
} 

function displayTwentyFourHrs() { 
document.getElementById('twelveHrs').style.display = 'none'; 
document.getElementById('twentyFourHrs').style.display = ''; 
}

그런 다음 당신의 HTML을 대체 :

기본적으로

<div id="twelveHrs"></div> 
<div id="twentyFourHrs"></div> 
<br /> 
<button type="radio" onclick="displayTwelveHrs()">12 Hour Format</button> 
<button type="radio" onclick="displayTwentyFourHrs()">24 Hour Format</button>

, 페이지가로드, 그것은 시계를 시작하고 해당 div 태그를 숨길 수 있습니다

이 사용 해보세요. 그런 다음 단추를 클릭하면 다른 단추를 숨기면서 원하는 div이 표시됩니다.

작업 JSFiddle

에서 찾을 수 있습니다 : http://jsfiddle.net/fp3Luwzc/

출처

2014-09-25 17:41:16

12 시간 및 24 시간 표시

답변

관련 문제