How to create digital and analog clock using javascript in hindi
Post Views : 132

Leave a Comment / By
How to create digital and analog clock using javascript in hindi

Introduction

हेलो दोस्तों आज हम इस post में simple HTML, css और javascript का इस्तेमाल करके एक simple analog clock और साथ ही digital clock को बनायेगे!.

Javascript में current time को get करने के लिए javascript का Date object का इस्तेमाल कर सकते है जो हमारे digital और analog clock time को regularly update करके time को display करेगा!.

Digital clock using javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Digital Clock</title>
</head>
<body>
    <div class="digital-clock">
        <h3> Digital Clock </h3>
        <div class="dclock">
            <div id="digital-clock"></div>
        </div>
    </div>
     <script>
        function updateClock() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();
            
            /* Digital clock js : */
            dhours = (hours < 10) ? "0" + hours : hours;
            dminutes = (minutes < 10) ? "0" + minutes : minutes;
            dseconds = (seconds < 10) ? "0" + seconds : seconds;

            var timeString = dhours + ":" + dminutes + ":" + dseconds;
            var period = (hours >= 12) ? "PM" : "AM";

            document.getElementById("digital-clock").innerText = timeString+' '+period;
        }

        // Update the clock every second
        setInterval(updateClock, 1000);

        // Initial update
        updateClock();

    </script>
</body>
</html>

ऊपर के example में देख सकते है!. setInterval function का इस्तेमाल clock के time को updated रखने के लिए हर एक second updateClock() को call किया जाता है!. और साथ ही page load होने पर तुरंत current time को display करने के लिए updateClock() function को शरुआत में setuInterval के बहार कॉल किया है!.

 

Analog clock using javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Analog Clock</title>
    <style>
        body {
            display: flex;            
            justify-content: center;            
            margin: 0;
            background-color: #f0f0f0;
        }
        .clock {
            position: relative;
            max-width: 250px;
            max-height: 250px;
            width: 500px;
            height: 500px;
            border: 5px solid #c41b1b;
            border-radius: 50%;
        }
        .hour, .minute, .second {
            position: absolute;
            width: 35%;
            height: 2px;
            background-color: #333;
            top: 45%;
            left:15%;
            transform-origin: 100%;
            transform: rotate(90deg);
            transform-origin: 100%;
        }
        .analog-clock {
            text-align: center;
            border: 1px solid;
            padding: 28px 50px;
            margin-top: 25px;
            border-left: 0px
        }        
        .hour { 
            height: 6px; 
        }
        .minute { 
            height: 3px; 
        }
        .second { 
            height: 1px; 
            background-color: red; 
        }        
        .number { 
            position: absolute; 
            font-size: 20px; 
            color: #c41b1b; 
            font-weight: bold;
        }
        #hour:before { 
            content: ""; 
            width: 15px; 
            height: 15px; 
            background: #141313; 
            display: inline-block; 
            position: relative; 
            left: 45px; 
            top: -6px; 
            border-radius: 50px; 
        }
        #num-1 { 
            top: 5.5%; 
            left: 70%; 
            transform: translateX(-50%); 
        }
        #num-2 { 
            top: 23%; 
            right: 12%; 
            transform: translateY(-50%); 
        }
        #num-3 { 
            top: 45%; 
            right: 10px; 
            transform: translateY(-50%); 
        }
        #num-4 { 
            bottom: 30%; 
            right: 8%; 
            transform: translateX(50%); 
        }
        #num-5 { 
            bottom: 10%; 
            right: 24%; 
            transform: translateX(50%); 
        }
        #num-6 { 
            bottom: 5px; 
            left: 50%; 
            transform: translateX(-50%); 
        }
        #num-7 { 
            bottom: 12%; 
            left: 22%; 
            transform: translateY(50%); 
        }
        #num-8 { 
            top: 68%; 
            left: 8%; 
            transform: translateY(-50%); 
        }
        #num-9 { 
            top: 43%; 
            left: 5%; 
            transform: translateX(-50%); 
        }
        #num-10 { 
            top: 18%; 
            left: 10%; 
            transform: translateY(50%); 
        }
        #num-11 { 
            top: 4%; 
            left: 25%; 
            transform: translateY(50%); 
        }
        #num-12 { 
            top: 1%; 
            left: 50%; 
            transform: translateX(-50%); 
        }
        #digital-clock { 
            font-size: 2em; 
            font-family: 'Arial', sans-serif; 
        }
    </style>
</head>
<body>
    
    <div class="analog-clock"> 
        <h3> Analog Clock </h3>    
        <div class="clock">
            <div class="number" id="num-1">1</div>
            <div class="number" id="num-2">2</div>
            <div class="number" id="num-3">3</div>
            <div class="number" id="num-4">4</div>
            <div class="number" id="num-5">5</div>
            <div class="number" id="num-6">6</div>
            <div class="number" id="num-7">7</div>
            <div class="number" id="num-8">8</div>
            <div class="number" id="num-9">9</div>
            <div class="number" id="num-10">10</div>
            <div class="number" id="num-11">11</div>
            <div class="number" id="num-12">12</div>
            <div class="hour" id="hour"></div>
            <div class="minute" id="minute"></div>
            <div class="second" id="second"></div>
        </div>
    </div>
    
    <script>
        function updateClock() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            const hourElement = document.getElementById('hour');
            const minuteElement = document.getElementById('minute');
            const secondElement = document.getElementById('second');

            const hourDeg = (hours % 12 + minutes / 60) * 360 / 12;
            const minuteDeg = (minutes + seconds / 60) * 360 / 60;
            const secondDeg = seconds * 360 / 60;

            hourElement.style.transform = `rotate(${hourDeg}deg)`;
            minuteElement.style.transform = `rotate(${minuteDeg}deg)`;
            secondElement.style.transform = `rotate(${secondDeg}deg)`;
           
        }

        // Update the clock every second
        setInterval(updateClock, 1000);

        // Initial update
        updateClock();

    </script>
</body>
</html>

Digital and analog clock using javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Digital & Analog Clock</title>
    <style>
        body {
            display: flex;            
            justify-content: center;            
            margin: 0;
            background-color: #f0f0f0;
        }
        .clock {
            position: relative;
            max-width: 250px;
            max-height: 250px;
            width: 500px;
            height: 500px;
            border: 5px solid #c41b1b;
            border-radius: 50%;
        }
        .hour, .minute, .second {
            position: absolute;
            width: 35%;
            height: 2px;
            background-color: #333;
            top: 45%;
            left:15%;
            transform-origin: 100%;
            transform: rotate(90deg);
            transform-origin: 100%;
        }
        .analog-clock {
            text-align: center;
            border: 1px solid;
            padding: 28px 50px;
            margin-top: 25px;
            border-left: 0px
        }
        .digital-clock {
            border: 1px solid;
            padding: 28px 50px;
            margin-top: 25px;
            text-align: center;
        }
        .dclock { 
            border: 4px solid lightgrey; 
            padding: 5px 20px; 
        }
        .hour { 
            height: 6px; 
        }
        .minute { 
            height: 3px; 
        }
        .second { 
            height: 1px; 
            background-color: red; 
        }        
        .number { 
            position: absolute; 
            font-size: 20px; 
            color: #c41b1b; 
            font-weight: bold;
        }
        #hour:before { 
            content: ""; 
            width: 15px; 
            height: 15px; 
            background: #141313; 
            display: inline-block; 
            position: relative; 
            left: 45px; 
            top: -6px; 
            border-radius: 50px; 
        }
        #num-1 { 
            top: 5.5%; 
            left: 70%; 
            transform: translateX(-50%); 
        }
        #num-2 { 
            top: 23%; 
            right: 12%; 
            transform: translateY(-50%); 
        }
        #num-3 { 
            top: 45%; 
            right: 10px; 
            transform: translateY(-50%); 
        }
        #num-4 { 
            bottom: 30%; 
            right: 8%; 
            transform: translateX(50%); 
        }
        #num-5 { 
            bottom: 10%; 
            right: 24%; 
            transform: translateX(50%); 
        }
        #num-6 { 
            bottom: 5px; 
            left: 50%; 
            transform: translateX(-50%); 
        }
        #num-7 { 
            bottom: 12%; 
            left: 22%; 
            transform: translateY(50%); 
        }
        #num-8 { 
            top: 68%; 
            left: 8%; 
            transform: translateY(-50%); 
        }
        #num-9 { 
            top: 43%; 
            left: 5%; 
            transform: translateX(-50%); 
        }
        #num-10 { 
            top: 18%; 
            left: 10%; 
            transform: translateY(50%); 
        }
        #num-11 { 
            top: 4%; 
            left: 25%; 
            transform: translateY(50%); 
        }
        #num-12 { 
            top: 1%; 
            left: 50%; 
            transform: translateX(-50%); 
        }
        #digital-clock { 
            font-size: 2em; 
            font-family: 'Arial', sans-serif; 
        }
    </style>
</head>
<body>
    <div class="digital-clock">
        <h3> Digital Clock </h3>
        <div class="dclock">
            <div id="digital-clock"></div>
        </div>
    </div>
    <div class="analog-clock"> 
        <h3> Analog Clock </h3>    
        <div class="clock">
            <div class="number" id="num-1">1</div>
            <div class="number" id="num-2">2</div>
            <div class="number" id="num-3">3</div>
            <div class="number" id="num-4">4</div>
            <div class="number" id="num-5">5</div>
            <div class="number" id="num-6">6</div>
            <div class="number" id="num-7">7</div>
            <div class="number" id="num-8">8</div>
            <div class="number" id="num-9">9</div>
            <div class="number" id="num-10">10</div>
            <div class="number" id="num-11">11</div>
            <div class="number" id="num-12">12</div>
            <div class="hour" id="hour"></div>
            <div class="minute" id="minute"></div>
            <div class="second" id="second"></div>
        </div>
    </div>
    
    <script>
        function updateClock() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            const hourElement = document.getElementById('hour');
            const minuteElement = document.getElementById('minute');
            const secondElement = document.getElementById('second');

            const hourDeg = (hours % 12 + minutes / 60) * 360 / 12;
            const minuteDeg = (minutes + seconds / 60) * 360 / 60;
            const secondDeg = seconds * 360 / 60;

            hourElement.style.transform = `rotate(${hourDeg}deg)`;
            minuteElement.style.transform = `rotate(${minuteDeg}deg)`;
            secondElement.style.transform = `rotate(${secondDeg}deg)`;

            /* Digital clock js : */
            dhours = (hours < 10) ? "0" + hours : hours;
            dminutes = (minutes < 10) ? "0" + minutes : minutes;
            dseconds = (seconds < 10) ? "0" + seconds : seconds;

            var timeString = dhours + ":" + dminutes + ":" + dseconds;
            var period = (hours >= 12) ? "PM" : "AM";

            document.getElementById("digital-clock").innerText = timeString+' '+period;
        }

        // Update the clock every second
        setInterval(updateClock, 1000);

        // Initial update
        updateClock();

    </script>
</body>
</html>

 

Related Posts

Leave a Comment

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