Posted at

かなり簡単!!100行未満で作る、リアルタイム時計

More than 5 years have passed since last update.


<html>
<head>
<meta charset="UTF-8">
<title>real time</title>
<script type="text/javascript">
function nowTime(){

var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();

var divInner = document.getElementById("real");
if(hour > 12){
var nHour = hour - 12;
divInner.innerHTML = "PM "+ nHour +":"+ min +":"+ sec;
}else if(hour == 12 && min == 00){
var nHour = 0;
var nMin = 0;
divInner.innerHTML = nHour +":"+ nMin +":"+ sec;

}else{
divInner.innerHTML = "AM "+ hour +":"+ min +":"+ sec;
}

}

function toDay(){
var now = new Date();
var day = now.getDate();
var month = now.getMonth() + 1;
var year = now.getFullYear();

var divInner = document.getElementById("nowDay");
divInner.innerHTML = year +"/"+ month +"/"+ day;
}

window.onload = function(){
var nowTime = setInterval("nowTime()",1000);
toDay();
};

</script>
<style>
body{
text-align:center;
font-family:Impact;
}
header{

margin:0;
padding:0;
width:100%;
height:100px;
font-family:Impact;
font-size:100px;
}
#real{
font-size:300px;
margin:auto;
font-family:Impact;
margin-top:100px;
}
#nowDay{
font-size:100px;
margin:auto;
font-family:Impact;
}
</style>
</head>
<body>
<header>
Real-Time
</header><br>
<div id="real">
--:--
</div><br>
<div id="nowDay">
----/--/--
</div>
</body>
</html>