martindeboer1988
Gebruiker
- Lid geworden
- 5 nov 2016
- Berichten
- 93
Ik heb dit script en deze laat een timer lopen aan de hand van de variabelen die extern erin gezet worden.
Nu wil ik graag weten hoe ik het zo kan maken dat in plaats van de tekst finished de timer nog een keer loopt.
Nu wil ik graag weten hoe ik het zo kan maken dat in plaats van de tekst finished de timer nog een keer loopt.
Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Title</title>
<style>body{font-family:-apple-system,system-ui;background:#fff;color:#000;margin:30px;text-align:center}textarea,input{border:none;width:100%;display:block;font-size:16px;padding:15px;border-radius:7px;box-sizing:border-box}h1{margin:0;font-size:27px}section{max-width:450px;margin:auto;overflow:auto}.sectionbody{margin:30px 0;word-break:break-word}.encode{margin:60px 0}input[type="file"]{display:none}input{padding:0 15px}label,button{-webkit-user-select:none;display:block;text-align:center;width:100%;font-size:18px;font-weight:700;padding:13px 0;color:#fff;background:#0000;border:none;border-radius:7px;cursor:pointer}.password{font-weight:600;width:100%;height:40px;margin:20px 0}.message{font-weight:600;width:100%;height:240px;margin:0;-webkit-appearance:none;display:block;resize:none}.hiddenmessage{font-size:21px;margin-top:30px;font-weight:700}.preview{width:100%}.hide{display:none}#output[src]{margin-bottom:1em;width:100%}</style>
</head>
<body>
<section>
<h1></h1>
<div class="sectionbody"><body>
<h1>Title</h1>
<p></p>
<p>________________</p>
<h1>
<!-- Display the countdown timer in an element --> <p id="countdown">Calculating...</p> <script> // Set the date we're counting down to var countDownDate = new Date("Month Day, Year Time").getTime();
function pluralize(value, label) {
if (value === "1" || value === 1) {
return label;
} else if (value != "1" && value != 1) {
return label + "s";
}
};
function hideIfZero(output, value) {
if (value == 0) {
return "";
} else {
return output;
}
};
function updateCountdown() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date in seconds var distance = (countDownDate - now) / 1000;
// Time calculations for years, months, days, hours, minutes and seconds // Assumes months are 4 weeks. This is not a true calculation, just an approximation.
var months = Math.floor((distance / (60 * 60 * 24) / 7) / 4); var weeks = Math.floor((distance / (60 * 60 * 24) / 7) % 4); var days = Math.floor((distance / (60 * 60 * 24)) % 7); var hours = Math.floor((distance % (60 * 60 * 24)) / (60 * 60)); var minutes = Math.floor((distance % (60 * 60)) / (60)); var seconds = Math.floor(distance % 60);
// Use the pluralize function to determine if the label should be plural and create an item to display the number and label together var monthsDiv = `${months} ${pluralize(months, 'month')}<br>`; var secondsDiv = `${seconds} ${pluralize(seconds, 'second')}<br>`; var minutesDiv = `${minutes} ${pluralize(minutes, 'minute')}<br>`; var hoursDiv = `${hours} ${pluralize(hours, 'hour')}<br>`; var daysDiv = `${days} ${pluralize(days, 'day')}<br>`; var weeksDiv = `${weeks} ${pluralize(weeks, 'week')}<br>`;
// Display the items in the element with id="countdown" only if they contain a non-zero number (except seconds) document.getElementById("countdown").innerHTML = `${hideIfZero(monthsDiv, months)}${hideIfZero(weeksDiv, weeks)}${hideIfZero(daysDiv, days)}${hideIfZero(hoursDiv, hours)}${hideIfZero(minutesDiv, minutes)}${hideIfZero(secondsDiv, seconds)}`;
// If the count down is finished, write some text if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "FINISHED"; } }
// Load the countdown as soon as the page loads window.onload = updateCountdown();
// Update the count down every 1 second
var x = setInterval(updateCountdown, 1000); </script> </h1>
</body>
</html>
