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 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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/12/18 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
php post换行的方法
2020/02/03 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
纯JS实现轮播图
2017/02/22 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
晚会邀请函范文
2014/01/24 职场文书
同学聚会策划方案
2014/06/06 职场文书
比赛口号大全
2014/06/10 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
2014年除四害工作总结
2014/12/06 职场文书
离婚起诉书范本
2015/05/18 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
go原生库的中bytes.Buffer用法
2021/04/25 Golang