Display Running Time in JavaScript

January 2, 2021
JavaScript
display time in javascript

Tutorial: Display Running Time in JavaScript with Free Source Code

This tutorial will show you how to display a running time using PHP and Javascript. This tutorial does not include a good design but will give you knowledge on how to create a simple running time.

Creating a Time Script

This script creates our running time. In this script, we have also included a small PHP code to show our running time. So, for us to confirm the time in our desired page, we need to add the script. To create the text, open your HTML code editor and paste the code below after the tag. We name this script as “time.php”.

<span id=tick2>			
<script>
    function show2(){
        if (!document.all&&!document.getElementById)
        return
        thelement=document.getElementById? document.getElementById("tick2"): document.all.tick2
        var Digital=new Date()
        var hours=Digital.getHours()
        var minutes=Digital.getMinutes()
        var seconds=Digital.getSeconds()
        var dn="PM"
        if (hours<12)
        dn="AM"
        if (hours>12)
        hours=hours-12
        if (hours==0)
        hours=12
        if (minutes<=9)
        minutes="0"+minutes
        if (seconds<=9)
        seconds="0"+seconds
        var ctime=hours+":"+minutes+":"+seconds+" "+dn
        thelement.innerHTML=ctime
        setTimeout("show2()",1000)
        }
        window.onload=show2
                //-->
</script>
</span>
 
    <?php
        $date = new DateTime();
        echo $date->format('l -- F j, Y');
    ?>

Creating a Show Page

Lastly, we create a page where we want to show our time. To create the page, open your HTML code editor and paste the code below after the tag. We name this page as “index.php”.

<!DOCTYPE HTML>
<html>
<head>
<title>Simple Running Time using PHP</title>
</head>
<body>
    <?php include ('time.php'); ?>
</body>
</html>
display time in javascript

display time in javascript

Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *