Current time clock icon

Developer
Michael Lee
Size
2,794 Kb
Views
16,192
  1. Current time clock icon Previews
  2. Current time clock icon HTML Codes
  3. Current time clock icon CSS Codes
  4. Current time clock icon JS Codes

How do I make an current time clock icon?

A little dynamic clock icon that displays the current time on which the browser first entered the site.. What is a current time clock icon? How do you make a current time clock icon? This script and codes were developed by Michael Lee on 20 January 2023, Friday.

Current time clock icon Previews
IQ Test

Current time clock icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Current time clock icon</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="centerer"> Current time is <span class="currentTime"></span> <div class="clock"> <div class="clock-center"></div> <div class="clock-hand-container clock-hours"> <div class="clock-hand clock-hand-hours"></div> </div> <div class="clock-hand-container clock-minutes"> <div class="clock-hand clock-hand-minutes"></div> </div> </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>

Current time clock icon - Script Codes CSS Codes

.clock { height: 40px; width: 40px; border: 4px solid #000; border-radius: 100%; position: relative; margin: 0.5rem auto 0;
}
.clock-center { height: 6px; width: 6px; background: #000; border-radius: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.clock-hand-container { height: 40px; width: 40px; display: block; position: absolute; left: 0; top: 0; -webkit-transition: 0.1s -webkit-transform ease-in; transition: 0.1s -webkit-transform ease-in; transition: 0.1s transform ease-in; transition: 0.1s transform ease-in, 0.1s -webkit-transform ease-in;
}
.clock-hand { width: 4px; background: #000; position: absolute; left: 50%; border-radius: 4px;
}
.clock-hand-hours { height: 8px; top: 7px; -webkit-transform-origin: 0px 14px; transform-origin: 0px 14px; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.clock-hand-minutes { height: 12px; top: 3px; -webkit-transform-origin: 0px 18px; transform-origin: 0px 18px; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
.centerer { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}

Current time clock icon - Script Codes JS Codes

function formatHours(x){ if(x > 12){ return x - 12; }else{ return x; }
}
function formatMinutes(x){ if(x < 10){ return "0"+x }else{ return x; }
}
function rotateArms(time, armType){ if(armType == "hours"){ return (time * 360)/12; }else{ return (time * 360)/60; }
}
jQuery.fn.rotate = function(degrees) { $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)', '-moz-transform' : 'rotate('+ degrees +'deg)', '-ms-transform' : 'rotate('+ degrees +'deg)', 'transform' : 'rotate('+ degrees +'deg)'}); return $(this);
};
var currentTime = new Date();
var hours = formatHours(currentTime.getHours());
var minutes = formatMinutes(currentTime.getMinutes());
$(".currentTime").text(hours+":"+minutes);
$('.clock-hours').rotate(rotateArms(hours, "hours"));
$('.clock-minutes').rotate(rotateArms(minutes, "minutes"));
Current time clock icon - Script Codes
Current time clock icon - Script Codes
Home Page Home
Developer Michael Lee
Username michaellee
Uploaded January 20, 2023
Rating 4
Size 2,794 Kb
Views 16,192
Do you need developer help for Current time clock icon?

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!

Michael Lee (michaellee) Script Codes
Name
Page Animation
Breathing Giphy Logo
Ringing bell
Profile background and color changer prototype for CodeHive
SVG Hearts
Stop Using Corner Banners
IOS Messages Typing Bubble
Responsive C3.js chart
My Daily Routine Visualized
Axe the Hamburger, Hail the Tab Bar
Create amazing video scripts 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!