Coolest clock ever

Developer
Maksim Surguy
Size
2,503 Kb
Views
38,456
  1. Coolest clock ever Previews
  2. Coolest clock ever HTML Codes
  3. Coolest clock ever CSS Codes
  4. Coolest clock ever JS Codes

How do I make an coolest clock ever?

Human clock using a few images. What is a coolest clock ever? How do you make a coolest clock ever? This script and codes were developed by Maksim Surguy on 12 September 2022, Monday.

Coolest clock ever Previews
IQ Test

Coolest clock ever - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Coolest clock ever</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='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Coolest clock ever - 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);
}

Coolest clock ever - 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(); //１つずつにする 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)"); }
}
Coolest clock ever - Script Codes
Coolest clock ever - Script Codes
Home Page Home
Developer Maksim Surguy
Username msurguy
Uploaded September 12, 2022
Rating 4.5
Size 2,503 Kb
Views 38,456
Do you need developer help for Coolest clock ever?

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!

Maksim Surguy (msurguy) Script Codes
Name
Magnetic particles - iOS version
Background Blur plugin
Bootstrap - flat ui buttons
Sortable Grid UI JS
Sort algorithms illustrated
Simplest Parallax effect ever.
Ladda Bootstrap 3
Lightning In JS
Mesmerizing Delaunay
USA using webfont stately
Create amazing marketing copy with AI!

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!