Diễn đàn Khám phá khoa học
Chào mừng đến Diễn đàn Khám phá khoa học
Bạn đang là khách viếng thăm. Vì vậy vui lòng đăng nhập hoặc đăng kí để sử dụng diễn đàn được tốt hơn và nhìn thấy được một số nội dung cần thiết

Khi tham gia vào diễn đàn bạn có thể viết bài, trao đổi kinh nghiệm, cùng khám phá với mọi người những điều hay, bổ ích về khoa học...,

Hãy chứng tỏ sự hiểu biết của bạn về Khoa học qua http://khampha.8forum.net


Diễn đànĐăng KíCửa hàng Thành ViênNhómLịch


 
ĐĂNG TIN
Các tin, bài báo thuộc về khoa học, thiên văn,...
 
 
Về các lĩnh vực Tin học, vật lý, toán học, thiên văn.....
 
 
Tài liệu, ebook, đề thi, phần mềm hữu ích, video, ảnh khoa học....
 
Bookmark and Share|

Đồng hồ điện tử đẹp bằng javascript cho website

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down
Tác giả
Bình chọn cho bài viết:
Admin
Administrator

avatar


Giới tính : Nam
Số bài gửi Số bài gửi : 388
Coin Coin : 19505
Được cám ơn : 23
Đến từ Đến từ : Việt Nam
Tài sản :

Sun Apr 24, 2011 9:22 am
Bài gửiTiêu đề: Đồng hồ điện tử đẹp bằng javascript cho website

Demo:

Bước 1: Chèn đoạn css sau vào web
Code:
<style type="text/css">
.clock{
   cursor:pointer;
   padding:5px 5px 5px 5px;
   margin:5px 0 5px 0;
   width:70px;
   -webkit-border-bottom-right-radius: 4px;
   -webkit-border-bottom-left-radius: 4px;
   -webkit-border-top-right-radius: 4px;
   -webkit-border-top-left-radius: 4px;
   -moz-border-radius-bottomright: 4px;
   -moz-border-radius-bottomleft: 4px;
   -moz-border-radius-topright: 4px;
   -moz-border-radius-topleft: 4px;
   text-align:center;
   font-weight: bold;
   font-family: arial;
}


#clock {
   background-color:#000000;
   color:#00CC66;
}

#reloj {
   background-color:#999999;
   color:#FFFFFF;
}


#rellotje {
   background-color:#237ab2;
   color:#FFFFFF;
}
</style>

Bước 2: Chèn script vào giữa 2 thẻ
Code:
<script type="text/javascript">
function moveClock(idClock,startTime){//move given clock
   var timeout=1000;//miliseconds to repeat the function

   if ( startTime === undefined ) {//just take the browser time
          rightNow = new Date();
      hour = rightNow.getHours();
      minute = rightNow.getMinutes();
      second = rightNow.getSeconds();      
   }   
   else{//starttime set
      rightNow = startTime.split(':',3);
      hour = parseInt(rightNow[0],10);
      minute =  parseInt(rightNow[1],10);
      second =  parseInt(rightNow[2],10);
      if (second==59){
         if (minute==59){
            if (hour==23) hour=0;   
            else hour++;
            minute=0;
         }else minute++;
         second=0;
      }else second++;
   }

   if (minute<10) minute= "0" + minute;
   if (second<10) second= "0" + second;

   currentTime=hour + ":" + minute + ":" +second;// tim to return
   document.getElementById(idClock).innerHTML = currentTime;//tim for the HTML element

   //recursivity
   if (startTime===undefined) setTimeout("moveClock('"+idClock+"')",timeout);//browser time
   else setTimeout("moveClock('"+idClock+"','"+currentTime+"')",timeout);//set time
      
}
</script>

Bước 3: Chèn đồng hồ vào khu vực bạn muốn hiển thị trên web của bạn:

Code:
<div id="clock" class="clock">clock</div>moveClock("clock");


<script  type='text/javascript'>
moveClock("clock");
</script>

Theo javascriptbank


__________________________________________________________

Về Đầu Trang Go down
Xem lý lịch thành viên http://www.diendan.khamphakhoahoc.tk

Đồng hồ điện tử đẹp bằng javascript cho website

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

Similar topics

+

****************Hãy cùng chia sẻ với bạn bè bằng cách ****************
Copy đường link dưới đây gửi đến nick yahoo bạn bè!

Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
Diễn đàn Khám phá khoa học :: Công nghệ thông tin :: Kiến thức :: Thiết kế web-
Diễn đàn Khám phá khoa học - Phát triển bởi các thành viên của diễn đàn.
Admin: Hồ Vũ Thảo Hiền
Liên hệ: Email: hvthhien@gmail.com hoặc info@khamphakhoahoc.tk | Yahoo chat: hvthhien
Ghi rõ nguồn diendan.khamphakhoahoc.tk khi sao chép bài ở đây!
Diễn đàn | Trang tin |Cửa hàng | Thành viên | Lịch | Game ngẫu nhiên | Nghe nhạc | Tìm kiếm | Hỏi đáp
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Free blog