Angular中使用纯JS(不使用jQuery)和CSS实现多位数的数字纵向滚动抽奖(自适应任何屏幕)

本文介绍了一种基于背景位置偏移的抽奖程序设计思路，利用数组存储数字背景位置，通过过渡效果实现数字滚动，最终固定背景位置完成抽奖过程。文章详细解释了如何通过计时器判断抽奖结束，展示了核心代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总体思路

将每个数字的 background-position-y 分别进行设置，用数组进行储存y值，通过 transition 实现数字滚动效果，最终将数字的 background-position-y 固定。

通过计时器不断判断y值是否与最终固定值一致，如果一致说明已抽完奖。

核心代码

$scope.choujiang = function(){
            if(isBegin){
                return false;  //如果已经开始抽奖，则不允许再次点击抽奖
            }else{
                for(i=0;i<3;i++){
                    $scope.bgy[i] = "background-position-y:0%;transition:none";
                }}
            var h = document.documentElement.clientHeight || document.body.clientHeight;//获取窗口高度，用于计算每个数字的高度
            var u = (h-44)*0.2*0.36;  //计算每个数字的实际展示高度
            isBegin = true;
            function startCj(){
            var result = $scope.cjjg.prizeMoney;
            if(result<10){  //补齐数字位数
                var num_arr = [0,0,result];
            }else if(result>=10&&result<100){
                result = result.toString();
                var num_arr = [0,result.substr(0, 1),result.substr(-1)];
            }else{
                var num_arr = (result+'').split('');}  //将三位数字拆为数组
                //获取css属性值
                function GetCurrentStyle (obj, prop) {
                     if (obj.currentStyle) {
                         return obj.currentStyle[prop];
                       }
                        else if (window.getComputedStyle) {
                           propprop = prop.toLowerCase ();
                           return document.defaultView.getComputedStyle (obj,null)[prop];
                        }
                           return null;
                }
            var dd=document.getElementById("num1");
            var ee=document.getElementById("num2");
            var ff=document.getElementById("num3");
            var bgpy = "background-position-y";
            $scope.bgy[0] = bgpy+":"+(u*60 - u*num_arr[0])+"px";
            var getcss = setInterval(function (){
                console.log("1");
                var bpy1 = GetCurrentStyle(dd,bgpy);
                if(bpy1=="0%"){
                    bpy1 = GetCurrentStyle(dd,bgpy);
                }else{
                    $scope.bgy[1] = bgpy+":"+(u*60 - u*num_arr[1])+"px";
                    var bpy2 = GetCurrentStyle(ee,bgpy);
                    if(bpy2=="0%"){
                        bpy2 = GetCurrentStyle(ee,bgpy);
                    }else{
                        $scope.bgy[2] = bgpy+":"+(u*60 - u*num_arr[2])+"px";
                        var bpy3 = GetCurrentStyle(ff,bgpy);
                        if(bpy3=="0%"){
                            bpy3 = GetCurrentStyle(ff,bgpy);
                        }else if(Math.ceil(Number(bpy3.replace("px",""))) == Math.ceil(u*60 - u*num_arr[2])){
                            console.log("2");
                            //当个位数的偏移量与计算所得的偏移量一致时，说明三个数字都已转完，抽奖结束
                            $scope.jieguo = result;
                            $scope.CJJG = true;  //展示抽奖结果页面
                            clearInterval(getcss);  //停止计时器
                        }else{
                            bpy3 = GetCurrentStyle(ff,bgpy);
                        }
                    }
                }},500);