「云之家个性化开发」做个进度条，显示进度，100% 后隐藏

运行效果

相关代码

<script type="text/javascript">
    cf.ready(function () {
        // 测试进度条
        var loadPercent = 0;
        var timer = setInterval(() => {
            loadPercent += 10
            if (loadPercent > 100) {
                clearInterval(timer);
                hideProcessBar()
            } else {
                updateProcess(loadPercent)
            }
        }, 500);

        // 更新进度条进度
        function updateProcess (loadPercent) {
            var progressBar = document.getElementById('progressBar');
            progressBar.querySelector('.progress-value').style.width = loadPercent + '%';
            progressBar.querySelector('.progress-number').textContent = loadPercent + '%';
        }

        // 创建进度条
        function getProcessBarDom () {
            var progressBar = document.createElement('div');
            progressBar.className = 'progress-bar';
            progressBar.id = 'progressBar';
            document.body.appendChild(progressBar);
            var progressValue = document.createElement('div');
            progressValue.className = 'progress-value';
            progressBar.appendChild(progressValue);
            var progressNumber = document.createElement('span');
            progressNumber.className = 'progress-number';
            progressBar.appendChild(progressNumber);
            progressNumber.textContent = '0%';
            return progressBar
        }

        function hideProcessBar () {
            var progressBar = document.getElementById('progressBar');
            progressBar.style.display = "none"
            progressBar.parentNode.removeChild(progressBar)
        }

        // 拿到进度条
        var progressBarDom = getProcessBarDom()

        // 进度条插入到标题后
        cf.insertAfterContainer('_S_TITLE', progressBarDom)
    })

</script>
<style type="text/css">
    .progress-bar {
        height: 3px;
        border-radius: 2px;
        background-color: #d5e2ec;
        width: 200px;
        margin: 4px 0;
        position: relative;
    }

    .progress-value {
        width: 20%;
        border-radius: 3px;
        height: 100%;
        background-color: orange;
    }

    .progress-number {
        position: absolute;
        right: -38px;
        top: 50%;
        margin-top: -8px;
        font-size: 14px;
    }
</style>

说明 sdk支持原生js特性，创建按钮及设置按钮样式均可使用原生js完成

欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！