Làm Live Clock javascript

Question

không ai biết làm thế nào để làm cho thời gian javascript sống chạy ..

i có mã php này

$expiredate = date('d m Y G:i:s', $rdate1); 
    $f_ex_date = explode(" ", $expiredate); 
    $f_ex_time = explode(":", $expiredate); 
    $_endDate = mktime($f_ex_date[0],$f_ex_date[1],$f_ex_date[2],$f_ex_date[1],$f_ex_date[0],$f_ex_date[2]); 
    $time = $_endDate - time(); 
    $days = floor($time/86400); 
    $hours = floor(($time-($days*86400))/3600); 
    $mins = floor (($time-($days*86400)-($hours*3600))/60); 
    $secs = floor ($time-($days*86400)-($hours*3600)-($mins*60)); 

    echo "Your account going to be expired in <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$days."</span> Days <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$hours."</span> Hours <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$mins."</span> Minutes <span style=\"color: #C11B17;font-family:arial;font-size: 16px;\">".$secs."</span> Seconds"; 

là nó có thể làm cho nó giống như chạy trực tiếp ??

Answer 1

Dưới đây là cách thực hiện. Working Demo.

Thứ nhất, ở phía trên cùng của tài liệu HTML của bạn:

.datetime { 
    color: #C11B17; 
    font-family:arial; 
    font-size: 16px; 
} 

Chúng tôi làm điều này vì vậy chúng tôi có thể dọn dẹp mã HTML của chúng tôi một chút:

$rdate1 = 1240550032; // Fri, 24 Apr 2009 05:13:52 GMT 
$expiredate = date('d m Y G:i:s', $rdate1); 
$time = $rdate1 - time(); 
$days = floor($time/86400); 
$hours = floor(($time-($days*86400))/3600); 
$mins = floor(($time-($days*86400)-($hours*3600))/60); 
$secs = floor($time-($days*86400)-($hours*3600)-($mins*60)); 

printf(" 
    Your account is going to expire in 
    <span class='datetime' id='days'>%s</span> Days 
    <span class='datetime' id='hours'>%s</span> Hours 
    <span class='datetime' id='minutes'>%s</span> Minutes 
    <span class='datetime' id='seconds'>%s</span> Seconds 
", $days, $hours, $mins, $secs); 

Tôi không hoàn toàn chắc chắn nơi bước trung gian mà bạn đang thực hiện đến từ đó, nhưng đoạn mã trên cho tôi sự khác biệt về thời gian giữa $rdate1 (có lẽ là dấu thời gian unix) và time().

Cuối cùng, chúng ta có thể làm điều gì đó như thế này với Javascript để cập nhật thời gian khi tải trang:

addEvent(window, 'load', function() { 
    var eDays = document.getElementById('days'); 
    var eHours = document.getElementById('hours'); 
    var eMinutes = document.getElementById('minutes'); 
    var eSeconds = document.getElementById('seconds'); 
    var timer; 
    timer = setInterval(function() { 
     var vDays = parseInt(eDays.innerHTML, 10); 
     var vHours = parseInt(eHours.innerHTML, 10); 
     var vMinutes = parseInt(eMinutes.innerHTML, 10); 
     var vSeconds = parseInt(eSeconds.innerHTML, 10); 

     vSeconds--; 
     if(vSeconds < 0) { 
      vSeconds = 59; 
      vMinutes--; 
      if(vMinutes < 0) { 
       vMinutes = 59; 
       vHours--; 
       if(vHours < 0) { 
        vHours = 23; 
        vDays--; 
       } 
      } 
     } else { 
      if(vSeconds == 0 && 
       vMinutes == 0 && 
       vHours == 0 && 
       vDays == 0) { 
       clearInterval(timer); 
      } 
     } 
     eSeconds.innerHTML = vSeconds; 
     eMinutes.innerHTML = vMinutes; 
     eHours.innerHTML = vHours; 
     eDays.innerHTML = vDays; 
    }, 1000); 
}); 


function addEvent(obj, type, fn) { 
    if (obj.attachEvent) { 
    obj['e'+type+fn] = fn; 
    obj[type+fn] = function(){obj['e'+type+fn](window.event);} 
    obj.attachEvent('on'+type, obj[type+fn]); 
    } else 
    obj.addEventListener(type, fn, false); 
} 

Answer 2

PHP, vì nó là server-side, không thể phát trực tiếp. Bạn sẽ phải thực hiện thao tác ngày (ít nhất, những thứ thay đổi) và cập nhật DOM bằng JavaScript, là client-side.

Steve

Answer 3

Có thể thực hiện được trên máy khách với một chút JavaScript. Mà không sử dụng một khuôn khổ như jQuery, đó sẽ là sự giúp đỡ biên ở đây, các phương pháp cơ bản sẽ là một cái gì đó tương tự như sau:

• Thiết lập một event handler để kích hoạt từng giây

Trong xử lý sự kiện:

• Lấy ngày giờ hiện tại và định dạng nó như mong muốn
• cập nhật các nội dung của nguyên tố khác với giá trị mới

Là một ví dụ cụ thể, chức năng sau đây sẽ thiết lập một bản cập nhật ngày đơn giản/thời gian với một yếu tố được đặt tên:

function clock(id) { 
    var target = document.getElementById(id); 
    if(target) { 
     var callback = function() { 
      var datetime = new Date().toLocaleString(); 
      target.innerHTML = datetime; 
     }; 
    callback(); 
     window.setInterval(callback, 1000); 
    } 
} 

Lưu ý việc sử dụng new Date().toLocaleString() để lấy và định dạng ngày hiện tại/lần; Ngoài ra, việc sử dụng window.setInterval() để thiết lập gọi lại để kích hoạt từng giây.

Answer 4

JS-Clock sự là giải pháp tốt nhất cho đồng hồ sống. đó là phiên bản mini JS chỉ có 4 KB. Tôi đề nghị điều này.