1
私は知識の競争をしたいです。私はいくつかのコードを見つけましたが、カウントダウンタイマーはonloadになります。カウントダウンが終了すると別のページにリダイレクトされます。 カウントダウンタイマーの問題
//circle start
let progressBar = document.querySelector('.e-c-progress');
let indicator = document.getElementById('e-indicator');
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')
const pauseBtn = document.getElementById('pause');
const setterBtns = document.querySelectorAll('button[data-setter]');
let intervalTimer;
let timeLeft;
let wholeTime = 1 * 60; // 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);
}
}
for (var i = 0; i < setterBtns.length; i++) {
setterBtns[i].addEventListener("click", function(event) {
var param = this.dataset.setter;
switch (param) {
case 'minutes-plus':
changeWholeTime(1 * 60);
break;
case 'minutes-minus':
changeWholeTime(-1 * 60);
break;
case 'seconds-plus':
changeWholeTime(1);
break;
case 'seconds-minus':
changeWholeTime(-1);
break;
}
displayTimeLeft(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) {
clearInterval(intervalTimer);
isStarted = false;
setterBtns.forEach(function(btn) {
btn.disabled = false;
btn.style.opacity = 1;
});
displayTimeLeft(wholeTime);
pauseBtn.classList.remove('pause');
pauseBtn.classList.add('play');
return;
}
displayTimeLeft(timeLeft);
}, 1000);
}
function pauseTimer(event) {
if (isStarted === false) {
timer(wholeTime);
isStarted = true;
this.classList.remove('play');
this.classList.add('pause');
setterBtns.forEach(function(btn) {
btn.disabled = true;
btn.style.opacity = 0.9;
});
} else if (isPaused) {
this.classList.remove('play');
this.classList.add('pause');
timer(timeLeft);
isPaused = isPaused ? false : true
} else {
this.classList.remove('pause');
this.classList.add('play');
clearInterval(intervalTimer);
isPaused = isPaused ? false : 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}`;
displayOutput.textContent = displayString;
update(timeLeft, wholeTime);
}
pauseBtn.addEventListener('click', pauseTimer);button[data-setter] {
outline: none;
background: transparent;
border: none;
font-family: 'Arial';
font-weight: 300;
font-size: 18px;
width: 25px;
height: 30px;
color: #F7958E;
cursor: pointer;
}
button[data-setter]:hover {
opacity: 0.5;
}
.container {
float: left;
position: relative;
top: 0px;
left: 25px;
width: 300px;
margin: 0 auto;
}
.sidebar {
float: right;
position: relative;
top: 0px;
width: 50%;
margin: 0 left;
font-family: 'Arial';
font-weight: 100;
font-size: 35px;
color: #430000;
}
.setters {
position: absolute;
left: 0px;
top: 75px;
}
.minutes-set {
float: left;
margin-right: 28px;
}
.seconds-set {
float: right;
}
.controlls {
position: absolute;
left: 75px;
top: 105px;
text-align: center;
}
.display-remain-time {
font-family: 'Roboto';
font-weight: 100;
font-size: 65px;
color: #430000;
}
#pause {
outline: none;
background: transparent;
border: none;
margin-top: 10px;
width: 50px;
height: 50px;
position: relative;
}
.play::before {
display: block;
content: "";
position: absolute;
top: 8px;
left: 16px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 22px solid #F7958E;
}
.pause::after {
content: "";
position: absolute;
top: 8px;
left: 12px;
width: 15px;
height: 30px;
background-color: transparent;
border-radius: 1px;
border: 5px solid #F7958E;
border-top: none;
border-bottom: none;
}
#pause:hover {
opacity: 0.8;
}
.e-c-base {
fill: none;
stroke: #B6B6B6;
stroke-width: 4px
}
.e-c-progress {
fill: none;
stroke: #004eb7;
stroke-width: 4px;
transition: stroke-dashoffset 0.7s;
}
.e-c-pointer {
fill: #ff6000;
stroke: #024078;
stroke-width: 3px;
}
#e-pointer {
transition: transform 0.7s;
}
h1 {
margin-top: 50px;
text-align: center;
}
body {
background-color: #f7f7f7;
}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Biz Biliriz</title>
</head>
<body>
<h1>Question 1</h1>
<div class="container">
<div class="setters">
<div class="minutes-set">
</div>
<div class="seconds-set">
</div>
</div>
<div class="circle"> <svg width="300" viewBox="0 0 220 220">
<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">01:00</div>
<button class="play" id="pause"></button>
</div>
</div>
<div class="sidebar">
<div class="setters">
<p>Test Question</p>
</div>
</div>私は知識の競争を作りたいです。私はいくつかのコードを見つけましたが、カウントダウンタイマーはオンロードを開始できず、カウントダウンが終了して別のページにリダイレクトされました。私は助けが必要です。 THX
あなたは
bodyのonloadプロパティを使用してそれを行うことができますどの部分で問題がありますか？ソースコードを見つけることは良いことですが、重要なのはそれを理解して目的に合わせて必要な変更を加えることです。これは無料のライティングサービスではないので、あなたがそれを学んだり理解したり、開発者を雇う時間を取ることをお勧めします。 – NewToJS