Как исправить этот код таймера чтобы работал правильно?
Нужно чтобы после нажатия кнопки, отправились данные из формы, исчезла форма и появился таймер обратного отсчёта!
Но там не отправляется данные из формы.. исправьте пожалуйста я плохо понимаю в коде..
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body, div, button {
display: flex;
}
body {
flex-direction: row;
justify-content: center;
align-items: center;
}
#wrap {
position: relative;
justify-content: center;
flex-basis: 20%;
}
form {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex: 1;
flex-wrap: wrap;
gap: 10px;
}
label {
display: flex;
flex-basis: 30%;
box-sizing: border-box;
}
input {
display: flex;
flex-basis: 60%;
box-sizing: border-box;
}
input:last-child {
cursor: pointer;
}
#timer {
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #fff;
font-size: 2.5rem;
}
.timerShow {
display: flex;
}
.timerHide {
display: none;
}
</style>
</head>
<body>
<div id="wrap">
<form name="form1">
<label for="" id="inpText">Текст:</label>
<input type="text" name="text" id="inpText">
<label for="" id="inpLink">Ссылка:</label>
<input type="text" name="link" id="inpLink">
<input type="submit" name="submit" value="Отправить форму">
</form>
<div id="timer" class="timerHide">00:00</div>
</div>
<script>
function addZero(x){
return (x < 10) ? "0"+x : ""+x;
}
function launchTimer(dateEnd){
if(dateEnd != null && divTimer){
const interval = setInterval(() => {
const currDate = new Date();
const secondsTotal = (dateEnd.getTime() - currDate.getTime()) / 1000;
if(secondsTotal <= 0){
divTimer.className = "timerHide";
localStorage.removeItem("delay");
clearInterval(interval);
}
else{
let minutes = Math.floor(secondsTotal / 60);
let seconds = Math.floor(secondsTotal - (minutes * 60));
divTimer.textContent = addZero(minutes)+":"+addZero(seconds);
}
}, 1000);
}
}
const wrapper = document.getElementById("wrap");
const divTimer = document.getElementById("timer");
const form = document.forms.form1;
const storedDate = localStorage.getItem("delay");
if(storedDate){
let date = new Date(parseInt(storedDate, 10));
if(date){
launchTimer(date);
divTimer.className = "timerShow";
}
else{
divTimer.className = "timerHide";
}
}
else{
divTimer.className = "timerHide";
}
if(wrapper && form){
form.submit.addEventListener("click", async (event) => {
event.preventDefault();
const dateEnd = new Date();
// dateEnd.setHours(dateEnd.getHours() + 1);
dateEnd.setSeconds(dateEnd.getSeconds() + 45); // Для теста
divTimer.className = "timerShow";
localStorage.setItem("delay", dateEnd.getTime().toString());
launchTimer(dateEnd);
try {
const url ="http://awesome.site/api/data";
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Response status: ${response.status}`);
}
const json = await response.json();
} catch (error) {
console.error(error.message);
}
});
}
</script>
</body>
</html>
Код:
<?php
if (isset($_POST['submit'])) {
//Принимаем постовые данные
$text = $_POST['text'];
$link = $_POST['link'];
//формируем строку для записи
$str = $text . '|' . $link . "\r\n";
//открываем файл для записи.Если файл не существует-он будет создан
$fopen = fopen('my.txt', 'a+');
//записываем строку
fputs($fopen, $str);
//удаляет старую строку
$lines = file('my.txt');
unset($lines[0]);
file_put_contents('my.txt', implode('', $lines));
//закрываем файл
fclose($fopen);
//выводим текст
echo "Ссылка добавлена!";
//рефреш на туже страницу
header("refresh: 0; url=http://ссылка страницы");
}
?>
24.07.2024, 09:00
Как исправить этот код таймера?
Похожие темы
