Đoạn mã này sẽ tạo một đồng hồ đếm ngược trên trang web (trong ví dụ là 10 phút), kh... chi tiết
[CENTER]
Demo: Đồng hồ đếm ngược
| [URL="http://www.javascriptbank.com/javascript-countdown-timer.html]JavaScript Countdown Timer[/URL][/CENTER]
[SIZE="4"]Cách cài đặt[/SIZE]
Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS
Code:
<style type="text/css">
#txt {
border:none;
font-family:verdana;
font-size:16pt;
font-weight:bold;
border-right-color:#FFFFFF
}
</style>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 2: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
Code:
<script language="javascript">
// Created by: Neill Broderick :: http://www.bespoke-software-solutions.co.uk/downloads/downjs.php
var mins
var secs;
function cd() {
mins = 1 * m("10"); // change minutes here
secs = 0 + s(":01"); // change seconds here (always add an additional second to your total)
redo();
}
function m(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(0, i));
}
function s(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(i + 1, obj.length));
}
function dis(mins,secs) {
var disp;
if(mins <= 9) {
disp = " 0";
} else {
disp = " ";
}
disp += mins + ":";
if(secs <= 9) {
disp += "0" + secs;
} else {
disp += secs;
}
return(disp);
}
function redo() {
secs--;
if(secs == -1) {
secs = 59;
mins--;
}
document.cd.disp.value = dis(mins,secs); // setup additional displays here.
if((mins == 0) && (secs == 0)) {
window.alert("Time is up. Press OK to continue."); // change timeout message as required
// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
} else {
cd = setTimeout("redo()",1000);
}
}
function init() {
cd();
}
window.onload = init;
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 3: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
Code:
<form name="cd">
<input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp">
</form>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Các hiệu ứng tương tự
- Đồng hồ định dạng 12/24 giờ
- Tạo thời gian đếm ngược
- Đồng hồ trong textbox
Bạn có thể xem thêm nhiều JavaScript khác về Thời gian và Bộ đếm