Clock Using Html & Js

CLOCK

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

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...

LIST TAG

List tag HTML lists are used to organize and structure content on a web page. There are two types of lists in HTML: ordered and unordered. An ordered list is represented by the <ol> tag, and each list item is represented by the <li> tag. The items in an ordered list are numbered, and the numbers are automatically generated by the browser. Here's an example of an ordered list: <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> This will be rendered as: Item 1 Item 2 Item 3 An unordered list is represented by the <ul> tag, and each list item is represented by the <li> tag. The items in an unordered list are bullet points, and the bullet points are automatically generated by the browser. Here's an example of an unordered list: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> This will be rendered as: Item 1 Item 2 Item 3 You ...

Tutes4u

Search This Blog