Clock jQuery.js
How do I make an clock jquery.js?
What is a clock jquery.js? How do you make a clock jquery.js? This script and codes were developed by WebSonick on 15 October 2022, Saturday.
Clock jQuery.js - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clock jQuery.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="canvas"> <div id="hour1"></div> <div id="hour2"></div> <div id="minute1"></div> <div id="minute2"></div> <div id="second1"></div> <div id="second2"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/index.js"></script>
</body>
</html>
Clock jQuery.js - Script Codes CSS Codes
html, body { margin:0px; padding:0px; background-color : #fff;
}
#canvas { position: absolute; width: 465px; height: 465px; background-color : #fff; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/tenten.gif);
}
#hour1 { position: absolute; width: 80px; height: 100px; top: 170px; left: 40px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#hour2 { position: absolute; width: 80px; height: 100px; top: 170px; left: 80px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#minute1 { position: absolute; width: 80px; height: 100px; top: 170px; left: 170px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#minute2 { position: absolute; width: 80px; height: 100px; top: 170px; left: 210px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#second1 { position: absolute; width: 80px; height: 100px; top: 170px; left: 300px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
#second2 { position: absolute; width: 80px; height: 100px; top: 170px; left: 340px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif);
}
Clock jQuery.js - Script Codes JS Codes
// forked from chabudai's "ホネホネ・クロック JS - forked from: Human Clock" https://jsdo.it/chabudai/4K7S
/** * FireFoxのみちゃんとしたスピードで表示されます。 * * Flash版はこちら * http://wonderfl.net/c/3gx1 */
window.onload = function () { var updateView = (function () { var sec; return function () { var now = new Date(); if (now.getSeconds() == sec) return; var second = now.getSeconds(); var minute = now.getMinutes(); var hour = now.getHours(); //1つずつにする var hour1; if (hour < 10) { hour1 = 0; } else { hour1 = Math.floor(hour / 10); } var hour2 = hour % 10; var minute1; if (minute < 10) { minute1 = 0; } else { minute1 = Math.floor(minute / 10); } var minute2 = minute % 10; var second1; if (second < 10) { second1 = 0; } else { second1 = Math.floor(second / 10); } var second2 = second % 10; _updateView(hour1, hour2, minute1, minute2, second1, second2); } })(); setInterval(updateView, 500); function _updateView(h1, h2, m1, m2, s1, s2) { //alert(h1+""+h2+":"+m1+""+m2+":"+s1+""+s2); var _url = "http://www.chabudai.org/temp/wonderfl/honehone/img/"; $('#hour1').css("background-image", "url(" + _url + "h" + h1 + ".gif)"); $('#hour2').css("background-image", "url(" + _url + "hh" + h2 + ".gif)"); $('#minute1').css("background-image", "url(" + _url + "m" + m1 + ".gif)"); $('#minute2').css("background-image", "url(" + _url + "mm" + m2 + ".gif)"); $('#second1').css("background-image", "url(" + _url + "s" + s1 + ".gif)"); $('#second2').css("background-image", "url(" + _url + "ss" + s2 + ".gif)"); }
}
Developer | WebSonick |
Username | WebSonick |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 2,480 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
TinyMce Tetx Editor | 2,331 Kb |
Horizontal Portfolio | 5,089 Kb |
Codepen on ge1doot.js | 3,296 Kb |
Night sky with twinkling stars - CSS3 only | 1,973 Kb |
CSS3 Text Effect | 1,861 Kb |
JQuery Clock | 2,413 Kb |
Logo Hover effect | 1,795 Kb |
In second lives - HTML5 CANVAS 3D demo | 5,514 Kb |
SpongeBob SquarePants CSS3 | 2,786 Kb |
Social Links | 2,175 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
This in constructor context | _shree33 | 1,718 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!