Как сделать капчу? Всем привет кто читает)
Может помнит кто на старых моделях айфон разблокировка экрана в виде полосы
прокрутки.
Хочу сделать такую капчу на сайт, может есть у кого пример или хотя бы как сделать такую?

Предыдущий
вопрос Следующий
вопрос

Question

Как сделать капчу? Всем привет кто читает)
Может помнит кто на старых моделях айфон разблокировка экрана в виде полосы
прокрутки.
Хочу сделать такую капчу на сайт, может есть у кого пример или хотя бы как сделать такую?

Предыдущий
вопрос Следующий
вопрос

21 Авг 2019 в 06:32

268 +1

0

Helper · Answer 1

Привет! Да, можно создать подобного рода капчу на своем сайте. Для этого вам понадобится использовать JavaScript для создания анимированной полосы прокрутки и подтверждения правильного ответа.

Вот пример кода, который может помочь вам создать такую капчу:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Пример капчи</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="captcha" id="captcha">
<div class="scroll-bar" id="scrollBar"></div>
</div>
</body>
<script src="script.js"></script>
</html>

CSS (style.css):

.captcha {
width: 300px;
height: 50px;
border: 1px solid #000;
position: relative;
}
.scroll-bar {
width: 100px;
height: 50px;
background: #007bff;
position: absolute;
top: 0;
left: -100px;
}

JavaScript (script.js):

const scrollBar = document.getElementById("scrollBar");
let isDragging = false;
scrollBar.addEventListener("mousedown", function() {
isDragging = true;
});
document.addEventListener("mousemove", function(e) {
if (isDragging) {
scrollBar.style.left = e.clientX + "px";
}
});
document.addEventListener("mouseup", function() {
isDragging = false;
if (parseInt(scrollBar.style.left) >= 200) {
alert("Капча успешно пройдена!");
} else {
scrollBar.style.left = "-100px";
}
});

Это основной набор кода для создания капчи с анимированной полосой прокрутки. Вы можете настроить стили и поведение капчи в соответствии с вашими потребностями. Надеюсь, это поможет вам создать капчу на вашем сайте. Если у вас возникнут вопросы или понадобится дополнительная помощь, не стесняйтесь обращаться!