更改時鐘格式的複選框

Question

我想創建文本時鐘，通過選中或取消選中複選框，可以將格式從24小時更改爲12小時。你能幫我創建這個代碼嗎？

這是我現在有：

function GetClock() { 
 
    var d = new Date(); 
 
    var nhour = d.getHours(), 
 
    nmin = d.getMinutes(); 
 
    if (nmin <= 9) nmin = "0" + nmin 
 

 
    document.getElementById('clockbox').innerHTML = "" + nhour + ":" + nmin + ""; 
 
} 
 

 
window.onload = function() { 
 
    GetClock(); 
 
    setInterval(GetClock, 1000); 
 
}

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700'); 
 

 
#clockbox { 
 
    display: inline-block; 
 
    width: auto; 
 
    color: black; 
 
    position: fixed; 
 
    top: 38%; 
 
    left: 38%; 
 
    font-size: 10vw; 
 
    font-family: 'Roboto Condensed', sans-serif; 
 
}

<div id="clockbox"></div>

Answer 1

var clockFormat = 24; 
 
function GetClock(){ 
 
var d=new Date(); 
 
var nhour=d.getHours(),nmin=d.getMinutes(); 
 
if(nmin<=9) nmin="0"+nmin 
 

 
if (clockFormat == 12 && nhour > 12){ 
 
    nhour -=12; 
 
    nmin+= " PM"; 
 
}else { 
 
    if (clockFormat == 12){ 
 
     nmin+= " AM"; 
 
    } 
 
    
 
    } 
 
    
 
document.getElementById('clockbox').innerHTML=""+nhour+":"+nmin+""; 
 
} 
 

 
window.onload=function(){ 
 
GetClock(); 
 
setInterval(GetClock,1000); 
 
} 
 

 
function setFormat(format){ 
 
clockFormat = format; 
 
}

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700'); 
 
#clockbox{ 
 
    display: inline-block; 
 
    width: auto; 
 
    color:#fff; 
 
    position:fixed; 
 
    top:38%; 
 
    left:38%; 
 
    font-size: 10vw; 
 
    font-family:'Roboto Condensed', sans-serif; 
 

 
} 
 
body{ 
 
    color:#fff; 
 
    background-color:black; 
 
}

<div id="clockbox"></div> 
 
    <input type="radio" name="format" value="24" onChange="setFormat(this.value)" checked="checked"> Format 24<br> 
 
    <input type="radio" name="format" value="12" onChange="setFormat(this.value)">Format 12<br>