Doạn JavaScript sẽ hướng dẫn tạo một mẫu đồng hồ đếm ngược đơn giản đơn giản, bạn có thể thêm một chút CSS, một chút effect theo ý mình, rùi dùng vào các mục dịch khác nhau, như thời gian mở cửa, thời gian khuyến mại, hoặc dùng để tính toán thời gian rùi làm gì đó thì tùy bạn :)) v.v.v.
Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera
JavaScript Source
Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera
JavaScript Source
<!-- saved from url=(0021)file:///I:/timer.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 3;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()',1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
}
else {
minutes.value = getminutes();
seconds.value = getseconds();
}
if(mins<2)
{
minutes.style.color="red";
seconds.style.color="red";
}
if(mins<0)
{
alert('time up');
document.forms["s"].submit();
//location.href = "index.jsp";
minutes.value=0;
seconds.value=0;
}
else
{
secs--;
setTimeout('Decrement()',1000);
}
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs-Math.round(mins *60);
}
</script>
</head>
<body onload="countdown();">
<div>
Time left <input id="minutes" type="text" style="width: 10px; border: none; font-size: 16px; font-weight: bold; color: black;"><font size="5"> :</font><input id="seconds" type="text" style="width: 20px; border: none; font-size: 16px; font-weight: bold; color: black;">
</div>
<form action="file:///I:/index.jsp" id="s">
</form>
</body></html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Countdown</title>
<script type="text/javascript">
// set minutes
var mins = 3;
// calculate the seconds (don't change this! unless time progresses at a different speed for you...)
var secs = mins * 60;
function countdown() {
setTimeout('Decrement()',1000);
}
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
// if less than a minute remaining
if (seconds < 59) {
seconds.value = secs;
}
else {
minutes.value = getminutes();
seconds.value = getseconds();
}
if(mins<2)
{
minutes.style.color="red";
seconds.style.color="red";
}
if(mins<0)
{
alert('time up');
document.forms["s"].submit();
//location.href = "index.jsp";
minutes.value=0;
seconds.value=0;
}
else
{
secs--;
setTimeout('Decrement()',1000);
}
}
}
function getminutes() {
// minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
// take mins remaining (as seconds) away from total seconds remaining
return secs-Math.round(mins *60);
}
</script>
</head>
<body onload="countdown();">
<div>
Time left <input id="minutes" type="text" style="width: 10px; border: none; font-size: 16px; font-weight: bold; color: black;"><font size="5"> :</font><input id="seconds" type="text" style="width: 20px; border: none; font-size: 16px; font-weight: bold; color: black;">
</div>
<form action="file:///I:/index.jsp" id="s">
</form>
</body></html>
No comments:
Post a Comment