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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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
YB217、YB235、YB400浅听
2021/03/02 无线电
ZF等常用php框架中存在的问题
2008/01/10 PHP
php仿discuz分页效果代码
2008/10/02 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
php设置编码格式的方法
2013/03/05 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
解决Python一行输出不显示的问题
2018/12/03 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
技校学生个人职业生涯规划范文
2014/03/03 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
新教师培训方案
2014/06/08 职场文书
中职生自荐信范文
2014/06/15 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
党委领导班子整改方案
2014/09/30 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书