实现翻牌器翻转特效——原生html,css,js以及原生ajax请求数据

1.效果图

翻转前效果

翻转后效果

HTML

<div id="flip-container">
                            <div id="digit-1" class="digit">0</div>
                            <div id="digit-2" class="digit">0</div>
                            <div id="digit-3" class="digit">0</div>
                            <div id="digit-4" class="digit">0</div>
                            <div id="digit-5" class="digit" style="display: none;">0</div>
                        
                        </div>
                        <div class="info-title">当日收货量（kg）</div>

<script>
    const dig5 = document.getElementById('digit-5')
    // 使用 AJAX 获取数据
    function fetchData () {
        var data1 = 0
        $.ajax({
            url: 'http://ckt.ck9696.com/api/domesticStatistical/getCount',
            type: 'get',
            dataType: 'json',
            contentType: 'application/json',
            async: false,  //同步ajax，默认为true,异步ajax
            success: function (data) {
                data1 = parseInt(data.data.todayTotalWeight)
            }
        });
        // 这里假设你已经有了一个用来获取数据的 AJAX 函数
        // ajaxGet('url', function (data) {
        // 假设 data 是从后端获取的数字数据，比如 '1234'

        // 将后端返回的number转换为数组形式
        data1 = digitize(data1)
        // 根据数字的位数，动态调整容器宽度
        // document.getElementById('flip-container').style.width = (data1.length * 60) + 'px';
        // 根据数组长度来渲染几个方格
        if (data1.length == 4) {

        } else if (data1.length == 5) {
            dig5.style.display = 'block'
        }
        // 遍历每一位数字
        for (var i = 0; i < data1.length; i++) {
            var digitElement = document.getElementById('digit-' + (i + 1));
            var currentDigit = parseInt(digitElement.innerText);
            var newDigit = parseInt(data1[i]);

            // 如果当前数字和新数字不相等，则翻转数字
            if (currentDigit !== newDigit) {

                digitElement.classList.add('flipped');

                // 使用 setTimeout 延迟恢复正常状态，等待翻转动画完成
                (function (element, digit) {
                    setTimeout(function () {
                        element.innerText = digit;
                        element.classList.remove('flipped');
                    }, 500);
                })(digitElement, newDigit);
            }
        }
    }
    setInterval(() => {
        fetchData()
    }, 2000);
    // 将后端返回的number数字分割为数组格式
    function digitize (n) {  //接受一个number类参数，拆分成一个数组并返回
        var str = n + "";    //加上空字符中，把接收的参数转换为字符串
        var arr = [];         //声明结果空数组，稍后返回
        str.split("").forEach(function (item) {   //调用split，以空字符串为分隔符切割字符串并返回数组，在数组上调用forEach方法
            arr.push(parseInt(item));    //对传入的每个字符用pasreInt转换为数字并压入arr数组
        })
        return arr;  //返回结果数组
    }

</script>

css

/* 翻牌特效css */
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        #flip-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            margin-left: 8px;
        }

        .digit {
            width: 15px;
            height: 33px;
            background-color: #1488CC;
            color: #00FFFF;
            font-size: 20px;
            text-align: center;
            transform-style: preserve-3d;
            perspective: 1000px;
            margin-left: 5px;
            transition: transform 1s ease-in-out;
            border-radius: 2.5696px;
            line-height: 33px;
        }

        .digit.flipped {
            transform: rotateX(180deg);
        }