编程 Javascript

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程序设计有所帮助。

Angular实现的简单定时器功能示例

- Author -

当爱0201

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery 表单验证类介绍与实例

Jun 09 Javascript

JS定义回车事件(实现代码)

Jul 08 Javascript

当滚动条滚动到页面底部自动加载增加内容的js代码

May 13 Javascript

laytpl 精致巧妙的JavaScript模板引擎

Aug 29 Javascript

javascript加减乘除的简单实例

Jul 12 Javascript

Node.js服务器开启Gzip压缩教程

Aug 11 Javascript

php main 与 iframe 相互通讯类(js+php同域/跨域)

Sep 14 Javascript

(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看

Jan 08 jQuery

vue小白入门教程

Apr 02 Javascript

基于vue中对鼠标划过事件的处理方式详解

Aug 22 Javascript

详解JavaScript原生封装ajax请求和Jquery中的ajax请求

Feb 14 jQuery

如何检查一个对象是否为空

Apr 11 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