我有一个简单的倒计时计时器,它在Chrome和Firefox上非常有效。但这对IE不起作用。我甚至在IE浏览器中启用了JavaScript。我缺少什么或需要修复吗?
我看不到在chrome/firefox上运行的任何问题,但计时器不在IE
中开始我认为这可能是一个错误,让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>
倒计时完成后,我只是显示警报消息
<!-- 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