Click here to Skip to main content
13,704,501 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
I have a table with a list of 5 people straight from my database. The table has been echoed out using php using a(MySQLiselectData)method. I would like to set the date im counting down too as the graduation date. How do i take that graduation date from each row of the table and put it in my javascript so as to create my count downclock?

What I have tried:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "graduation";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "SELECT id, name, date, status FROM student";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    echo "<table><tr><th>ID</th><th>Name</th><th>Date of Graduation</th><th>Count-Down-Clock</th></tr>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr><td>".$row["id"]."</td><td>".$row["name"]."</td><td>".$row["date"]."</td><th><p class='demo'></p></th></tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}
$conn->close();
?>


Above is my mysqli fetch code

<script>



// Set the date we're counting down to
var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the dif between now an the count down date
    var dif = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var d = Math.floor(dif / (1000 * 60 * 60 * 24));
    var h = Math.floor((dif % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var m = Math.floor((dif % (1000 * 60 * 60)) / (1000 * 60));
    var s = Math.floor((dif % (1000 * 60)) / 1000);
    
    var formatted = d + "d " + h + "h " + m + "m " + s + "s ";
	// Output the result in an element with id="demo"
    [...document.querySelectorAll(".demo")].forEach(el => el.innerHTML = dif < 0 ? "Expired" : formatted);
	

	
    
    // If the count down is over, write some text 
    if (dif < 0) {
        clearInterval(x);
        
    }
}, 1000);
</script>


Above is my javascript code which sends a count down clock to



My question is How do i take that graduation date from each row of the table and put it in my javascript so as to create my count downclock?
Posted 24-Dec-17 8:43am
Updated 28-Dec-17 9:20am
Comments
Nakhia_ind 26-Dec-17 7:47am
   
sir the bellow code may work
var date1 = new Date('7/11/2010');
var date2 = new Date('12/12/2010');
var diffDays = date2.getDate() - date1.getDate();
alert(diffDays)

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

You'll need to get the difference in time between then and now and then use setTimeout() function to keep showing the countdown.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web06-2016 | 2.8.180920.1 | Last Updated 28 Dec 2017
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100