Skip to main content

How to create a dynamic digital clock for your website using javascript

Dynamic Digital Clock

How to create a dynamic digital clock for your website using javascript

Time :
Day :


Click to see the clock

Just copy and past on your website
Source : 

<!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('clock').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);



var today = new Date();
    var day = today.getDate();
    var month = today.getMonth();
    var year = today.getFullYear();
 
    document.getElementById('day').innerHTML =
    day + "/" + month + "/" + year;
    var d = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}


function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
<style>
.deco
{
text-align:center;
font-family:arial;
font-size:50px;
}
</style>
</head>
<body onload="startTime()">
<div class="deco">Time : <strong id="clock"></strong></div>
<div class="deco">Day : <strong id="day"></strong></div>
</body>
</html>

 Output :

Labels:

Comments

Post a Comment

Popular posts from this blog

How to Create a secure login panel with PHP & Mysql using parameters and session

Secure Login with PHP & Mysql Download project zip Requirement: you need an Apache and MySQL Server database on your device If your computer has xampp or wamp or mamp  or lamp that's great otherwise you need to install Apache and MySQL server Create a database login Run this query : CREATE TABLE admin ( id INT(6) AUTO_INCREMENT PRIMARY KEY, uname VARCHAR(30) NOT NULL, upass VARCHAR(30) NOT NULL ); INSERT INTO `admin` (`id`, `uname`, `upass`) VALUES (NULL, 'admin', 'admin1993'); That means you set your username =  admin and password = admin1993 Login Page: login.php <!doctype html> <html> <head> <meta charset="utf-8"> <title>Login Getway</title> <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css"> <style> * { margin:0px; padding:0px; font-family:ar...
Post a Comment
Read more

Windows all version product key free

Product key for window vista : Vista | Ultimate | Acer | 3YDB8-YY3P4-G7FCW-GJMPG-VK48C Vista | Ultimate | Advent | 39MVW-K8KKQ-BGJ9B-24PMW-RYQMV Vista | Ultimate | Alienware | 7QVFM-MF2DT-WXJ62-XTYX3-P9YTT Vista | Ultimate | Asus | 6F2D7-2PCG6-YQQTB-FWK9V-932CC Vista | Ultimate | Dell | 2QBP3-289MF-9364X-37XGX-24W6P Vista | Ultimate | DixonsXP | 6JPQR-4G364-2B7P7-83FXW-DR8QC Vista | Ultimate | Gateway | 6P8XK-GDDTB-X9PJQ-PYF36-G8WGV Vista | Ultimate | Hedy | 7R2C3-DWCBG-C8G96-MPT8T-K37C7 Vista | Ultimate | HP | 23CM9-P7MYR-VFWRT-JGH7R-R933G Vista | Ultimate | Lenovo | 24J6Q-YJJBG-V4K4Q-2J8HY-8HBQQ Vista | Ultimate | OQO | C4QGV-XHYYT-9PW8R-DCFTQ-FBD6M Vista | Ultimate | Toshiba | 33G3W-JY3XQ-CQQ7C-TG96R-R6J6Q Vista | Ultimate | Sony | 2KKTK-YGJKV-3WMRR-3MDQW-TJP47 Vista | Ultimate | Stone | GVV4P-RQXD7-X9XKB-M2G9H-C93VM Vista | Ultimate | Velocity Micro | 9BKKK-7Y888-MHD67-HHXTB-332K9 Vista | Business | Acer | 2TJTJ-C72D7-7BCYH-FV3HT-JGD4F Vista | Bus...
1 comment
Read more

Create dynamic table using bootstrap (filter & find records)

Data Table With Bootstrap Download HTML file Into : In this table, you can short, filtering, find the record and many features you have been used but its very easy to use and configure. so don't get late lets introducing data table CSS:  Data table Stylesheet JS:   Data table js download this for your next project. or you can copy and paste bellow con on your project it's definitely working. Source : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Data Table</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function(){       $('#myTable').DataTable(); }); </script> <link...
Post a Comment
Read more