简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

Angular怎樣實現定時器效果

php中世界最好的语言
發布： 2018-04-13 13:34:40
原創
2617 人瀏覽過

這次為大家帶來Angular怎樣實現定時器效果，Angular實現定時器效果的注意事項有哪些，下面就是實戰案例，一起來看一下。

這篇文章介紹了Angular實作的簡單定時器功能的實例，分享給有需要的朋友。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> 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。實現了簡單的定時觸發功能。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue怎麼進行ajax請求公共方法

Angular17裡的自訂指令使用詳解

以上是Angular怎樣實現定時器效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
angular 定時器 效果
來源：php.cn
上一篇：JS刪除陣列重複元素有哪些方法 下一篇：vue+swiper如何實現側邊欄選單
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
Angular 7 去除 SCSS 中的重複屬性 AngularSASS(.scss)剝離屬性。如何防止這種情況發生，以便我可以嵌入重複的屬性以實現跨瀏覽器相容性？要複製，請建立一個新的Angular7.2專案{"nam...
來自於 2024-04-04 23:28:54
0
1
1382
Angular應用程式中導入Javascript原型建構函式時拋出錯誤 我有一個Angular應用程序，我試圖在其中導入一個具有構造函數的JS檔。但是當我運行該應用程式時，webpack會拋出錯誤。資產中的Javascript檔：TestService...
來自於 2024-04-04 11:36:15
0
1
288
使用 Ajax 產生內容 - 捲動到 Id 不起作用 我根據透過ajax取得的數據產生頁面內容。我遇到的問題是，當我想滾動到某個ID時，滾動要么不會發生，要么滾動到錯誤的位置。我一直在查看SO問答，但沒有找到任何好的解決方案。很多答案...
來自於 2024-04-04 09:29:39
0
1
397
在 Angular 中建立圓形 SVG 溫度拖曳器？ 這是我嘗試在Angular中創建的圓形拇指拖曳器的靜態演示。它使用rinkle-dashoffset="-260"設定將拇指/拖曳器定位在靠近拇指後面的圓形路徑...
來自於 2024-04-03 09:33:29
0
1
376
Angular：了解文字元素顏色的屬性綁定缺乏反應性 下面是我的.ts文件，import{Component}from'@angular/core';@Component({selector:'app-event-binding',t...
來自於 2024-04-01 17:28:52
0
1
358
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！