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 相关文章推荐
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
js实现放大镜特效
May 18 Javascript
vuex 的简单使用
Mar 22 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
解决layer 动态加载select 失效的问题
Sep 18 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
js实现图片轮播效果
2015/12/19 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Python单链表简单实现代码
2016/04/27 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python实现电脑自动关机
2018/06/20 Python
python实战教程之自动扫雷
2018/07/13 Python
Python占用的内存优化教程
2019/07/28 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Django权限控制的使用
2021/01/07 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
医药代表个人求职信范本
2013/12/19 职场文书
伊索寓言教学反思
2014/05/01 职场文书
人事代理委托书
2014/09/27 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
Java数据结构之堆(优先队列)
2022/05/20 Java/Android