Watch
How do I make an watch?
What is a watch? How do you make a watch? This script and codes were developed by Julien Dargelos on 29 November 2022, Tuesday.
Watch - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Watch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="watch"> <div class="indicator" id="indicator-3"></div> <div class="indicator" id="indicator-6"></div> <div class="indicator" id="indicator-9"></div> <div class="indicator" id="indicator-12"></div> <div class="small-indicator" id="small-indicator-1"> <div class="indicator" id="indicator-1"></div> <div class="indicator" id="indicator-4"></div> <div class="indicator" id="indicator-7"></div> <div class="indicator" id="indicator-10"></div> </div> <div class="small-indicator" id="small-indicator-2"> <div class="indicator" id="indicator-2"></div> <div class="indicator" id="indicator-5"></div> <div class="indicator" id="indicator-8"></div> <div class="indicator" id="indicator-11"></div> </div> <div class="arrow" id="s-arrow"></div> <div class="arrow" id="m-arrow"></div> <div class="arrow" id="l-arrow"></div>
</div> <script src="js/index.js"></script>
</body>
</html>
Watch - Script Codes CSS Codes
body { margin:0; overflow:hidden;
}
#watch { width:300px; height:300px; top:50%; left:50%; margin:-152px 0 0 -152px; border:2px solid rgb(100,100,100); border-radius:100%; position:absolute;
}
.indicator, .arrow { background:rgb(100,100,100); position:absolute;
}
.small-indicator { width:300px; height:300px; position:absolute;
}
#small-indicator-1 { -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg);
}
#small-indicator-2 { -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg);
}
#indicator-6, #indicator-12 {width:2px;height:20px;}
#indicator-3, #indicator-9 {width:20px;height:2px;}
#indicator-3 {margin:149px 0 0 260px;}
#indicator-6 {margin:260px 0 0 149px;}
#indicator-9 {margin:149px 0 0 20px;}
#indicator-12 {margin:20px 0 0 149px;}
#indicator-1, #indicator-2 {width:2px;height:10px;margin:20px 0 0 149px;}
#indicator-4, #indicator-5 {width:10px;height:2px;margin:149px 0 0 270px;}
#indicator-7, #indicator-8 {width:2px;height:10px;margin:270px 0 0 149px;}
#indicator-10, #indicator-11 {width:10px;height:2px;margin:149px 0 0 20px;}
.arrow { width:2px; margin:149px 0 0 149px; position:absolute;
}
#s-arrow {height:50px;}
#m-arrow {height:75px;}
#l-arrow {height:100px;}
Watch - Script Codes JS Codes
function cssPrefix(elementSelector,property,value) { var css=elementSelector+'{-webkit-'+property+':'+value+';'+ '-moz-'+property+':'+value+';'+ '-ms-'+property+':'+value+';'+ '-o-'+property+':'+value+';'+ property+':'+value+';}'; if(!document.getElementsByTagName('head')[0].getElementsByTagName('style')[0]) document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeEnd','<style></style>'); document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].insertAdjacentHTML('beforeEnd',css);
}
function cssKeyframes(animationName,keyframes) { var webkitKeyframes=keyframes; var mozKeyframes=keyframes; var msKeyframes=keyframes; var oKeyframes=keyframes; while(webkitKeyframes.match(/[^-]transform.*?:/)) { var webkitKeyframes=webkitKeyframes.replace(/([^-])(transform.*?):/,'$1-webkit-$2:'); var mozKeyframes=mozKeyframes.replace(/([^-])(transform.*?):/,'$1-moz-$2:'); var msKeyframes=msKeyframes.replace(/([^-])(transform.*?):/,'$1-ms-$2:'); var oKeyframes=oKeyframes.replace(/([^-])(transform.*?):/,'$1-o-$2:'); } var css='@-webkit-keyframes '+animationName+'{'+webkitKeyframes+'}'+ '@-moz-keyframes '+animationName+'{'+mozKeyframes+'}'+ '@-ms-keyframes '+animationName+'{'+msKeyframes+'}'+ '@-o-keyframes '+animationName+'{'+oKeyframes+'}'+ '@keyframes '+animationName+'{'+keyframes+'}'; if(!document.getElementsByTagName('head')[0].getElementsByTagName('style')[0]) document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeEnd','<style></style>'); document.getElementsByTagName('head')[0].getElementsByTagName('style')[0].insertAdjacentHTML('beforeEnd',css);
}
var time=new Date();
var hour=time.getHours();
var minute=time.getMinutes();
var second=time.getSeconds();
var degHour=hour*30+180+(30/(60/minute));
var degMin=minute*6+180+(60/(60/second));
var degSecond=second*6+180;
cssKeyframes('s-arrow','0%{transform:rotate('+degHour+'deg);}100%{transform:rotate('+(degHour+360)+'deg);}');
cssKeyframes('m-arrow','0%{transform:rotate('+degMin+'deg);}100%{transform:rotate('+(degMin+360)+'deg);}');
cssKeyframes('l-arrow','0%{transform:rotate('+degSecond+'deg);}100%{transform:rotate('+(degSecond+360)+'deg);}');
cssPrefix('#s-arrow','transform','rotate('+degHour+'deg)');
cssPrefix('#m-arrow','transform','rotate('+degMin+'deg)');
cssPrefix('#l-arrow','transform','rotate('+degSecond+'deg)');
cssPrefix('#s-arrow','animation','s-arrow 43200s 0 linear infinite');
cssPrefix('#m-arrow','animation','m-arrow 3600s 0 linear infinite');
cssPrefix('#l-arrow','animation','l-arrow 60s 0 linear infinite');
cssPrefix('#s-arrow, #m-arrow, #l-arrow','transform-origin','center 0');
Developer | Julien Dargelos |
Username | juliendargelos |
Uploaded | November 29, 2022 |
Rating | 3 |
Size | 2,598 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 |
Calculator | 2,553 Kb |
SmartPass | 3,841 Kb |
Skateboard tricks | 3,181 Kb |
Tags Input | 4,202 Kb |
InfoGrid | 4,925 Kb |
Psychedelic Animation | 2,665 Kb |
Grapher | 4,725 Kb |
A Pen by Julien Dargelos | 2,139 Kb |
Js-ScrollBar | 5,045 Kb |
Vusic | 4,178 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 |
Z-index demo | Kblh | 1,534 Kb |
RAQuote | Naderk007 | 4,412 Kb |
Animated Donut Chart | Jplhomer | 3,808 Kb |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
SVG Hover Animations | Kjbrum | 10,557 Kb |
Buttons with style | Chbymnky | 2,082 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Banner Ad | Raquellorenzana | 4,172 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!