Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ractive.js clock example in AngularJS
var app = angular.module('clock', []);
app.filter('pad', function() {
return function(num) {
return (num < 10 ? '0' + num : num);
};
});
app.filter('addSuffix', function() {
return function(num) {
if (num % 100 >= 10 && num % 100 <= 19) {
return num + 'th';
}
switch (num % 10) {
case 1: return num + 'st';
case 2: return num + 'nd';
case 3: return num + 'rd';
}
return num + 'th';
};
})
app.controller("ClockController", function($scope, $timeout) {
$scope.date = new Date();
$scope.days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
$scope.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
$scope.majors = new Array(12);
$scope.minors = new Array(60);
var tick = function() {
$scope.date = new Date();
$timeout(tick, 1000);
};
$timeout(tick, 1000);
});
.left, .right {
float: left;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.left {
padding-right: 1em;
}
.left p {
font-size: 1.4em;
}
.right {
padding-left: 1em;
}
#example p {
margin: 1em 0 0 0;
}
.time {
font-family: 'Voltaire';
font-size: 4em;
margin: 0;
}
.square {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.clock-face {
stroke: #333;
fill: white;
}
.minor {
stroke: #999;
stroke-width: 0.5;
}
.major {
stroke: #333;
stroke-width: 1;
}
.hour {
stroke: #333;
}
.minute {
stroke: #666;
}
.second, .second-counterweight {
stroke: rgb(180,0,0);
}
.second-counterweight {
stroke-width: 3;
}
<body ng-cloak ng-controller="ClockController">
<div class="left">
<p>
Today is {{days[date.getDay()]}}
the {{date.getDate() | addSuffix}}
of {{months[date.getMonth()]}}.
The time is
</p>
<span class="time">
<span class="hours">
{{date.getHours() | pad}}
</span>:<span class="minutes">
{{date.getMinutes() | pad}}
</span>:<span class="seconds">
{{date.getSeconds() | pad}}
</span>
</span>
</div>
<div class="right">
<div class="square">
<svg viewBox="0 0 100 100">
<g transform="translate(50,50)">
<circle class="clock-face" r="48" />
<line ng-repeat="minor in minors track by $index" class="minor"
y1="42" y2="45" transform="rotate({{360 * $index / minors.length}})" />
<line ng-repeat="major in majors track by $index" class="major"
y1="35" y2="46" transform="rotate({{360 * $index / majors.length}})" />
<line class="hour" y1="2" y2="-20"
transform="rotate({{30 * date.getHours() + date.getMinutes() / 2}})" />
<line class="minute" y1="4" y2="-30"
transform="rotate({{6 * date.getMinutes() + date.getSeconds() / 10}})" />
<g transform="rotate({{6 * date.getSeconds()}})">
<line class="second" y1="10" y2="-38" />
<line class="second-counterweight" y1="10" y2="2" />
</g>
</g>
</svg>
</div>
</div>
</body>
@darrenshrwd
Copy link

darrenshrwd commented Sep 5, 2013

Thanks for this, useful.

@maykbrito
Copy link

maykbrito commented Jul 25, 2014

Awesome!! I've done a Directive to control this. Just the digital clock there... Thank you so much!!

*if someone want the directive: http://blog.mayk.brito.net.br/angularjs-diretiva-ngclock-crie-um-relogio-digital/

@magician11
Copy link

magician11 commented Jun 1, 2015

That's great @maykbrito. Add that code to GitHub!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment