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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
移动端js图片查看器
Nov 17 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
React Native项目框架搭建的一些心得体会
May 28 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 OPCode缓存 APC详细介绍
2010/10/12 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python中logging包的使用总结
2018/02/28 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
对Python w和w+权限的区别详解
2019/01/23 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Django--权限Permissions的例子
2019/08/28 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
培训心得体会
2013/12/29 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书