在PHP、JavaScript和MySQL中创建动态倒计时

简介

对于即将发生的事件，最有用的模块之一是倒计时器。使用JavaScript、PHP和MySQL数据库，你可以制作一个倒数计时器。倒计时器允许你在网页上显示一个即将发生的事件的时间。你可以显示该事件何时开始，何时结束。

你也可以用JavaScript制作一个倒计时器，但如果你刷新标签，该计时器就会重置。你可以通过使用PHP使计数器的计时器无限期地运行。如果你刷新页面，计时器会继续运行。

本教程将带领你完成建立一个动态倒计时的过程。

前提条件

以下是帮助你学习JavaScript、PHP和MySQL中的动态倒计时的关键基本方面。

• PHP中的面向对象编程（OOP）。
• 基本的JavaScript介绍和一般的网络。
• 结构化查询语言（SQL）和使用MySQL数据库的能力。
• PHP数据对象（PDO）应用编程接口（API）。
• 集成开发环境，强烈推荐PhpStorm。

PHP动态倒数计时器

你可以利用JavaScript制作一个静态时钟。为了实现一个动态的时间倒计时，我们将同时使用PHP和数据库。

PHP的更新活动可以协助刷新MySQL的数据集。用户可以根据需要刷新时间。

首先，我们为倒计时器创建一个MySQL数据集表。该信息基表将包含日期、小时、分钟、秒，如下所示。

创建倒计时数据库表

在一个MySQL数据库服务器上有几个数据库（或模式）。一个或多个表组成了每个数据库。列（也叫字段）和行组成了一个表（记录）。

SQL关键字和命令的大小写并不重要。它们用大写字母来强调。

要创建一个表，在控制台运行以下命令。你也可以把它们添加到你的SQL文件中，并把它们导入你的MySQL数据库。

create table timer_tbl(

 `timer_id`INT(11) NOT NULL,

 `date` DATE NOT NULL,

 `hour` INT(50) NOT NULL,

 `minutes` INT(50) NOT NULL,

 `seconds` INT(50) NOT NULL

);

现在我们已经准备好了一个定时器模型，下一步涉及连接到我们的MySQL数据库。

连接到数据库

按照惯例，PHP包括三个MySQL API。MySQL、MySQLi和默认的PDO。

在你的服务器中创建一个db_credentials.php 文件，并添加MySQL凭证，如下图所示。

/**

* @author Miller Juma

*/

$server_name = 'localhost';//replace with your host

$db_name = 'countdown'; //replace with your db name

$db_username = 'MyDBUsername';//replace with your username

$db_password = 'MyDBPassword';//replace with your password

define("SERVER_NAME",$server_name);

define("DB_NAME",$db_name);

define("DB_USERNAME",$db_username);

define("DB_PASSWORD",$db_password);

接下来，创建一个db_configuration.class.php 文件并添加如下内容。

<?php

require_once "db_credentials.php";

class DB_Configuration

{

 public function db_connect()

 {

 try

 {

 $host = SERVER_NAME;

 $db_name= DB_NAME;

 $connection= new PDO("mysql:host=$host;dbname=$db_name",DB_USERNAME,DB_PASSWORD);

 $connection->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

 //echo "connection established";

 return $connection;

 }

 catch(PDOException $e)

 {

 return $e->getMessage();

 }

 }

}

//$db=new DB_Configuration();

//$db->db_connect();

在上面的PHP文件中，我们建立了一个与数据库的连接。你可能还注意到，我们已经导入了db_credentials.php 文件。这个文件为我们提供了我们在PDO实例中使用的常量。

现在，与数据库的连接已经建立，让我们创建一个方法来插入timer_tbl 表。

创建一个名为query.class.php 的新文件并添加以下内容。

<?php

/**

* @author Miller Juma

*/

require_once "./db_configuration.class.php";

class Query

{

 public function get_timer()

 {

 try

 {

 $query="

 SELECT 

 date,

 hour,

 minutes,

 seconds 

 FROM

 timer_tbl";

 /**

 * create db_connection instance

 */

 $db= new DB_Configuration();

 $conn= $db->db_connect();

 /**

 * prepare the statement

 */

 $stmt=$conn->prepare($query);

 /**

 * execute the query

 */

 $stmt->execute();

 $timers=$stmt->rowCount();

 /**

 * use the if statement

 * to confirm if the row==1 or not

 * NOTE: timer_id is unique

 */

 if($timers==1)

 {

 /**

 * assign the details to

 * @var $row

 */

 $row=$stmt->fetch(PDO::FETCH_ASSOC);

 /**

 * assign each 

 * property a value

 * @var $result

 */

 $result=[

 "date" =>$row['date'],

 "hr" =>$row['hour'],

 "min" =>$row['minutes'],

 "sec" =>$row['seconds'],

 ];

 }

 http_response_code(200);

 return json_encode($result);

 }

 catch (Exception $e)

 {

 return $e->getMessage();

 }

 }

 public function update_timer(array $data)

 {

 $date =$data['date'];

 $hour =$data['hour'];

 $minutes=$data['minutes'];

 $seconds=$data['seconds'];

 $timer_id=1;

 //update timer

 $query=

 "

 UPDATE 

 timer_tbl

 SET 

 date ='$date',

 hour ='$hour',

 minutes ='$minutes',

 seconds ='$seconds'

 WHERE

 timer_id='$timer_id'

 ";

 //connect to the database and save user

 $db=new DB_Configuration();

 $connection=$db->db_connect();

 $statement=$connection->prepare($query);

 $statement->execute();

 }

 public function insert_timer(array $data)

 {

 try

 {

 $sql=

 "

 INSERT

 INTO

 timer_tbl(

 date,

 hour,

 minutes,

 seconds, 

 )

 VALUES(

 :date,

 :hr,

 :min,

 :sec, 

 )

 ";

 $db= new DB_Configuration();

 $connection= $db->db_connect();

 $statement=$connection->prepare($sql);

 $statement->bindParam(":date",$data['date']);

 $statement->bindParam(":hr",$data['hr']);

 $statement->bindParam(":min",$data['min']);

 $statement->bindParam(":sec",$data['sec']);

 if($statement->execute())

 {

 return json_encode(['data'=>'success']);

 }

 else

 {

 return json_encode(['data'=>'fail']);

 }

 }

 catch (Exception $e)

 {

 return $e->getMessage();

 }

 }

}

这是我们要用来访问数据库中的数据的文件。我们将用它来添加、更新和创建计时器的细节。接下来，让我们创建一个文件，timer.class.php （创建定时器详细信息），并添加以下内容。

 <?php

/**

* @author Miller Juma

*/

require_once "./query.class.php";

class Timer

{

 public static function create()

 {

 try

 {

 //get API data from postman

 $data=json_decode(file_get_contents("php://input"),JSON_OBJECT_AS_ARRAY);

 $query=new Query();

 //call this method to add data

 $success=$query->insert_timer($data);

 if($success)

 {

 return json_encode([

 "data" =>"You have successfully added timer dates"

 ]);

 }

 else

 {

 return json_encode([

 "data" =>"Failed to add timer"

 ]);

 }

 }

 catch (Exception $exception)

 {

 return json_encode([

 "data" =>[

 "errorCode" =>$exception->getCode(),

 "errorMsg" =>$exception->getMessage()

 ]

 ]);

 }

 }

}

Timer::create();

这个文件有一个方法create() ，声明为静态。将类的方法声明为静态，可以在没有类实例化的情况下访问它们。

这个方法从一个API获取数据，在这个例子中，Postman是JSON格式的。然后，这些数据被转换为对象数组，以便进行操作。

如果你已经做到了这一点？

恭喜你，现在让我们测试一下我们的代码是否有效。

如下面的截图所示，打开你的Postman应用程序并添加请求。

图1：Postman请求

点击发送按钮，在timer_tbl 表中添加定时器的详细信息。

从数据库中获取定时器的详细信息

注意：如果你的数据库中有定时器的详细信息，建议继续进行这一部分。

现在，从上一部分开始，我们创建了一个文件query.class.php ，并定义了一个方法，get_timer() 。

我们将使用这个方法从我们的数据库中查询定时器的详细信息，如下所示。

创建一个新的文件get_timer_details.class.php ，并添加以下内容。

 <?php

/**

* @author Miller Juma

* query timer

*/

require_once "./query.class.php";

class TimerQuery

{

 public static function get()

 {

 try

 {

 //get_timer() method returns query result as json

 $query=new Query();

 $timerQueryDetails=$query-> get_timer();

 //test your result

 var_dump($timerQueryDetails)

 }

 catch (Exception $exception)

 {

 return json_encode([

 "data" =>[

 "errorCode" =>$exception->getCode(),

 "errorMsg" =>$exception->getMessage()

 ]

 ]);

 }

 }

}

TimerQuery::get();

在你的Postman或首选浏览器中运行这个脚本，测试它是否返回结果。

调试你的脚本的最好方法是通过登录来检查是否有错误。在这种情况下，数据库连接可能会导致错误，一定要使用正确的配置。

在这个阶段，我们的数据库中已经有了定时器的权限，现在让我们来创建一个倒计时。

使用JavaScript和PHP创建一个倒计时

不管我们从上一节中获取的数据是什么，我们都要在这里使用它。

创建一个JavaScript脚本，timer.js ，并添加以下代码。

<script>

//task: get timer details from the previous section and assign them to variables. 
//tip, these are associative arrays accessed as $myArray['data'] 

const countDownDate = <?php 

 echo strtotime("$date $hour:$minutes:$seconds" ) ?> * 1000;

const timeNow = <?php print(time()) ?> * 1000;

// Every second, the countdown will be updated.

let i = setInterval(function() {

timeNow = timeNow + 1000;

// Calculate the time between now and the end of the countdown.  

let dist = countDownDate - timeNow;

// Calculate the number of days, hours, minutes, and seconds in days, hours, minutes, and seconds.

let numOfDays = Math.floor(dist / (1000 * 60 * 60 * 24));

let hr = Math.floor((dist % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

let min = Math.floor((dist % (1000 * 60 * 60)) / (1000 * 60));

let sec = Math.floor((dist % (1000 * 60)) / 1000);

// Put the result in an element with the id="timer" attribute.  

document.getElementById("timer").innerHTML = numOfDays + "d " + hr + "h " +

min + "m " + sec + "s ";

// When the countdown is over, type some text. 

if (dist < 0) {

clearInterval(i);

document.getElementById("timer").innerHTML = "TIMER EXPIRED";

}

}, 1000);

</script>

现在我们已经有了一个可以工作的静态倒计时脚本，现在让我们把它变成动态的。

通过数据库更新创建动态倒计时

在本节中，我们将通过更新数据库记录来设置新的时间，从而建立一个动态倒计时。为了更新数据库，在timer.html ，用POST请求动作创建一个HTML表单。

添加输入字段，如下图所示。

<!DOCTYPE html>

<html>

 <head><title> Countdown</title></head>

 <body>
 <div id="timer">
   
 </div>

 <div>

 <form method="POST" action="update.php">

 <div class="form-group">

 <label>Date</label>

 <input type="date" name="date" value="<?php echo $date;?>">

 </div>

 <div class="form-group">

 <label>Hour</label>

 <input type="number" name="h" value="<?php echo $h;?>">

 </div>

 <div class="form-group">

 <label>Minutes</label>

 <input type="number" name="m" value="<?php echo $m;?>">

 </div>

 <div class="form-group">

 <label>Seconds</label>

 <input type="number" name="s" value="<?php echo $s;?>">

 </div>

 <button type="submit" name="update">Update Timer</button>

 </form>

 </div>

 </body>

</html>

在上面的表单中，动作被设置为update.php 脚本，让我们继续并创建这个文件来更新这些细节。复制这个文件并把下面的片段粘贴到里面。

<?php

/**

* @author Miller Juma

* query timer

*/

require_once "./query.class.php";

class UpdateTimer

{

 public static function timer_update()

 {

 try

 {

 //call the update_timer() method from Query class

 // pass this method the timer data to update

 //get the post request from the HTML form above

 $date = $_POST['date'];

 $hour = $_POST['hour'];

 $min = $_POST['minutes'];

 $sec = $_POST['seconds'];

 //an array of the timer to update

 $data = [

 "date" =>$date,

 "hour" =>$hour,

 "min" =>$min,

 "sec" =>$sec,

 ];

 //pass this array to method update_timer();

 //start by creating an instance of Query class

 $query=new Query();

 $timerQueryUpdateDetails=$query->update_timer();

 if($timerQueryUpdateDetails)

 {

 echo "updated timer successful, a new event countdown will start immediately";

 }

 else

 {

 echo "Timer update failed, try again";

 }

 }

 catch(Exception $exception)

 {

 echo $exception->getMessage();

 }

 }

}

UpdateTimer::timer_update();

访问你的URL来更新定时器，你应该能看到类似这样的东西，这取决于你的风格设计。

现在，设置你喜欢的倒计时日期并刷新页面。

你会注意到，倒计时是从设定的时间开始的。

总结

我们已经看到，JavaScript可以创建一个静态的倒计时。通过PHP和数据库，我们可以使这个动作变得动态。然后，用户可以继续设置他们的倒计时日期。