2017-01-08 55 views
-1

我想创建文本时钟,通过选中或取消选中复选框,可以将格式从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>

+2

什么是实际的问题/问题? –

回答

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>

+0

是否有办法在上午或下午12小时后放置? –

+0

当然,这很容易 –

+0

我已经更新了片段 –