angularjs 测试样品

...

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
  <style>
    #hulnum {
      /* 这块是阿贾写的 */
      width: 300px;
      position: fixed;
      top: 50%;
      left: 50%;
      border: rgba(0, 0, 0, 0.1) solid 1px;
      transform: translate(-50%, -50%);
      text-align: center;
      line-height: 300px;
      box-shadow: 2px 4px 10px 0px rgb(0 0 0 / 30%);
      border-radius: 8px;
    }
  </style>
</head>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <div id="hulnum">
      <h1>{{lnum}}</h1>
    </div>
    <p id="hu">pp</p>

    <ul>
      <li ng-repeat="x in names">{{x}}</li>
    </ul>

  </div>

  <script>
    var range = [];
    for (var i = 0; i < 5000; i++) {
      range.push(i);
    }
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $interval) {
      $scope.lnum = document.documentElement.scrollTop;
      $scope.names = range;
      $interval(function () {
        $scope.lnum = document.documentElement.scrollTop;
      }, 500);
    }
    );
  </script>

</body>

</html>

效果...

 

　　

　　

posted @ 2022-01-21 15:14  voh99800  阅读(15)  评论(0)  编辑  收藏  举报