반응형
0:00:00:00
<style></style>태그를 대충 만들어서 핸드폰에서는 제대로 화면 구성이 셋팅이 안되어 있습니다. 휴대폰에서는 좀 허접하게 나올 것입니다. 공부하는 의미로 그냥 올립니다. 휴대폰에서 제대로 나오게 할려면 미디어쿼리를 사용하시던지 margin이나 font size를 수정하면 될 것 같습니다.
오늘은 html, css, javascript를 이용해서 네이버 스톱워치 같은 스톱워치를 티스토리 블로그에 한번 달아 봤습니다. 자바스크립트 소스는 공개되어 있는 소스를 약간 수정해서 사용했습니다. 워드프레스에도 달아 보고 이번에 티스토리 블로그에도 한번 달아봤는데 잘 적용이 되네요.
아래에 html, css, javascript 소스를 올립니다. 블로그에 적용하는 방법은 간단합니다. 블로그 포스팅할 때 Html 편집 모드로 들어가서 아래 소스코드를 그냥 붙여 넣기 하시면 됩니다. 심심해서 한번 해봤는데 필요하신 분은 한번 해보세요. 이것 저것 숫자도 바꾸어 보면 재미있습니다.
<style>
button {
font-size: 30px;
width: 140px;
height: 60px;
border-radius: 5px;
}
#output {
font-size : 4.0em;
margin-left : 40px;
}
#startPause {
background-color: green;
border-color: green;
}
#reset {
background-color: gray;
border-color: gray;
}
.containerMrs {
background-color: #eeeeee;
border-radius: 5px;
margin: auto;
margin-top: 30px;
margin-bottom : 20px;
width: 400px;
height: 200px;
}
#controls {
margin-left: 50px;
margin-top: 10px;
width: 310px;
height:70px;
}
</style>
<script>
var time = 0;
var running = 0;
function startPause(){
if(running == 0){
running = 1;
increment();
document.getElementById("start").innerHTML = "일시중지";
document.getElementById("startPause").style.backgroundColor = "red";
document.getElementById("startPause").style.borderColor = "red";
}
else{
running = 0;
document.getElementById("start").innerHTML = "계속";
document.getElementById("startPause").style.backgroundColor = "green";
document.getElementById("startPause").style.borderColor = "green";
}
}
function reset(){
running = 0;
time = 0;
document.getElementById("start").innerHTML = "시작";
document.getElementById("output").innerHTML = "0:00:00:00";
document.getElementById("startPause").style.backgroundColor = "green";
document.getElementById("startPause").style.borderColor = "green";
}
function increment(){
if(running == 1){
setTimeout(function(){
time++;
var mins = Math.floor(time/10/60);
var secs = Math.floor(time/10 % 60);
var hours = Math.floor(time/10/60/60);
var tenths = time % 10;
if(mins < 10){
mins = "0" + mins;
}
if(secs < 10){
secs = "0" + secs;
}
document.getElementById("output").innerHTML = hours + ":" + mins + ":" + secs + ":" + tenths + "0";
increment();
},100)
}
}
</script>
<div class="containerMrs">
<p id="output"><b>0:00:00:00</b></p>
<div id="controls" align="center">
<button id="startPause" onclick="startPause()"><b id="start">시작</b></button>
<button onclick="reset()" id="reset"><b id="reset">리셋</b></button>
</div>
</div>
그럼 즐거운 하루 되세요.
반응형
