Display Clock inside the HTML page or Div

Question

I am Working on a project in which I am trying to display a clock inside container so that the clock becomes responsive. I was hoping if someone can guide me on how to go about it.

Below is the HTML page where I am trying to display the same.

<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <title> UA </title>
        <meta name="description" content="EVERYTHING FINE">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

        <style>
        .grey{
                background-color: #ccc;
                padding: 20px;

        }
        </style>

    </head>

    <body>

        <header>
            <div class="jumbotron">
                <div class="container">
                    <script>
                   ............
                  </script>
                </div> 
            </div> 
        </header>

            <div class="grey">
                <div class="container">
                    <div class="well">R&D</div>
                </div>
            </div>



        <footer>
            <div class="container">
                <hr>

                <p>
                    <small><a href="http://hazratferozmemon.org/#/">Jump To TrueTasawwuf</a> TRUE TASAWWUF</small></p>
                <!--<p> <small><a href="http://twitter.com/wiredwiki">Ask whatever </a> On Twitter</small></p>-->
                <!--<p> <small><a href="http://youtube.com/wiredwiki">Subscribe me</a> On Youtube</small>-->

                </p>
            </div> <!-- end container -->
        </footer>

        <!-- Latest compiled and minified JavaScript -->
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </body> 
    </html>

If you want to insert time inside a div http://stackoverflow.com/questions/18229022/how-to-show-current-time-in-javascript-in-the-format-hhmmss — Rajashekhar, Dec 04 '16 at 13:32

score 0 · Answer 1 · answered Dec 04 '16 at 13:32

Something like this should work for you.

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>

<body onload="startTime()">

<div id="txt"></div>

</body>
</html>

Note: You don't need to insert a script or something for this purpose.

i'hv checked this code. but i want to make a responsive clock. thanks — Syed Zeyad Zeyad, Dec 06 '16 at 14:58

score 0 · Answer 2 · answered Dec 04 '16 at 14:44

You could build a clock using the jquery you imported
make sure you put the script after your jquery script tags

<script type="text/javascript">
$(document).ready(function(){
    var timer = setInterval(clock, 1)
    function clock(){
        $(".demo").html(Date());

    }

});
</script>
<body>
<p class="demo"></p>
</body>

Display Clock inside the HTML page or Div

2 Answers2

Linked