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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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中用数组的方法设置cookies
2011/04/21 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
python_mask_array的用法
2020/02/18 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
Ref与out有什么不同
2012/11/24 面试题
材料专业毕业生求职信
2014/02/26 职场文书
绿色环保标语
2014/06/12 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python