angular倒计时案例

余倩倩 • 2016年11月18日下午2:40 • 前端大牛 • 阅读 3045

angular js是目前前端最流行的一个框架，但是有多少人真的用到了它的价值了呢？的确，之前我也是这么认为的，自学的时候我在网上看到angular js总与一些前端样式和交互框架（bootstrap,framework7等）混合用的，然后我就想着这样对于手机端的项目未必是好事，引用这么多的框架文件，会影响我们的性能和用户体验，但是由于这段时间公司项目不多，我静下心来写了angular的一些交互的案例！

 <script type="text/javascript">
 
     angular.module('pay_sure',[]).controller('surepay',function ($scope, $http,$interval) {
 
     $http.get("json/pay-sure.json").success(function(data){
 
         $scope.data=data.data;
 
      })
 
    /* 倒计时开始*/
 
            $scope.mm = 00;
 
            $scope.ss = 03;
 
            $scope.mm = $scope.mm;
 
            $scope.ss = $scope.ss;
 
            var time = $interval(function () {
 
                $scope.ss--;
 
                $scope.mm = $scope.mm;
 
                $scope.ss = $scope.ss;
 
                if($scope.mm>0){
 
                    if($scope.ss==0){
 
                    $scope.mm--;
 
                    $scope.ss = 60;
 
                  }
 
                }else if($scope.mm==0){
 
                    if($scope.ss==0){
 
                   alert("完毕");
 
                   $interval.cancel(time);//关闭倒计时
 
                  }
 
                }
 

 
            },1000);
 

 
          })
 
  </script>
 

 
2.html
 


 
 <div ng-controller="surepay">
 
    <div class="blank-44"></div>
 
    <div class="y-footer">
 
        <div class="y-wTime">
 
           <span id="t_m"><!--29分-->{{mm}}分</span>
 
           <span id="t_s"><!--52秒-->{{ss}}秒</span>
 
           <div class="y-wtHint">支付剩余时间</div>
 
        </div>
 
        <a class="y-pSure" href="#">确认支付</a>
 
    </div>
 
    <!-- 订单超时弹出框提示开始 -->
 
    <div class="y-hintMes">订单已超时，已自动取消订单</div>
 
</div>