« طراحی سایت و گرافیک »

✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: پانزدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me

500 views18:28

This media is not supported in your browser

472 views11:17

✅ آموزش ساخت کپچا ساده با استفاده از جاوااسکریپت 👇👇

<!-- https://yangx.top/Web_Designer98 -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@Web_Designer98</title>
    <style>
      /* https://yangx.top/Web_Designer98 */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        #captcha {
            font-size: 24px;
            margin: 10px;
        }
     /*  https://yangx.top/Web_Designer98 */
    </style>
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
<h2>تأیید کپچا @Web_Designer98</h2>
<div id="captcha"></div>
<input type="text" id="captchaInput" placeholder="کد را وارد کنید">
<button onclick="validateCaptcha()">تأیید</button>
<p id="result"></p>
<!-- https://yangx.top/Web_Designer98 -->
<script>
    //https://yangx.top/Web_Designer98
    function generateCaptcha() {
        const captchaLength = 5;
        let captcha = '';
        for (let i = 0; i < captchaLength; i++) {
            captcha += Math.floor(Math.random() * 10); // تولید اعداد ۰ تا ۹
        }

      //https://yangx.top/Web_Designer98 
 document.getElementById('captcha').textContent = captcha;
        return captcha;
    }

    let generatedCaptcha = generateCaptcha();

    function validateCaptcha() {
        const userInput = document.getElementById('captchaInput').value;
        const result = document.getElementById('result');
        if (userInput === generatedCaptcha) {
            result.textContent = 'کپچا موفقیت آمیز بود! ✅';
        } else {
            result.textContent = 'کپچا ناموفق بود. لطفاً دوباره امتحان کنید. ❌';
            generatedCaptcha = generateCaptcha(); // تولید دوباره کپچا
            document.getElementById('captchaInput').value = ''; // پاک کردن فیلد ورودی
        }
    }
</script>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>

💢 توضیحات:
1⃣ این کد یک کپچا عددی تصادفی ایجاد می‌کند.
2⃣ کاربر باید عدد تولید شده را در فیلد ورودی وارد کند.
3⃣ وقتی کاربر روی دکمه "تأیید" کلیک می‌کند، کپچا بررسی می‌شود و نتیجه نمایش داده می‌شود.
4⃣ اگر کاربر پاسخ نادرستی وارد کند، کپچا به‌طور تصادفی دوباره تولید می‌شود.
#css #html #js

🌈 Web_Designer98.t.me

👍5

599 views11:27

« طراحی سایت و گرافیک » via @chToolsBot

🎁 لیست دوره‌ های آموزشی کانال

547 views15:03