Angular数值计算器指令实例

Angular Data Counter Directive 使用Angular指令创建一个计数器显示块，实现乘法、取整、十进制转换、货币等功能。 Source: http://toys.paradisecircus.com/realtime/

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1883
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var app = angular.module('app', []);

app.controller('controller', function($scope) {

}); // End Controller

app.directive('advCounter', function($timeout) {

function update(scope) {
            $timeout(function() {
                update(scope);
                scope.int += scope.var;
                scope.output = scope.int.toFixed(scope.decimal);
            }, scope.time * 1000);
        }

return {
            restrict: 'E',
            transclude: true,
            scope: {
                var: '=',
                color: '@',
                background: '@',
                symbol: '@',
                time: '@',
                icon: '@',
                decimal: '@'
            },
            link: function(scope) {
                scope.int = 0;
                scope.time = 1;
                scope.decimal = 2;
                update(scope);
            },
            template: '<li class="box" ng-style="{color:color,background:background}"><span class="count">{{symbol}}{{output}}</span><span class="icon"><img ng-src="{{icon}}"/></span><span class="content" ng-transclude></span></li>'
        };
    });

})();

编译

CSS

HTML

<adv-counter var="1.6" color="white" background="lightblue" symbol="£" icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/Plane_black_shape_rotated_to_right_diagonal_32.png">Money spent on Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, sapiente.</adv-counter>

<adv-counter var="2.6" background="#339194" time=".5" decimal="0" icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/Road_perspective_32.png">Amount of people that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, velit.</adv-counter>

<adv-counter var="16.5" background="#333333" color="#03A9F4" time="2" decimal="1" icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/Barcode_32.png">Amount of products that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, velit.</adv-counter>

<adv-counter var="0.5" color="white" background="#F10C49" icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/Plane_black_shape_rotated_to_right_diagonal_32.png">Flights that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, sapiente.</adv-counter>

<adv-counter var="6.4" background="tomato" time="1" decimal="0" icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/Road_perspective_32.png">Amount of cars that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, velit.</adv-counter>

<adv-counter var="2.3" background="#efefef" color="#03A9F4" time=".4" decimal="2" symbol="$" icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/110131/Barcode_32.png">Amount of dollars that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, velit.</adv-counter>

</div>

<p>Angular Directive that creates a block displaying an increasing counter, with the ability to control variables such as multiple, interval time, decimal places, currency, style and icon from the HTML element attributes.
</p>

<h2>Usage</h2>
<code><pre>
&lt;adv-counter var="MULTIPLE" time="INTERVAL_TIME(in seconds)" decimal="DECIMAL_PLACES" color="FOREGROUND_COLOR" background="BACKGROUND_COLOR" symbol="SYMBOL" icon="PATH/TO/IMG">

CONTENT

&lt;/adv-counter>
</pre></code>

<p style="font-size:0.7em;">Icons by <a href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> . Licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a>
</p>

Angular Data Counter Directive 使用Angular指令创建一个计数器显示块，实现乘法、取整、十进制转换、货币等功能。 Source: http://toys.paradisecircus.com/realtime/

编辑器支持Emmet

快捷键

Angular Data Counter Directive 使用Angular指令创建一个计数器显示块，实现乘法、取整、十进制转换、货币等功能。 Source: http://toys.paradisecircus.com/realtime/

Highcharts.js 开发实例 - 矩阵图销售数据统计

webgl2导数函数（texture derivative）代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：