如何制作 jquery css php 进度条（倒计时）？答案

【问题标题】：how to make a jquery css php progress-bar ( countdown )?如何制作 jquery css php 进度条（倒计时）？
【发布时间】：2014-09-12 15:45:24
【问题描述】：

如何制作一个 jquery css php 进度条，当窗口为焦点并在计数后运行 php 脚本时倒计时 15 秒？

这是一个有用的脚本，我使用谷歌找到它：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html lang="en">
    <head>
        <title>Progress Bar</title>
    </head>
    <body>
    <!-- Progress bar holder -->
    <div id="progress" style="width:500px;border:1px solid #ccc;"></div>
    <!-- Progress information -->
    <div id="information" style="width"></div>
    <?php
    // Total processes
    $total = 10;
    // Loop through process
    for($i=1; $i<=$total; $i++){
        // Calculate the percentation
        $percent = intval($i/$total * 100)."%";

        // Javascript for updating the progress bar and information
        echo '<script language="javascript">
        document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#ddd;\">&nbsp;</div>";
        document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
        </script>';


    // This is for the buffer achieve the minimum size in order to flush data
        echo str_repeat(' ',1024*64);


    // Send output to browser immediately
        flush();


    // Sleep one second so we can see the delay
        sleep(1);
    }
    // Tell user that the process is completed
    echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';
    ?>
    </body>

【问题讨论】：

标签： php jquery css focus progress-bar

【解决方案1】：

以下代码将在 15 秒后向名为 script.php 的 php 脚本发出 ajax 请求：

$(document).ready(function() {
   var progress = $('#progress');
   var counter = 15;
   var timer = 0;

   $(window).on('focus', function() {
      // start the countdown when the window receives focus
      timer = setInterval(function() {
        $(progress).html(counter);
        // check if 15 seconds has passed
        if(--counter == 0) {
           // clear the interval and tell the user we're finished
           clearInterval(timer);
           timer = 0;
           $(progress).html('Process complete');
           // make an ajax call to a php script 
           $.ajax({
             url:'script.php',
             type:'post',
             success:function(e) {
               // handle any response                
             }
           });
        }
    }, 1000);
  });

  // clear the interval and reset the counter when the window looses focus
  $(window).on('blur', function() {
     counter = 15;
     if(timer) {
       clearInterval(timer);
       timer = 0; 
     }
     $(progress).html('');
  });
});

【讨论】：