如何在我的用户页面上添加倒数计时器

Please Help! I have a user page setup and properly linked to my database. What i want to do is to add a countdown timer of 3 hours for users who have not activated their account. I want that timer to be unique to individual users which will start counting once they register their account and when they login the countdown will be displayed on the page. Please, can anyone help me with a simple code to implement this? Thanks a lot.

PS: I am a dummy in code writing, so I use Dreamweaver to help me with code generation.

Here's my page code:

<?php require_once('Connections/TurboFund.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "Received1")) {
  $updateSQL = sprintf("UPDATE users SET AcceptedFrom1=%s WHERE UserID=%s",
                       GetSQLValueString($_POST['Received2'], "text"),
                       GetSQLValueString($_POST['UserIDHiddenField1'], "int"));

  mysql_select_db($database_TurboFund, $TurboFund);
  $Result1 = mysql_query($updateSQL, $TurboFund) or die(mysql_error());

  $updateGoTo = "dashboardactivated.php";
  if (isset($_SERVER['QUERY_STRING'])) {
    $updateGoTo .= (strpos($updateGoTo, '?')) ? "&" : "?";
    $updateGoTo .= $_SERVER['QUERY_STRING'];
  }
  header(sprintf("Location: %s", $updateGoTo));
}

if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "Received1")) {
  $updateSQL = sprintf("UPDATE users SET AcceptedFrom1=%s WHERE UserID=%s",
                       GetSQLValueString($_POST['Purge'], "text"),
                       GetSQLValueString($_POST['UserIDHiddenField2'], "int"));

  mysql_select_db($database_TurboFund, $TurboFund);
  $Result1 = mysql_query($updateSQL, $TurboFund) or die(mysql_error());

  $updateGoTo = "dashboardactivated.php";
  if (isset($_SERVER['QUERY_STRING'])) {
    $updateGoTo .= (strpos($updateGoTo, '?')) ? "&" : "?";
    $updateGoTo .= $_SERVER['QUERY_STRING'];
  }
  header(sprintf("Location: %s", $updateGoTo));
}

$colname_User = "-1";
if (isset($_SESSION['MM_Username'])) {
  $colname_User = $_SESSION['MM_Username'];
}
mysql_select_db($database_TurboFund, $TurboFund);
$query_User = sprintf("SELECT * FROM users WHERE Username = %s", GetSQLValueString($colname_User, "text"));
$User = mysql_query($query_User, $TurboFund) or die(mysql_error());
$row_User = mysql_fetch_assoc($User);
$totalRows_User = mysql_num_rows($User);
?>
<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><!-- Created by Artisteer v4.3.0.60745 -->
    <meta charset="utf-8">
    <title>Contacts</title>
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

    <!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link rel="stylesheet" href="style.css" media="screen">
    <!--[if lte IE 7]><link rel="stylesheet" href="style.ie7.css" media="screen" /><![endif]-->
    <link rel="stylesheet" href="style.responsive.css" media="all">

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
    <script src="script.responsive.js"></script>
<meta name="description" content="Description">
<meta name="keywords" content="Keywords">


<style>.art-content .art-postcontent-0 .layout-item-0 { color: #232324; background: ;  }
.art-content .art-postcontent-0 .layout-item-1 {  border-collapse: separate;  }
.art-content .art-postcontent-0 .layout-item-2 { border-style:Solid;border-width:2px;border-color:#7C7C7E; color: #CBCBCD; background: #08BFBC; padding: 0px;  }
.art-content .art-postcontent-0 .layout-item-3 { border-style:Solid;border-width:3px;border-color:#444446; padding: 0px;  }
.art-content .art-postcontent-0 .layout-item-4 { border-bottom-style:Solid;border-left-style:Solid;border-bottom-width:2px;border-left-width:2px;border-bottom-color:#B4B4B6;border-left-color:#B4B4B6; color: #565658; background: #ECECEA;  }
.art-content .art-postcontent-0 .layout-item-5 { border-top-style:Solid;border-right-style:Solid;border-bottom-style:Solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-top-color:#B4B4B6;border-right-color:#B4B4B6;border-bottom-color:#B4B4B6; color: #565658; background: #ECECEA;  }
.art-content .art-postcontent-0 .layout-item-6 { color: #777779; background: ;  }
.art-content .art-postcontent-0 .layout-item-7 { margin-top: 0px;margin-bottom: 0px;  }
.art-content .art-postcontent-0 .layout-item-8 { border-style:Groove;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:#B4B4B6;border-right-color:#B4B4B6;border-bottom-color:#B4B4B6;border-left-color:#B4B4B6;  border-collapse: separate;  }
.art-content .art-postcontent-0 .layout-item-9 { border-style:Solid;border-width:2px;border-color:#7C7C7E; color: #FFFFFF; background: #08BFBC; padding: 0px;  }
.art-content .art-postcontent-0 .layout-item-10 { border-style:Groove;border-width:2px;border-color:#444446; color: #777779; background: ; padding: 0px;  }
.art-content .art-postcontent-0 .layout-item-11 { border-right-style:Solid;border-bottom-style:Solid;border-left-style:Solid;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-right-color:#B4B4B6;border-bottom-color:#B4B4B6;border-left-color:#B4B4B6; color: #565658; background: #E5E5E6;  }
.art-content .art-postcontent-0 .layout-item-12 { border-style:Solid;border-width:2px;border-color:#7C7C7E; color: #FFFFFF; background: #08BFBC;  }
.art-content .art-postcontent-0 .layout-item-13 { border-style:Solid;border-width:3px;border-color:#444446; color: #777779; background: ;  }
.art-content .art-postcontent-0 .layout-item-14 { border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-right-color:#B4B4B6;border-bottom-color:#B4B4B6;border-left-color:#B4B4B6; color: #565658; background: #E5E5E6;  }
.ie7 .art-post .art-layout-cell {border:none !important; padding:0 !important; }
.ie6 .art-post .art-layout-cell {border:none !important; padding:0 !important; }

</style>
</head>
<body>
<div id="art-main">
<header class="art-header">

    <div class="art-shapes">
        <div class="art-object1332516260"></div>
<div class="art-object7306249"></div>
<div class="art-object1873331263"></div>

            </div>

<h1 class="art-headline">
    <a href="/">Let's Build your financial life together</a>
</h1>
<h2 class="art-slogan">Leadership is influence.</h2>





<nav class="art-nav">
    <ul class="art-hmenu"><li><a href="home.php" class="">Home</a></li><li><a href="log-in.php" class="">Log In</a></li><li><a href="sign-up.php" class="">Sign Up</a></li><li><a href="services.php" class="">Services</a></li><li><a href="how-it-works.php" class="">How It Works</a></li><li><a href="contact-us.php" class="">Contact Us</a></li></ul> 
    </nav>


</header>
<div class="art-sheet clearfix">
            <div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content"><article class="art-post art-article">


                <div class="art-postcontent art-postcontent-0 clearfix"><div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%" >
        <p><br></p>
        <p><span style="color: rgb(66, 66, 67); font-size: 22px; font-family: Georgia;"><span style="color: rgb(106, 106, 108);">Welcome!,</span></span> <?php echo $row_User['Username']; ?>.</p>
    </div>
    </div>
</div>
<div class="art-content-layout layout-item-1">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-2" style="width: 50%" >
        <p style="text-align: center;"><span style="color: rgb(255, 255, 255); font-size: 16px;">Dashboard</span></p>
    </div><div class="art-layout-cell layout-item-3" style="width: 50%" >
        <p style="text-align: center; padding-left: 80px;"><span style="color: rgb(66, 66, 67); font-size: 16px;">Account Information &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color: rgb(66, 66, 67); font-size: 20px;">&nbsp;<a href="" class="art-button">Log Out</a>&nbsp;</span><br></p>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-4" style="width: 50%" >
        <p style="text-align: center;"><img width="283" height="283" alt="" class="art-lightbox" src="images/generic_avatar_300-2.gif" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; "></p>
    </div><div class="art-layout-cell layout-item-5" style="width: 50%" >
        <p><span style="color: rgb(5, 111, 143); font-family: Tahoma; font-size: 14px;">Name:</span> <?php echo $row_User['Fname']; ?></p>
        <p><span style="color: rgb(5, 111, 143); font-family: Tahoma; font-size: 14px;"><br></span></p>
        <p><span style="color: rgb(5, 111, 143); font-family: Tahoma; font-size: 14px;">Email:</span> <?php echo $row_User['Email']; ?></p>
        <p><span style="color: rgb(5, 111, 143); font-family: Tahoma; font-size: 14px;"><br></span></p>
        <p><span style="color: rgb(5, 111, 143); font-family: Tahoma; font-size: 14px;">Phone Number:</span> <?php echo $row_User['PhoneNumber']; ?></p>
        <p><span style="color: rgb(5, 111, 143); font-family: Tahoma; font-size: 14px;"><br></span></p>
        <p><span style="color: rgb(5, 111, 143); font-family: Tahoma; font-size: 14px;">Bank Account Details:</span> <?php echo $row_User['BankAccDetails']; ?></p>
        <p><span style="color: rgb(5, 111, 143); font-size: 18px;"><br></span></p><p>&nbsp;<a href="" class="art-button">Edit Account Info</a>&nbsp;</p>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-6" style="width: 100%" >
        <p><br></p><p><br></p>
    </div>
    </div>
</div>
<div class="art-content-layout-wrapper layout-item-7">
<div class="art-content-layout layout-item-8">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-9" style="width: 50%" >
        <p style="text-align: center;"><span style="font-size: 16px; text-align: center;">Donation</span><br></p>
    </div><div class="art-layout-cell layout-item-10" style="width: 50%" >
        <p style="text-align: left;"><span style="font-size: 14px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color: #75D43A;">ACCOUNT HAS BEEN CONFIRMED</span></span></p>
    </div>
    </div>
</div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-11" style="width: 100%" >
        <p style="text-align: center;"><br></p><p style="text-align: left;"></p><p style="padding-left: 20px;"><span style="font-size: 14px;">PACKAGE:&nbsp;</span><?php echo $row_User['Donation']; ?>: <?php echo $row_User['StatusDonation']; ?></p>
        <p></p><p style="text-align: center;"><br></p>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-6" style="width: 100%" >
        <p><span style="color: rgb(48, 48, 49);"><br></span></p><p><br></p>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-12" style="width: 50%" >
        <p style="text-align: center;"><span style="font-size: 16px;">Earnings</span><br></p>
    </div><div class="art-layout-cell layout-item-13" style="width: 50%" >
        <p style="text-align: center;"><span style="color: #25D402;">ACCOUNT IS ACTIVE</span></p>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-14" style="width: 100%" >
        <p style="padding-left: 20px; text-align: center;"><br></p><p style="padding-left: 20px; text-align: left;"></p><ul>
          <li><span style="font-size: 14px;">Receive Donation From:</span> <?php echo $row_User['ReceiveFrom']; ?>: <?php echo $row_User['AcceptedFrom1']; ?></li>
        </ul>
        <form action="" method="post" name="Status1" id="Status1" onsubmit="return confirm('Are you sure you want to submit?');">
          <input name="Confirm" type="checkbox" id="Confirm" value="Confirmed" checked="CHECKED" style="display:none;">
          <label for="Confirm"></label>
          <input name="UpdateButton" type="submit" class="art-button" id="UpdateButton" onclick="this.disabled = true" value="Confirm"/>
          <input name="Purge" type="checkbox" id="Purge" value="You Will Be Rematched Soon!" checked="CHECKED" style="display:none;">
             <label for="Purge"></label>
             <input name="UpdateButton2" type="submit" class="art-button" id="UpdateButton2" onclick="this.disabled = true" value="Purge"/>
        </form>
        <p><span style="color: rgb(56, 56, 57);"><br></span><span style="color: rgb(56, 56, 57);"><br>
        </span></p>
        <p></p><ul>
          <li><span style="font-size: 14px;">Receive Donation From</span>: <?php echo $row_User['ReceiveFrom2']; ?> : <?php echo $row_User['AcceptedFrom2']; ?></li>
        </ul>
        <form action="" method="post" name="Status1" id="Status2" onsubmit="return confirm('Are you sure you want to submit?');">
          <input name="Confirm2" type="checkbox" id="Confirm2" value="Confirmed" checked="CHECKED" style="display:none;">
          <label for="Confirm2"></label>
          <input name="UpdateButton3" type="submit" class="art-button" id="UpdateButton3" onclick="this.disabled = true" value="Confirm"/>
          <input name="Purge2" type="checkbox" id="Purge2" value="You Will Be Rematched Soon!" checked="CHECKED" style="display:none;">
          <label for="Purge2"></label>
          <input name="UpdateButton3" type="submit" class="art-button" id="UpdateButton4" onclick="this.disabled = true" value="Purge"/>
        </form>
        <p><span style="color: rgb(56, 56, 57);"><br></span></p><p></p><p></p><p><br></p>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-6" style="width: 100%" >
        <p><br></p>
    </div>
    </div>
</div>
</div>



</article></div>
                    </div>
                </div>
            </div>
    </div>
<footer class="art-footer">
  <div class="art-footer-inner">
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 50%">
        <div style="position:relative;display:inline-block;padding-left:50px;padding-right:50px"><p><span style="font-style: italic; font-weight: bold; font-size: 14px; color: rgb(255, 255, 255); text-shadow: rgb(23, 23, 23) 1px 0px 0px, rgb(23, 23, 23) -1px 0px 0px, rgb(23, 23, 23) 0px -1px 0px, rgb(23, 23, 23) 0px 1px 0px, rgba(0, 0, 0, 0.984375) 0px 0px 10px;">We Advice You Only Use Your Spare Cash!</span></p>

        <p><br>
        </p><br></div>
    </div><div class="art-layout-cell layout-item-0" style="width: 50%">
        <p><span style="font-weight: bold;">Contact Us: <span style="font-size: 15px;">turbofund2017@gmail.com</span></span></p>
    </div>
    </div>
</div>
<div class="art-content-layout">
    <div class="art-content-layout-row">
    <div class="art-layout-cell layout-item-0" style="width: 100%">
        <p>Copyright © 2011 TurboFund. All Rights Reserved.<br></p>
    </div>
    </div>
</div>

    <p class="art-page-footer">
        <span id="art-footnote-links">Designed by <a href="www.turbofund.org" target="_blank">TurboFund</a>.</span>
    </p>
  </div>
</footer>

</div>
</body></html>
<?php
mysql_free_result($User);
?>

You can store timestamp in a field of user table when registering new user. also you can use mysql insert trigger to do that automatically for you.

when user logged in, you can subtract registered timestamp from current timestam and show in user dashboard.

also you can use JavaScript to continues showing counting down timer in in user dashboard with interval or setTimeout.


Edited :

to set timestamp in you table you can simply Default value to your field, something like this:

ALTER TABLE `schema`.`users` 
CHANGE COLUMN `created` `created` DATETIME NOT NULL 
DEFAULT CURRENT_TIMESTAMP ON Insert CURRENT_TIMESTAMP ; 

Note: getting timestamp is a bit different in mysql and php.

when your try to login or when your Job fired, you can check time and delete user if time is more than 3 hours an user don't finish registration steps. something like below php code:

if($row["approved"]!=true)//check if user didn't finish registration steps
{
$timest = $row["created"];//you must getting $row info from user table   

$registerTime = strtotime($timest);

$curentTime = time();

if(($curentTime-$registerTime) > 10800) {     //(60*60*3) seconds
  //Delelet your user
}
}