Alguém sabe como faço para puxar o valor do input data e time pelo botão e jogar o valor pra dentro do new Date() fazendo o contador regressivo pegar
var to = new Date('2022-10-16 23:59');
function update() {
var from = new Date();
diff = to - from;
if (diff > 0) {
var dias = (Math.floor(diff / 1000 / 60 / 60 / 24)),
horas = (Math.floor(diff / 1000 / 60 / 60) % 24),
minutos = (Math.floor(diff / 1000 / 60) % 60),
segundos = (Math.floor(diff / 1000) % 60)
document.querySelector('#dias').innerText = dias
document.querySelector('#horas').innerText = horas
document.querySelector('#minutos').innerText = minutos
document.querySelector('#segundos').innerText = segundos
} else {
clearInterval(interval);
document.querySelector('body').classList.add('alert')
}
}
var interval = setInterval(update, 1000)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background: #303841;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
text-transform: uppercase;
margin-bottom: 2rem;
color: #6441A5;
font-weight: 900;
}
.wrapper {
display: flex;
}
.count-wrapper {
width: 140px;
height: 140px;
background: #f8f9fa;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 .6rem;
}
.meio {
font-weight: 900;
font-size: 4rem;
margin-top: 3%;
color: #6441A5
}
.count-wrapper div {
font-weight: 900;
font-size: 4rem;
color: #6441A5
}
.count-wrapper span {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
padding: .2rem 0;
background: #6441A5;
}
span {
color: #f8f9fa;
}
.alert {
animation: alert 1s linear infinite alternate;
}
@keyframes alert {
0% {
backgrpund: #112
}
100% {
background: #a11;
}
}
input[type="time"] {
position: absolute;
background-color: #6441A5;
padding: 10px;
transform: translate(-50%, -50%);
top: 70%;
left: 52%;
font-family: 'Baloo Da 2';
color: #ffffff;
font-size: 18px;
border: none;
outline: none;
border-radius: 5px;
}
input[type="date"] {
position: absolute;
background-color: #6441A5;
padding: 10px;
transform: translate(-50%, -50%);
top: 70%;
right: 48%;
font-family: 'Baloo Da 2';
color: #ffffff;
font-size: 18px;
border: none;
outline: none;
border-radius: 5px;
}
::-webkit-calendar-picker-indicator {
background-color: #ffffff;
padding: 2px;
cursor: pointer;
border-radius: 2px;
}
button[type="submit"] {
position: absolute;
background-color: #6441A5;
font-family: 'Baloo Da 2';
font-size: 18px;
color: #ffffff;
border: none;
cursor: pointer;
top: 67.7%;
right: 40%;
border-radius: 5px;
padding: 12px;
}
<h1>contagem regressiva para fechar edital </h1>
<div class="wrapper">
<div class="count-wrapper">
<div id="dias">00</div>
<span>DIAS</span>
</div>
<div class="meio">:</div>
<div class="count-wrapper">
<div id="horas">00</div>
<span>HORAS</span>
</div>
<div class="meio">:</div>
<div class="count-wrapper">
<div id="minutos">00</div>
<span>MINUTOS</span>
</div>
<div class="meio">:</div>
<div class="count-wrapper">
<div id="segundos">00</div>
<span>SEGUNDOS</span>
</div>
</div>
<form id="my-form" method="post" action="#">
<input type="date" name="inDate">
<input type="time" name="inTime">
<br><br>
<button type="submit">Iniciar</button>
</form>