Skip to content

Instantly share code, notes, and snippets.

@zhuangya
Last active December 18, 2015 15:19
Show Gist options
  • Select an option

  • Save zhuangya/5803125 to your computer and use it in GitHub Desktop.

Select an option

Save zhuangya/5803125 to your computer and use it in GitHub Desktop.
parse string to int by the minors method.
<!doctype html>
<html lang="zh" ng-app="colorApp">
<head><meta charset="utf-8"><title>Website</title>
<style>
.block { width: 64px; height: 64px; display: inline-block;}
label { display: block; padding: 6px; background-color: #f5f5f5; }
</style>
</head><body>
<div ng-controller="Ctrl">
<label>Hue: <input min="0" max="360" type="range" ng-model="hue"/></label>
<label>Saturation: <input min="0" max="100" type="range" ng-model="saturation"/></label>
<label>Lightness: <input min="0" max="100" type="range" ng-model="lightness"/></label>
<div ng-repeat="offset in blocks" class="block" style="background-color: hsl({{(hue - 0) + (offset - 0) || 0}}, {{(saturation || 100) | percent}}, {{(lightness || 50) | percent}})"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
'use strict';
var colorApp = angular.module('colorApp', []);
colorApp.controller('Ctrl', function($scope) {
var i;
$scope.blocks = [];
$scope.saturation = '75';
for(i = 0; i < 360; i = i + 30) {
$scope.blocks.push(i);
}
});
colorApp.filter('percent', function() {
return function(raw) {
return raw + '%';
};
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment