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类,兼容IE及Firefox
Jun 23 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
js实现抽奖效果
Mar 27 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 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
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
python构建自定义回调函数详解
2017/06/20 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
应征英语教师求职信
2013/11/27 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
作息时间调整通知
2015/04/22 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python