<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

  <span>{{count}}</span>

</div>

<script>

  var app = angular.module('myApp', ['ng']);

  app.controller('myCtrl',

    function ($scope, $interval) {

      $scope.count = 0;

      //启动周期性定时器 实现对数据的自增操作

      /* setInterval(

       function () {

       $scope.count++;

       console.log($scope.count);

       //$scope.$digest();

       $scope.$apply();

       },

       500

       )*/

      $interval(

        function () {

          $scope.count++;

        },

        500)

    })

</script>

</body>

</html>

通过$interval，每隔1s，实现图片轮播，两个按钮：开始、结束
分析：
构造数组，数组中存储是图片的名称信息
通过定时器不断的切换数组的下标。

结果：

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

  <meta charset="UTF-8">

  <script src="js/angular.js"></script>

  <title></title>

</head>

<body>

<div ng-controller="myCtrl">

  <img ng-src="img/{{list[index]}}" alt=""/>

  <button ng-click="start()">开始</button>

  <button ng-click="stop()">结束</button>

</div>

<script>

  var app = angular.module('myApp', ['ng']);

  app.controller(

    'myCtrl',

    function ($scope,$interval) {

      $scope.index = 0;

      $scope.list = ['1.jpg','2.jpg','3.jpg','4.jpg'];

      $scope.start  = function () {

      //启动定时器

       promise = $interval(

          function () {

            $scope.index++;

            if($scope.index > 3 )

            {

              $scope.index = 0;

            }

          },

          500

        )

      }

      $scope.stop = function () {

      //结束定时器

        $interval.cancel(promise);

      }

    })

</script>

</body>

</html>

ng $interval(周期性定时器) $timeout（延迟定时器）的更多相关文章

  1. BOM-使用定时器

    window对象包含4个定时器专用方法,说明如下表所示,使用它们可以实现代码定时运行,避免连续执行,这样可以设计动画 方法 说明 setInterval() 按照指定的周期,(以毫秒为单位)来调用函数 ...

  2. TCP的定时器系列 — SYNACK定时器

    主要内容:SYNACK定时器的实现,TCP_DEFER_ACCPET选项的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 在上一篇博客中,已经连带 ...

  3. angularjs 中的setTimeout(),setInterval() / $interval 和 $timeout

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后 ...

  4. TCP的定时器系列 — 零窗口探测定时器

    主要内容:零窗口探测定时器的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 出现以下情况时,TCP接收方的接收缓冲区将被塞满数据: 发送方的发送速 ...

  5. TCP的定时器系列 — 超时重传定时器

    主要内容:TCP定时器概述,超时重传定时器.ER延迟定时器.PTO定时器的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd Q:一条TCP连接会使用 ...

  6. _ZNote_Qt_定时器的总结

    Qt中实现定时器有两种方法. 一种是使用QObject类定时器;一种是使用QTimer类定时器.(定时器的精度依赖于操作系统和硬件,大多数平台支持20ms) 1,QObject类定时器. 通过QObj ...

  7. cocos2d-js 定时器

    1.scheduleUpdate 节点中有scheduleUpdate接口,通过这个接口,可以让游戏在每帧执行都执行update方法 var ScheduleUpdateLayer = cc.Laye ...

  8. vue+js清除定时器

    注意data数据里面一定要定义Timeout Timeout:Function,//定时器 methods里面 moseovefalse(){//需要执行的方法 var that=this; that ...

  9. EasyMvc入门教程-基本控件说明（2）定时器

    我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...

随机推荐

  1. day4 字符串的使用方法

    一.字符串切片 索引和切片 [起始位置:结束位置:步长] s1 = 'python全栈8期' # 索引从0开始[索引(下标,index)] print(s1[0]) print(s1[3]) prin ...

  2. knit使用安装 ecstore knit位置 及调用路径

    菜鸟一枚,接触php不久. 情况一: 最简单的: windows下, php文件引用kint 将kint放入c盘 php/pear下,我一般将kint包改名字为kint 结构如下: c:/php/pe ...

  3. springmvc 标签

    https://www.baeldung.com/spring-mvc-form-tags     1. Overview In the first article of this series we ...

  4. grid布局笔记

    1.应用 display: grid 的元素.这是所有网格项(Grid Items)的直接父级元素.即容器 2.网格容器(Grid Container)的子元素(直接子元素). 3.注意:在 网格容器 ...

  5. 【Flask】Flask Restful api

    ### 安装: Flask-Restful需要在Flask 0.8以上的版本,在Python2.6或者Python3.3上运行.通过pip install flask-restful即可安装. ### ...

  6. HTML5 SVG世界地图

    在线演示 本地下载

  7. mysql 5.7快速部署

    目录 一:官网下载mysql二级制包.... 1 二:mysql二级制包解压.... 1 三:设置mysql库文件路径与授权... 1 四. 创建配置文件... 2 五:数据库初始化... 5 六: ...

  8. 实验一 Linux初步认识

    遇到的困难和心得体会: 1.在操作过程中,有道作业是建立一个opt/forloutest的文件,而我建立了一个 OPT文件,cd OPT,却显示not a directory,通过阅读<linu ...

  9. 20145201《Java程序设计》第8周学习总结

    20145201 <Java程序设计>第八周学习总结 教材学习内容总结 第十五章 通用API 15.1 日志 15.1.1 日志API简介 java.util.logging包提供了日志功 ...

  10. SpringBoot和Mycat动态数据源项目整合

    SpringBoot项目整合动态数据源(读写分离) 1.配置多个数据源,根据业务需求访问不同的数据,指定对应的策略:增加,删除,修改操作访问对应数据,查询访问对应数据,不同数据库做好的数据一致性的处理 ...