jquery - 循环倒数计时器在 IE 中不起作用，但在 chrome 和 firefox 中有效

Question

我有这个简单的倒数计时器，它在 chrome 和 firefox 上运行良好。但它不适用于 IE。我什至在 IE 浏览器中启用了 javascript。有什么我遗漏或需要修复的吗？

我没有看到在 chrome/firefox 上运行有任何问题，但是计时器在 IE 中没有启动

我认为 let displayString = ${seconds < 10 ? '0' : ''}${seconds} 可能是个错误;

<div class="row">
    <div class="col-md-12 text-center">
        <div class="container">
            <div class="circle">
                <svg width="130" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg">
                    <g transform="translate(110,110)">
                        <circle r="100" class="e-c-base" />
                        <g transform="rotate(-90)">
                            <circle r="100" class="e-c-progress" />
                            <g id="e-pointer">
                                <circle cx="100" cy="0" r="8" class="e-c-pointer" />
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
            <div class="controlls">
                <div class="display-remain-time">00:10</div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .container {
        position: relative;
    }

    .seconds-set {
        float: right;
    }

    .controlls {
        position: absolute;
        left: 545px;
        top: 35px;
        text-align: center;
    }

    .display-remain-time {
        font-family: 'Calibri';
        font-weight: 100;
        font-size: 45px;
        /*color: #F7958E;*/
        color: #2f6c98;
        /*margin-left:15px;*/
        margin-top: 0px;
    }

    .e-c-base {
        fill: none;
        stroke: #B6B6B6;
        stroke-width: 4px;
    }

    .e-c-progress {
        fill: none;
        /*stroke: #F7958E;*/
        stroke: #2f6c98;
        stroke-width: 4px;
        transition: stroke-dashoffset 0.7s;
    }

    .e-c-pointer {
        fill: #FFF;
        /*stroke: #F7958E;*/
        stroke: #2f6c98;
        stroke-width: 2px;
    }

    #e-pointer {
        transition: transform 0.7s;
    }
</style>
<script type="text/javascript">
    //circle start
    let progressBar = document.querySelector('.e-c-progress');
    let pointer = document.getElementById('e-pointer');
    let length = Math.PI * 2 * 100;

    progressBar.style.strokeDasharray = length;

    function update(value, timePercent) {
        var offset = -length - length * value / (timePercent);
        progressBar.style.strokeDashoffset = offset;
        pointer.style.transform = `rotate(${360 * value / (timePercent)}deg)`;
    };

    ////circle ends
    const displayOutput = document.querySelector('.display-remain-time');

    let intervalTimer;
    let timeLeft;
    let wholeTime = 0.5 * 20; // manage this to set the whole time
    let isPaused = false;
    let isStarted = false;


    update(wholeTime, wholeTime); //refreshes progress bar
    displayTimeLeft(wholeTime);

    function changeWholeTime(seconds) {
        if ((wholeTime + seconds) > 0) {
            wholeTime += seconds;
            update(wholeTime, wholeTime);
        }
    }

    function timer(seconds) { //counts time, takes seconds
        let remainTime = Date.now() + (seconds * 1000);
        displayTimeLeft(seconds);

        intervalTimer = setInterval(function () {
            timeLeft = Math.round((remainTime - Date.now()) / 1000);
            if (timeLeft < 0) {
                alert("Hello");
                clearInterval(intervalTimer);
                isStarted = false;
                setterBtns.forEach(function (btn) {
                    btn.disabled = false;
                    btn.style.opacity = 1;
                });
                displayTimeLeft(wholeTime);
                return;
            }
            displayTimeLeft(timeLeft);
        }, 1000);
    }
    pauseTimer(this);
    function pauseTimer(event) {
        timer(wholeTime);
        isStarted = true;
    }

    function displayTimeLeft(timeLeft) { //displays time on the input
        let minutes = Math.floor(timeLeft / 60);
        let seconds = timeLeft % 60;
        //let displayString = `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        let displayString = `${seconds < 10 ? '0' : ''}${seconds}`;
        displayOutput.textContent = displayString;
        update(timeLeft, wholeTime);
    }

</script>

倒计时完成后，我只是显示一条警告消息

Answer 1

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>```
    <![endif]-->


try this on head