Angular实现的简单定时器功能示例


Posted in Javascript onDecember 28, 2017

本文实例讲述了Angular实现的简单定时器功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com Angular定时器</title>
  <script src="angular.min.js"></script>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope,$interval,$timeout) {
      $scope.num=0;
      $scope.fun=function () {
//        $interval(function () {
//          $scope.num++
//        },1000)
//        setInterval(function () {
//          $scope.$apply(function () {
//            $scope.num++;
//            console.log($scope.num)
//          })
//        },1000);
//                $interval(function () {
//
//            $scope.num++;
//            console.log($scope.num);
//
//        },1000,5,false);
        $timeout(function () {
          $scope.num++;
        },1000);
      }
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<p>{{num}}</p>
<button ng-click="fun()">按钮</button>
</body>
</html>

运行代码,点击按钮可见1秒之后按钮上方的数字编程1。实现了简单的定时触发功能。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
vue实现学生信息管理系统
May 30 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 #Javascript
vue+swiper实现侧滑菜单效果
Dec 28 #Javascript
swiper插件自定义切换箭头按钮
Dec 28 #Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 #Javascript
Vue组件通信之Bus的具体使用
Dec 28 #Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 #Javascript
Swiper自定义分页器使用详解
Dec 28 #Javascript
You might like
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
JavaScript this 深入理解
2009/07/30 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python批量赋值操作实例
2018/10/22 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
浅析matlab中imadjust函数
2020/02/27 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
关于赌博的检讨书
2014/01/24 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
培训班通知
2015/04/25 职场文书
2015年科研工作总结范文
2015/05/13 职场文书
党员转正党支部意见
2015/06/02 职场文书
换届选举主持词
2015/07/03 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery