js动画特效

原创于 2021-09-11 11:28:23 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

这篇博客介绍了如何使用JavaScript实现数字滚动动画，当数字滚动到预设的随机值时自动停止。主要涉及DOM操作、定时器setInterval以及clearInterval的使用，为前端界面添加动态显示效果。

实现数字滚动到特定字符停止

    oChai.onclick = function() {
        
        oChai.setAttribute("class", "rotate");
        // 取随机数的函数RandomNum
        var kcnum = getRandomNum(minnum, maxnum);
        setTimeout(function() {
            oContainer.remove();
            showmain.style.display = "";
            dialog.style.display = "";
            debug.style.display = "";
            var n = 0,
            // setInterval是一个定时调用函数，此代码是10ms，直到调用clearinterval结束，用来设置钱数的跳动画面
                t = setInterval(function() {
                    n += 1;
                    n >= kcnum && clearInterval(t);
                    document.getElementById("get_money").innerHTML = n
                    document.getElementById("okok").innerHTML = "￥"+n
                }, 10)
        }, 1600)
    };