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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 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在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
Javascript变量函数浅析
2011/09/02 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
python的id()函数解密过程
2012/12/25 Python
解读! Python在人工智能中的作用
2017/11/14 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python 变量类型详解
2018/10/10 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
python异常处理和日志处理方式
2019/12/24 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
自主招生教师推荐信
2014/05/10 职场文书
优秀大学生自荐信
2014/06/09 职场文书
地理科学专业自荐信
2014/09/01 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL