1. 首页
  2. 前端大牛

angular倒计时案例

angularjs是目前前端最流行的一个框架,但是有多少人真的用到了它的价值了呢?的确,之前我也是这么认为的,自学的时候我在网上看到angularjs总与一些前端样式和交互框架(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>
 

原创文章,作者:FlyingFish,如若转载,请注明出处:https://www.pmtemple.com/flyingfish/188/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论列表(1条)

  • DevilStefan
    DevilStefan 2016年11月18日 下午3:16

    沙发 😎
    技术贴,必须顶 💡

联系我们

185-1614-2515

在线咨询:点击这里给我发消息

邮件:admin@pmtemple.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code