angularJS 入门基础(12)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src=""></script>
    <script src=""></script>
    <link href="">
    <script src="" type="text/javascript"></script>
</head>
<body ng-app="app">
    <script type="text/javascript">
           var app = angular.module("app",[]);
    </script>
    <div>
        <div>
            $timeout和$interval,这两个服务;
        </div>
        <div ng-controller="st">
            <div>
                <a href="#">
                    <h4>setInterval</h4>
                    <p>
                    $interval(fn, delay, [count], [invokeApply]);
                    </p>
                </a>
                <a href="#">
                    <h4>timeout</h4>
                    <p>
                    $timeout(fn, [delay], [invokeApply]);
                    </p>
                </a>
            </div>
            <div>
                <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
                    0%
                </div>
            </div>
            <button ng-click="prog()">
                start
            </button>
        </div>
        <script type="text/javascript">
            app.controller("st", function($scope,$element,$interval) {
                var $el = $($element[0]).find(".progress-bar");
                console.log(arguments);
                //使用angular.element选中的元素用find找不到东西;
                $scope.prog = function() {
                    var df = $interval(function() {
                        var val = parseInt($el.html())+4;
                        if(val>=104) $interval.cancel(df);
                        $el.html( val+"%" ).width(val+"%");
                    },100);
                    console.log(df)
                    //console.log(aa = $interval)
                };
            });
        </script>
    </div>
</body>
</html>

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgfxjj.html