This is the Ractive.js clock example implemented in AngularJS. A working Plunkr is also available.
Much of the JavaScript, most of the HTML, and all of the CSS was taken directly from the Ractive.js example for minimal differences in the samples.
Last active
October 18, 2020 13:52
-
-
Save BinaryMuse/6100363 to your computer and use it in GitHub Desktop.
Ractive.js clock example in AngularJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
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/
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
Thanks for this, useful.