Simple Clock-in/Clock-out Timer for Tracker (wip)
How do I make an simple clock-in/clock-out timer for tracker (wip)?
Designed for mobile, will eventually feed times back into Tracker and log hours by date. What is a simple clock-in/clock-out timer for tracker (wip)? How do you make a simple clock-in/clock-out timer for tracker (wip)? This script and codes were developed by Matt Gross on 28 August 2022, Sunday.
Simple Clock-in/Clock-out Timer for Tracker (wip) - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Clock-in/Clock-out Timer for Tracker (wip)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="in">Clock In</div>
<div class="out">Clock Out</div>
<article id="timer" class="timer"> 0 seconds
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple Clock-in/Clock-out Timer for Tracker (wip) - Script Codes CSS Codes
*, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box;
}
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; font-family: Helvetica;
}
div { height: 50%; width: 100; transition: .2s ease; text-align: center; color: #fff; line-height: 300px;
}
article { position: absolute;
}
div:hover,
div:focus { opacity: 0.9;
}
.in { background: #333;
}
.out { background: #cf3a3a;
}
.timer { height: 200px; width: 200px; line-height: 200px; text-align: center; top: 50%; left: 50%; -webkit-transform: translate3d(-50%,-50%,0); border-radius: 50%; background: #eee; color: #333;
}
Simple Clock-in/Clock-out Timer for Tracker (wip) - Script Codes JS Codes
var $in = $( 'div.in' );
var $out = $( 'div.out' );
var today = new Date();
var $h = today.getHours();
var $m = today.getMinutes();
var $s = today.getSeconds();
var $timer = 0;
var clocker = null;
$in.click(function() { today = new Date(); $h = today.getHours(); $m = today.getMinutes(); $s = today.getSeconds(); clocker = window.setInterval( 'timerThing()', 1000 ); //alert( "Start the Timer - " + $h + ":" + $m + ":" + $s );
});
$out.click(function() { clearInterval( clocker ); //alert( "Stop the Timer" );
});
function timerThing() { $timer++; $( "#timer" ).html($timer +" seconds");
}
Developer | Matt Gross |
Username | mattgrosswork |
Uploaded | August 28, 2022 |
Rating | 3 |
Size | 2,214 Kb |
Views | 38,456 |
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 |
Masonry-Style Layout in CSS | 2,116 Kb |
Super Basic Menu with Best Practices | 1,639 Kb |
Scared Eyes | 1,673 Kb |
WIP Old Stag logo-flip | 1,781 Kb |
CSS-Only Fly Menu | 3,744 Kb |
Easy Lines Around a Subtitle | 1,807 Kb |
EvenVision Branded Ajax Loader | 3,023 Kb |
Site Menu | 6,873 Kb |
A Better underline | 2,120 Kb |
Basic Flexbox Layout | 1,729 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 |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Beautiful canvas stars | Matths | 2,399 Kb |
SVG Circle Progress | JMChristensen | 3,368 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 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!