基于JS实现01支付后的10秒倒计时

要实现基于JS的10秒倒计时，可以采用以下步骤：

1.在HTML中创建倒计时显示元素

首先，在HTML中创建一个元素用于显示倒计时，例如：

<div id="countdown">10</div>

这是一个div元素，给它一个id，方便在JS中获取并修改其内容。

2.利用JS实现倒计时功能

然后，在JS中获取倒计时元素，并实现倒计时的功能，可以按照以下步骤进行：

• 获取倒计时元素：通过document.getElementById()方法获取上面创建的倒计时元素，例如：

var countdownElement = document.getElementById("countdown");

• 设置倒计时初始值：将倒计时的初始值设置为10，例如：

var countdownNum = 10;
countdownElement.innerHTML = countdownNum;

• 倒计时逻辑：通过setInterval()方法实现每秒更新倒计时元素的倒计时数值，直到倒计时数值为0为止，例如：

var countdownInterval = setInterval(function(){
    countdownNum--;
    countdownElement.innerHTML = countdownNum;
    if(countdownNum === 0){
        clearInterval(countdownInterval);
    }
}, 1000);

这里在倒计时逻辑中包含了一个判断，如果倒计时数值为0，就停止倒计时。到此为止，就完成了基于JS的10秒倒计时功能的实现。

3.示例说明

以下是两个倒计时示例说明：

1. 点击一个按钮开始倒计时：在HTML中创建一个按钮元素，并为其添加一个点击事件，在点击事件函数中执行倒计时逻辑即可，例如：

<button id="start">开始倒计时</button>

var startBtn = document.getElementById("start");
startBtn.addEventListener("click", function(){
    var countdownElement = document.getElementById("countdown");
    var countdownNum = 10;
    countdownElement.innerHTML = countdownNum;
    var countdownInterval = setInterval(function(){
        countdownNum--;
        countdownElement.innerHTML = countdownNum;
        if(countdownNum === 0){
            clearInterval(countdownInterval);
        }
    }, 1000);
});

1. 自动触发倒计时：在页面加载完成后自动触发倒计时，可以采用window.onload事件来实现，例如：

<script>
    window.onload = function(){
        var countdownElement = document.getElementById("countdown");
        var countdownNum = 10;
        countdownElement.innerHTML = countdownNum;
        var countdownInterval = setInterval(function(){
            countdownNum--;
            countdownElement.innerHTML = countdownNum;
            if(countdownNum === 0){
                clearInterval(countdownInterval);
            }
        }, 1000);
    };
</script>

以上是基于JS的10秒倒计时的实现攻略和两个示例说明。