<!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. git分支更新代码命令

    第一步: 查看状态  git status 第二步: 全部添加  git add --all 第三步: 再次查看状态  git status 第四步: 提交      git commit -m '备 ...

  2. oracle 创建视图、修改视图、删除视图、利用视图操作基本表

    转:http://blog.sina.com.cn/s/blog_6b58d2fa0100rgvw.html 1.使用create or replace view命令创建视图 语法格式: create ...

  3. JavaScript：确认对话框

    <script type="text/javascript"> function Check() { if (window.confirm('您是否参与抽奖?')) { ...

  4. PAT 天梯赛 L1-021. 重要的话说三遍 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-021 AC代码 #include <iostream> #include <cstdio&g ...

  5. ubuntu 16.04安装navicat for mysql

    下载地址:官网https://www.navicat.com/download 1.下载 navicat120_mysql_en_x64.tar.gz 文件  2.下载后移到/opt/下 3.解压ta ...

  6. Sybase：游标用法以及嵌套用法

    Sybase:游标用法以及嵌套用法 游标示例一: --Sybase游标示例一: create PROCEDURE DBA.p_proc_test() ON EXCEPTION RESUME begin ...

  7. Apache 访问控制

    Apache访问控制 通过设置访问控制,可对网站进行权限管理,提高安全性. 参数介绍 <Directory />: 行为对根目录的限制 Options:允许使用控制目录特征的指令.他们包括 ...

  8. 饭卡管理系统学生E-R图

    - 2 - 1.1 可行性分析 1.1.1 项目背景 近年来学生食堂饭卡的使用给高校餐饮管理带来了一次革命, 从结算方式到账户管理, 从卫生便捷到数据统计等,不仅给就餐者带来了方便,也使餐饮结算手段发 ...

  9. Java Lambda表达

    Java 8 lambda表达式示例 我个人对Java 8发布非常激动,尤其是lambda表达式和流API.越来越多的了解它们,我能写出更干净的代码.虽然一开始并不是这样.第一次看到用lambda表达 ...

  10. MyCat分片集群

    数据库集群会产生的问题: 自增ID问题 数据关联查询问题(水平拆分) 数据同步问题 数据库集群 自动增长id产生重复的话,解决: UUID形式  (没有排序 不是自增) 设置数据库步长 其他方案: r ...