Skip to main content

Clock Using Html & Js

CLOCK clock img
::

Code for this clock

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: black;
        width: 98vw;
        height: 95vh;
        border: 4px double cornflowerblue;
    }

    .heading {
        text-align: center;
        margin-top: 10px;
        font-size: 70px;
        color: crimson;
    }

    .heading img {
        height: 50px;
        width: 60px;
    }

    .time {
        text-align: center;
        color: crimson;
        font-size: 100px;
        padding-top: 70px;
    }

    .time span {
        color: azure;
    }

    #s {
        color: yellow;
    }
</style>

<body>
    <div class="heading"> CLOCK <img src="https://icons.
iconarchive.com/icons/flat-icons.com/flat/512/Clock-icon.png"
            alt="clock img">
    </div>
    <div class="time">
        <span id="h"></span>:<span id="m"></span>:<span id="s"></span>
    </div>

</body>
<script>
    function displayTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        document.getElementById('h').innerHTML = hours;
        document.getElementById('m').innerHTML = minutes;
        document.getElementById('s').innerHTML = seconds;

    }

    setInterval(displayTime, 1000);

</script>

</html>

Comments

Popular posts from this blog

Basic HTML Web Page Structure

  Basic HTML Web Page Structure in Hindi.   लेखक   RAVINDRA CHAUBEY HTML Document के Basic Structure की पूरी जानकारी. HTML Document या एक HTML Page का निर्माण HTML Elements और   HTML Tags   से होता है. HTML Page को आप   Webpage   के नाम से भी जानते है. एक अखबार ( Newspaper) या पत्रिका लेख ( Magazine Article) की बनावट के अनुरूप ही एक HTML Page का Structure होता है. एक सामान्य पत्रिका लेख में Headings ( शीर्षक) , Paragraphs, Sub-headings ( उपशीर्षक) आदि होते है. ठीक यही चीजे एक Basic HTML Document में भी होती है.  एक HTML Document में भी शीर्षक , Paragraphs तो होते ही है. इनके अलावा भी कई और चीजे एक HTML Page में होती है. जिनके बारे में नीचे बताया जा रहा है. Table of Content HTML Page Structure  The Doctype Element

HEADING TAG IN HTML

HEADING TAG HTML headings are used to create a hierarchical structure for the content on a webpage. They range from level 1 (the most important) to level 6 (the least important). The most commonly used heading tags are H1, H2, and H3. The H1 heading is typically used for the main title of the webpage, while H2 and H3 headings are used for subheadings and sub-subheadings, respectively. To create a heading in HTML, you can use the following syntax: <h1>This is a level 1 heading</h1> <h2>This is a level 2 heading</h2> <h3>This is a level 3 heading</h3> <h4>This is a level 4 heading</h4> <h5>This is a level 5 heading</h5> <h6>This is a level 6heading</h6> source code for heading tag: <!DOCTYPE html > <html lang= "en" > <head>     <meta charset= "UTF-8" >     <meta http-equiv= "X-UA-Compatible" content= "IE=edge" >     <meta name= "v...

HTML Element

HTML Element HTMl Element क्या है – What is an HTML Element? यह प्रश्न हमेशा ही Confuse करता है. खासततौर पर नये-नये Programmers तो HTML Elements के बारे में Confused ही रहते है. इसी Confusion को दूर करने के लिये हमने यह Lesson तैयार किया है. इस Lesson में हम आपको HTML Element क्या है? HTML Element और HTML Tag में अंतर क्या है – Different between HTML Tag and HTML Element? HTML Element के प्रकार – Types of HTML Elements? आदि के बारे में जानकारी देंगे. Table of Content HTML Element क्या है – What is an HTML Element?