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+Flash实现访问剪切板操作
Nov 20 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
JavaScript门面模式详解
Oct 19 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
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反射类ReflectionClass用法分析
2016/05/12 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
Vue源码解析之数组变异的实现
2018/12/04 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
详解K-means算法在Python中的实现
2017/12/05 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python随机数函数代码实例解析
2020/02/09 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
干部年终考核评语
2015/01/04 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技