Aplikasi timmer ini dibuat dengan menggunakan CSS, HTML dan Javascript.
Source Code ( CSS, HTML, Javascript ) :
<!DOCTYPE html>
<html>
<head>
<title>Timmer</title>
<style>
body, html {
margin: 0; padding: 0; width: 100%; height: 100%;
font-family: arial, sans-serif;
}
input {
width: 256px;
background: #fff;
color: #222;
padding: 10px; margin: 5px 0;
border: 0; border-radius: 10px;
}
input[id="xRes"] { background: #555; color: #fff; }
button {
width: 128px;
background: #111;
color: #fff;
padding: 10px; margin: 5px 0;
border: 0; border-radius: 10px;
}
h1 { color: #fff; }
</style>
</head>
<body>
<table bgcolor="#222" width="100%" height="100%">
<tr><td align="center">
<h1 id="xRunTime">00:00:00</h1>
<input id="xTimmer" placeholder="Timmer JJ:MM:DD"><br>
<button onclick="xStart()">Mulai</button>
</td></tr>
</table>
<script>
var xRunTime = document.getElementById("xRunTime");
var xInterval;
function xStart() {
var xData = (document.getElementById("xTimmer").value).split(':');
var xTimmer = parseInt(xData[2]);
xTimmer += parseInt(xData[1]) * 60;
xTimmer += parseInt(xData[0]) * 3600;
xSetRunTime(xTimmer);
clearInterval(xInterval);
xInterval = setInterval(function() {
xSetRunTime(--xTimmer);
}, 1000);
}
function xSetRunTime(xTimmer) {
if(xTimmer <= 0) clearInterval(xInterval);
var hour = parseInt(xTimmer / 3600);
var min = parseInt((xTimmer % 3600) / 60);
var sec = parseInt((xTimmer % 3600) % 60);
xRunTime.innerHTML = (hour > 9 ? hour : '0' + hour) + ":" + (min > 9 ? min : '0' + min) + ":" + (sec > 9 ? sec : '0' + sec);
}
</script>
</body>
</html>
EmoticonEmoticon