前端倒计时插件

如何写一个类似京东淘宝商品倒计时插件

在这里插入图片描述

1.首先我们使用的是Angelarjs前端框架:

//当前时间
var now = new Date().getTime();
//结束时间
var endTime = new Date(后端传入该商品的结束时间).getTime();
//倒计时总秒数
$scope.allTime = Math.floor((endTime - now) / 1000);

//开始倒计时
timer = $interval(function () {
    $scope.allSecond--;
    //调用方法把秒数转化为天 小时:分钟:秒格式
    $scope.countDown= change($scope.allTime );
    if ($scope.allTime == 0) {
        //停止计时器
        $interval.cancel(timer);
    }
}, 1000);

//把秒转换为 天小时分钟秒格式  XXX天 
    change= function (allsecond) {
        var days = Math.floor(allsecond / (60 * 60 * 24));//天数
        var hours = Math.floor((allsecond - days * 60 * 60 * 24) / (60 * 60));//小时数
        var minutes = Math.floor((allsecond - days * 60 * 60 * 24 - hours * 60 * 60) / 60);//分钟数
        var seconds = allsecond - days * 60 * 60 * 24 - hours * 60 * 60 - minutes * 60; //秒数
        var timeString = "";
        if (days > 0) {
            timeString = days + "天 ";
        }
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        return timeString + hours + ":" + minutes + ":" + seconds;
}

前端部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<body>
距离结束:{{countDown}}
</body>
</html>

这样一个倒计时的插件就完成了

猜你喜欢