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.
-
-
Save juanpujol/ad4c2d181cba55caa5ad to your computer and use it in GitHub Desktop.
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment