SVG Clock Practice

Developer
Ajala Comfort
Size
2,436 Kb
Views
6,072
  1. SVG Clock Practice Previews
  2. SVG Clock Practice HTML Codes
  3. SVG Clock Practice CSS Codes
  4. SVG Clock Practice JS Codes

How do I make an svg clock practice?

What is a svg clock practice? How do you make a svg clock practice? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.

SVG Clock Practice Previews
IQ Test

SVG Clock Practice - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Clock Practice</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg width="100%" height="700"> <circle cx="250" cy="250" r="113" fill="rgba(20,20,20,0.05)" /> <circle cx="250" cy="250" r="100" fill="#2ecc71" stroke="#FFF" stroke-width="20" /> <g id="hands"> <line id="hourshand" x1="250" y1="250" x2="250" y2="170" stroke="#FFF" stroke-width="4" stroke-linecap="round" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 250 250" to="360 250 250" dur="43200s" repeatCount="indefinite" /> </line> <line id="minuteshand" x1="250" y1="250" x2="250" y2="170" stroke="#FFF" stroke-width="2" stroke-linecap="round" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 250 250" to="360 250 250" dur="3600s" repeatCount="indefinite" /> </line> <line id="secondshand" x1="250" y1="250" x2="250" y2="200" stroke="#bdc3c7" stroke-width="4" stroke-linecap="round" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 250 250" to="360 250 250" dur="60s" repeatCount="indefinite" /> </line> </g>
</svg> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG Clock Practice - Script Codes CSS Codes

svg{background:beige;}

SVG Clock Practice - Script Codes JS Codes

/**
LOGIC1. Get the maths behind time 2.Relate the time to degree angle3.Set the hands to the angles
**/
var date = new Date();
var timeAngles = {hour:getHourAngle(date.getHours()),minutes:getSecondsandMinutesAngle(date.getMinutes()),seconds:getSecondsandMinutesAngle(date.getSeconds())}
function getSecondsandMinutesAngle(seconds){ return parseInt(seconds) * 6;//dff in 6 degrees
}
function getHourAngle(hour){return hour < 12 ? parseInt(hour) * 30 : (24-parseInt(hour)) * 30; //diff in 30 degrees
}
function set(val){return [val,250,250].join(" ");}
//SET HANDS
$("#hourshand > *").attr("from",set(timeAngles.hour ))
$("#minuteshand > *").attr("from",set(timeAngles.minutes ))
$("#secondshand > *").attr("from",set(timeAngles.seconds ))
function addTicks(repeat,angle){ if(repeat <= 0){return false;} $(document.createElementNS('http://www.w3.org/2000/svg','line')).attr({ x1:250,y1:160,x2:250,y2:180,transform: 'rotate(' + (angle) + ' 250 250)',stroke:"#FFF","stroke-width":repeat % 3 === 0 || repeat == 0 ? "5" : "1" }).appendTo("svg"); repeat -=1; angle = repeat * 30; return addTicks(repeat,angle);
}
//CALL TICK FUNCTION
addTicks(12,0);
SVG Clock Practice - Script Codes
SVG Clock Practice - Script Codes
Home Page Home
Developer Ajala Comfort
Username AJALACOMFORT
Uploaded January 11, 2023
Rating 3
Size 2,436 Kb
Views 6,072
Do you need developer help for SVG Clock Practice?

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!

Ajala Comfort (AJALACOMFORT) Script Codes
Name
Calculator with ReactJs
Hashtables
Tic-Tac-Toe Free Code Camp Challenge
Palindrome Word
Material Chat app Interface with ReactJS
Calender with ReactJS
Recipe Book
Second Website
Basic ReactJs Form
Slide Show with ReactJs
Create amazing sales emails 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!