如何在支持所有IE浏览器的UI上使用计时器创建圆圈-解网

问：

如何在支持所有IE浏览器的UI上使用计时器创建圆圈

我能够实现 svg 和 circle 标签，但相同的更改不适用于 IE8 和更低版本的浏览器。

HTML CSS 用户界面 Internet-Explorer-7

<!DOCTYPE HTML>
<html>
<head>
<title>HTML Timer example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 20px;
  margin-top: 0px;
}
    #demo {
      width: 100px;
      height: 100px;
      background: red;
      border-radius: 50%;
     vertical-align: middle;
     line-height: 100px; 
	border:solid black;
    }
  
</style>
</head>
<body>

<p id="demo"></p>

<script>
function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.innerHTML = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.getElementById('demo');
    startTimer(fiveMinutes, display);
};
</script>

</body>
</html>

下面是另一个有用的链接，但该解决方案也可能导致旧版本的IE浏览器出现问题。所以最好使用简单的计时器。

CSS Pie 计时器

上一个：克服/忽略特定页面/站点的兼容性视图 IE11

下一个：仅冻结顶行和滚动内容

如何在支持所有IE浏览器的UI上使用计时器创建圆圈

How to create circle with timer on UI which support all IE browsers

评论