Fatal编程技术网
  • javascript/
  • Javascript 计时器未绑定AngularJS中的DOM值

Javascript 计时器未绑定AngularJS中的DOM值

javascript angularjs recursion timer

Javascript 计时器未绑定AngularJS中的DOM值,javascript,angularjs,recursion,timer,countdown,Javascript,Angularjs,Recursion,Timer,Countdown,我是一名后端开发人员，通过比较两种不同的日期格式，努力制作一个计时器。脚本的这一部分工作得很好，但每当我尝试进行递归调用时，都没有绑定 我几乎尝试了所有方法，从将其传递到函数、使用$interval、setInterval等等。主要原因是我无法获取其循环的值，并且无法绑定到DOM中 这是我的一些代码。这里我设置了countDown（）函数的所有变量 $scope.timer.list = {}; $scope.timer.date = new Date()

我是一名后端开发人员，通过比较两种不同的日期格式，努力制作一个计时器。脚本的这一部分工作得很好，但每当我尝试进行递归调用时，都没有绑定

我几乎尝试了所有方法，从将其传递到函数、使用$interval、setInterval等等。主要原因是我无法获取其循环的值，并且无法绑定到DOM中

这是我的一些代码。这里我设置了countDown（）函数的所有变量

   $scope.timer.list        = {};
    $scope.timer.date       = new Date();
    $scope.timer.list.D     = '00';
    $scope.timer.list.M     = '00';
    $scope.timer.list.Y     = '00';
    $scope.timer.list.h     = '00';
    $scope.timer.list.m     = '00';
    $scope.timer.list.s     = '00';
    $scope.begin            = {};
    $scope.begin.date       = {};
    $scope.begin.timer      = {};
    $scope.counter = {
        show : false,
        text : '00:00'
    };
    setInterval(function() {
        $scope.obj = {
            show : $scope.countDown($scope.privateshowcase.begin_at).show,
            text : $scope.countDown($scope.privateshowcase.begin_at).text
        }
        $scope.counter = $scope.obj;
    }, 1000);

然后，这里是函数：

$scope.countDown = function(begin) {
    $scope.timer.date       = new Date();

    $scope.timer.list.D = $filter('date')($scope.timer.date, 'dd');
    $scope.timer.list.M = $filter('date')($scope.timer.date, 'MM');
    $scope.timer.list.Y = $filter('date')($scope.timer.date, 'yyyy');
    $scope.timer.list.h = $filter('date')($scope.timer.date, 'HH');
    $scope.timer.list.m = $filter('date')($scope.timer.date, 'mm');
    $scope.timer.list.s = $filter('date')($scope.timer.date, 'ss');

    $scope.begin.full = begin.split(" ");
    $scope.begin.date = $scope.begin.full[0].split("-");
    $scope.begin.timer = $scope.begin.full[1].split(":");

    $scope.begin.D = $scope.begin.date[2];
    $scope.begin.M = $scope.begin.date[1];
    $scope.begin.Y = $scope.begin.date[0];
    $scope.begin.h = $scope.begin.timer[0];
    $scope.begin.m = $scope.begin.timer[1];
    $scope.begin.s = $scope.begin.timer[2];

    if($scope.timer.list.Y == $scope.begin.Y) {
        if($scope.timer.list.M == $scope.begin.M) {
            if($scope.timer.list.D == $scope.begin.D) {
                $scope.counter.diff_h = $scope.timer.list.h - $scope.begin.h;
                if($scope.counter.diff_h == 0 || $scope.counter.diff_h == -1) {
                    if($scope.counter.diff_h == 0) {
                        if($scope.timer.list.m > $scope.begin.m) {
                            $scope.counter.show = false;
                            $scope.counter.text = false;
                        } else if ($scope.timer.list.m <= $scope.begin.m) {
                            $scope.counter.show = true;
                            $scope.counter.diff_m = $scope.begin.m - $scope.timer.list.m;
                            if($scope.counter.diff_m <= 30) {
                                $scope.counter.diff_s = 60 - $scope.timer.list.s;
                                if($scope.counter.diff_s == 60) {
                                    $scope.counter.s = "00";
                                    $scope.counter.diff_m_f = $scope.counter.diff_m + 1;
                                } else if($scope.counter.diff_s >= 1 && $scope.counter.diff_s <= 9) {
                                    $scope.counter.s = "0" + $scope.counter.diff_s;
                                    $scope.counter.diff_m_f = $scope.counter.diff_m;
                                } else {
                                    $scope.counter.s = $scope.counter.diff_s;
                                    $scope.counter.diff_m_f = $scope.counter.diff_m;
                                }
                                if($scope.counter.diff_m_f >= 1 && $scope.counter.diff_m_f <= 9) {
                                    $scope.counter.m = "0" + $scope.counter.diff_m_f;
                                } else {
                                    $scope.counter.m = $scope.counter.diff_m_f;
                                }
                            }
                            $scope.counter.text = $scope.counter.m + ":" +$scope.counter.s;

                        } else {
                            $scope.counter.show = false;
                            $scope.counter.text = false;
                        }
                    } else if ($scope.counter.diff_h == -1) {

                        $scope.counter.diff_timer = $scope.timer.m - 60;
                        $scope.counter.diff_m =  $scope.begin.m - $scope.counter.diff_timer;
                        if($scope.counter.diff_m > 30) {
                            $scope.counter.show = false;
                            $scope.counter.text = false; 
                        } else if($scope.counter.diff_m <= 30) {
                            $scope.counter.show = true;
                            $scope.counter.diff_timer_s = $scope.timer.s - 60;
                            if($scope.counter.diff_timer_s == 60) {
                                $scope.counter.s = "00";
                                $scope.counter.m = $scope.counter.diff_m + 1;
                            } else if($scope.counter.s >= 1 && $scope.counter.s <= 9) {
                                $scope.counter.s = "0" + $scope.counter.diff_timer_s;
                                $scope.counter.m = $scope.counter.diff_m;
                            } else {
                                $scope.counter.s = $scope.counter.diff_timer_s;
                                $scope.counter.m = $scope.counter.diff_m;
                            }
                            $scope.counter.text = $scope.counter.m + ":" +$scope.counter.s;
                        } else {
                            $scope.counter.show = false;
                            $scope.counter.text = false;
                        }
                    } else {
                        $scope.counter.show = false;
                        $scope.counter.text = false;
                    }
                } else {
                    $scope.counter.show = false;
                    $scope.counter.text = false;
                }
            } else {
                $scope.counter.show = false;
                $scope.counter.text = false;
            }
        } else {
                $scope.counter.show = false;
                $scope.counter.text = false;
        }
    } else {
        $scope.counter.show = false;
        $scope.counter.text = false;
    }
    return $scope.counter = {
        show : $scope.counter.show,
        text : $scope.counter.text
    };
}

$scope.countDown=函数（开始）{
$scope.timer.date=新日期（）；
$scope.timer.list.D=$filter（'date'）（$scope.timer.date，'dd'）；
$scope.timer.list.M=$filter（'date'）（$scope.timer.date，'MM'）；
$scope.timer.list.Y=$filter（'date'）（$scope.timer.date，'yyyy'）；
$scope.timer.list.h=$filter（'date'）（$scope.timer.date，'HH'）；
$scope.timer.list.m=$filter（'date'）（$scope.timer.date，'mm'）；
$scope.timer.list.s=$filter（'date'）（$scope.timer.date，'ss'）；
$scope.begin.full=begin.split（“”）；
$scope.begin.date=$scope.begin.full[0]。拆分（“-”；
$scope.begin.timer=$scope.begin.full[1]。拆分（“：”；
$scope.begin.D=$scope.begin.date[2]；
$scope.begin.M=$scope.begin.date[1]；
$scope.begin.Y=$scope.begin.date[0]；
$scope.begin.h=$scope.begin.timer[0]；
$scope.begin.m=$scope.begin.timer[1]；
$scope.begin.s=$scope.begin.timer[2]；
if（$scope.timer.list.Y==$scope.begin.Y）{
if（$scope.timer.list.M==$scope.begin.M）{
if（$scope.timer.list.D==$scope.begin.D）{
$scope.counter.diff_h=$scope.timer.list.h-$scope.begin.h；
if（$scope.counter.diff_h==0 | |$scope.counter.diff_h==1）{
如果（$scope.counter.diff_h==0）{
if（$scope.timer.list.m>$scope.begin.m）{
$scope.counter.show=false；
$scope.counter.text=false；

}else if（$scope.timer.list.m我认为你把事情复杂化了一点。我在
angularjs 1.6.0
中提出了一个简单的
倒计时组件（也可以通过angularjs旧版本的指令来实现），它将输入日期与
现在的日期进行比较

只要不破坏日期格式，就可以使用输入和更改日期来查看组件上发生的更改

日期注释：比较日期的简单方法：


var date0 = new Date("2017-09-12T14:45:00.640Z");
var date1 = new Date("2017-09-13T14:45:00.640Z");

var dateDiff = new Date(date1.getTime() - date0.getTime());
// "1970-01-02T00:00:00.000Z"


虽然dateDiff看起来很奇怪，但基本上距离零日期只有一天了
1970-01-01T00:00:00.000Z

有鉴于此，你只需要让angularjs变魔术（或者变戏法）

此外，如果您不想使用javascript的自然形式处理日期，您可以使用它来提供日期和时间实用程序，而不考虑javascript日期陷阱

以下是工作代码：



angular
.module（'应用程序'，[]）
.run（函数（$rootScope）{
$rootScope.countDownToDate=new Date（）.addDays（2）；
})
.component（'倒计时'{
模板：{{$ctrl.timer}日期：“d'days\'hh:mm:ss”}，
绑定：{

致：“我认为你把事情复杂化了一点。我在
angularjs 1.6.0
中提出了一个简单的
倒计时组件（也可以使用angularjs旧版本的指令来完成），它将输入日期与
现在的日期进行比较

只要不破坏日期格式，就可以使用输入和更改日期来查看组件上发生的更改

日期注释：比较日期的简单方法：


var date0 = new Date("2017-09-12T14:45:00.640Z");
var date1 = new Date("2017-09-13T14:45:00.640Z");

var dateDiff = new Date(date1.getTime() - date0.getTime());
// "1970-01-02T00:00:00.000Z"


虽然dateDiff看起来很奇怪，但基本上距离零日期只有一天了
1970-01-01T00:00:00.000Z

有鉴于此，你只需要让angularjs变魔术（或者变戏法）

此外，如果您不想使用javascript的自然形式处理日期，您可以使用它来提供日期和时间实用程序，而不考虑javascript日期陷阱

以下是工作代码：



angular
.module（'应用程序'，[]）
.run（函数（$rootScope）{
$rootScope.countDownToDate=new Date（）.addDays（2）；
})
.component（'倒计时'{
模板：{{$ctrl.timer}日期：“d'days\'hh:mm:ss”}，
绑定：{

to:'你说你“正在努力通过比较两种不同的日期格式来制作计时器。”我不太明白，你的代码对我来说也不容易理解。你能解释一下你的目标是什么吗？这是倒计时，所以脚本正在从API恢复日期（开始：'YYYY/MM/DAY HH:MM:SS'）然后通过浏览器将其与当前返回的日期进行比较。因此，您希望它显示类似于
10:00:00剩余
，然后在一秒钟后更新为
9:59:59剩余
，依此类推。另外，
begin
的格式是什么？它是UTC秒的整数吗？它是人类可读的字符串吗？基本上我返回的是2变量counter.show和counter.text.show是一个布尔值，如果countDown div显示或不显示，它将触发。text是countDown（）结果，类似于'01:19'MM:SS。该函数正在工作，并且只做一些基本的数学运算来获得要显示的正确值。确切地说，and Begin是一个基本的NOW（）SQL return，所以它是这样的字符串'YYYY/MM/DAY HH:MM:SS'，你说你“试图通过比较两种不同的日期格式来制作计时器”。我不太明白，你的代码对我来说不容易理解。你能解释一下你的目标是什么吗？这是一个倒计时，所以脚本正在从API恢复日期（开始：“YYYY/MM/DAY HH:MM:SS”），然后通过浏览器将其与当前返回的日期进行比较。因此，您希望它显示类似于剩余的
10:00:00
，然后在一秒钟后更新为剩余的
9:59:59