6/30/12

Đồng hồ đếm ngược

Đ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), khi hết thời gian thì đoạn mã JavaScript sẽ chuyển sang một địa chỉ khác. Hiệu ứng rất thích hợp cho những bài kiểm tra trực tuyến.


CSS:
<style type="text/css">
#txt {
  border:none;
  font-family:verdana;
  font-size:16pt;
  font-weight:bold;
  border-right-color:#FFFFFF
}


JavaScript:

<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;

HTML:
<form name="cd">
<input id="txt" readonly="true" type="text" value="10:00" border="0" name="disp">
</form>

Bookmark and Share

0 comments:

Post a Comment

Next previous home

Cộng đồng yêu thiết kế Việt Nam Thiet ke website, danang