跳到主要內容

AngularJS:$timeout



條款閱讀
...................................................................................................

範例DEMO及程式碼:http://jsbin.com/dayir/3/edit

一、View設計


 
<body  ng-app="timeoutApp" ng-controller="timeoutCtrl" style="background-color:#CCC">
        <div class="isa_info" style="margin-bottom:20px;background-color:white;width: 50%;margin-left: 25%" >
            條款閱讀<br />
            <span ng-repeat="n in []| range:10">
                ...................................................................................................<br />
            </span>

        </div>

        <button id="agreeBtn" class="button blue" ng-click="agree()" style="margin-left: 48%;background-color: #CCC;color:white" ng-init="showText = '同意(10)'" ng-disabled="isEnabled"> {{showText}}</button>
    </body>

(一)利用ng-repeat屬性將內文延展

(二)button部分則使用ng-init來設定初始文字,並設定disabled屬性來使倒數中不能對按鈕進行動做,而當按鈕能點擊時則利用ng-click屬性進行相對應事件。

二、Controller設計

    <script language="javascript">
            var timeoutApp = angular.module('timeoutApp', []).controller('timeoutCtrl', function($scope, $timeout,$window) {
                $scope.counter = 10;
                $scope.isEnabled = true;
                $scope.onTimeout = function() {
                    $scope.counter--;
                    if ($scope.counter <= 0) {
                        $timeout.cancel(mytimeout);
                        $scope.isEnabled = false;
                        $scope.showText = "同意";
                        document.getElementById('agreeBtn').style["background-color"]="#269CE9";                    
                        return;
                    }
                    $scope.showText = "同意(" + $scope.counter + ")";
                    mytimeout = $timeout($scope.onTimeout, 1000);
                };
                var mytimeout = $timeout($scope.onTimeout, 1000);
                
                $scope.agree = function() {
                    alert("謝謝您的使用");
                    $scope.showText = "同意(10)";
                    $scope.counter = 10;
                    $scope.isEnabled = true;
                    document.getElementById('agreeBtn').style["background-color"]="#CCC";    
                    mytimeout = $timeout($scope.onTimeout, 1000);
                };
            });

            timeoutApp.filter('range', function() {
                return function(input, total) {
                    total = parseInt(total);
                    for (var i = 0; i < total; i++)
                        input.push(i);
                    return input;
                };
            });
        </script>

(一)利用$timeout來達成倒數計時功能,且加入判斷條件,當秒數小於等於0時則使按鈕能夠點擊。

三、完整程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>

        <link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/button.css"></link>
        <link rel="stylesheet" href="https://aaad366b26125175724dd9c91cbade0cd1509dd0.googledrive.com/host/0B4GSVRY43FEXeUVOTlZNR0xqUkk/css/barAndInfo.css"></link>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>AngularJS_timeout</title>
        <script language="javascript">
            var timeoutApp = angular.module('timeoutApp', []).controller('timeoutCtrl', function($scope, $timeout,$window) {
                $scope.counter = 10;
                $scope.isEnabled = true;
                $scope.onTimeout = function() {
                    $scope.counter--;
                    if ($scope.counter <= 0) {
                        $timeout.cancel(mytimeout);
                        $scope.isEnabled = false;
                        $scope.showText = "同意";
                        document.getElementById('agreeBtn').style["background-color"]="#269CE9";                    
                        return;
                    }
                    $scope.showText = "同意(" + $scope.counter + ")";
                    mytimeout = $timeout($scope.onTimeout, 1000);
                };
                var mytimeout = $timeout($scope.onTimeout, 1000);
                
                $scope.agree = function() {
                    alert("謝謝您的使用");
                    $scope.showText = "同意(10)";
                    $scope.counter = 10;
                    $scope.isEnabled = true;
                    document.getElementById('agreeBtn').style["background-color"]="#CCC";    
                    mytimeout = $timeout($scope.onTimeout, 1000);
                };
            });

            timeoutApp.filter('range', function() {
                return function(input, total) {
                    total = parseInt(total);
                    for (var i = 0; i < total; i++)
                        input.push(i);
                    return input;
                };
            });
        </script>
    </head>

    <body  ng-app="timeoutApp" ng-controller="timeoutCtrl" style="background-color:#CCC">
        <div class="isa_info" style="margin-bottom:20px;background-color:white;width: 50%;margin-left: 25%" >
            條款閱讀<br />
            <span ng-repeat="n in []| range:10">
                ...................................................................................................<br />
            </span>

        </div>

        <button id="agreeBtn" class="button blue" ng-click="agree()" style="margin-left: 48%;background-color: #CCC;color:white" ng-init="showText = '同意(10)'" ng-disabled="isEnabled"> {{showText}}</button>
    </body>
</html>

留言

這個網誌中的熱門文章

java西元民國轉換_各種不同格式

C#資料庫操作(新增、修改、刪除、查詢)

【Excel好好玩】 自己的資產自己管!善用Google Sheet來幫我們評估貸款

這次介紹的主題是關於Excel的貸款還款計畫試算,我們人生中總會遇到需要大筆金額的花費,但當資金不夠時就得進行貸款,而貸款之前如果我們能夠審慎評估,並分析自己的還款能力之後在進行凍作,相信風險會小很多,因此就自己動動手來使用Google Sheet進行試算吧! 基本資料 ● 貸款總額: 1000000 ● 貸款期數: 84月 ● 年利率: 2.11% ● 月利率: 0.18% P.S 月利率 = 年利率 / 12 重要函式 PMT : 這是Google Sheet內建的重要年金計算公式,我們可以善用這個公式來計算固定利率及期數的固定攤還本息。因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 動手做 首先我們在Excel表上列出我們的基本資料 圖片來源 其中月利率的部分就使用公式「=B4/12」 接著我們填上第一列的期數跟餘額 圖片來源 =B2 =B3 使用關鍵PMT函數來計算本息的部分 因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 -PMT(貸款利率(月利率), 貸款期數, 貸款總額) =-PMT($B$5,$B$3,$B$2) 圖片來源 計算利息 利息 = 貸款餘額 x 月利率 =B8*$B$5 圖片來源 計算本金 本金 = 本息 - 利息 =C8-D8 圖片來源 製作第二列餘額的部分 餘額的部分 = 上一期的餘額 - 上一期的本金 圖片來源 接著拖曳該兩列往下拉,即可查看每一期的利息與本金 圖片來源 結語 雖然市面上已經有很多貸款銀行都提供了試算功能,但如果我們想要進一步管理自己的資產時,就需要將每一期的金額給計算出來,因此才會將公式運用在Excel表,讓我們的資產管理表能夠結合負債,進一步評估我們理財行動的下一步,希望這樣的經驗可以幫助到正在理財道路上打拼的夥伴,讓我們透過有效的管理,幫助荷包長大吧! 喜歡撰寫文章的你,不妨來了解一下: Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入? 歡迎加入一起練習寫作,賺取知識,累積財富!