新奇验证码之读数闹钟，6

最新推荐文章于 2024-11-04 14:16:34 发布

就叫飞六吧

最新推荐文章于 2024-11-04 14:16:34 发布

阅读量447

点赞数 4

文章标签： css javascript css3

本文链接：https://blog.csdn.net/weixin_52236586/article/details/142696439

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock CAPTCHA with Whole and Half Hours</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        .clock {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 50%;
            position: relative;
            margin: 20px auto;
        }
        .hand {
            background: black;
            position: absolute;
            transform-origin: bottom center;
        }
        .hour {
            width: 6px;
            height: 60px;
            top: 40px;
            left: 97px;
        }
        .minute {
            width: 4px;
            height: 80px;
            top: 20px;
            left: 98px;
        }
        .number {
            position: absolute;
            font-size: 18px;
            font-weight: bold;
        }
        input, button {
            margin: 10px 0;
            padding: 5px;
        }
        #message {
            margin-top: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="container">
    <h2>时钟验证码</h2>
    <div class="clock" id="clock">
        <div class="hand hour" id="hourHand"></div>
        <div class="hand minute" id="minuteHand"></div>
        <!-- Clock numbers will be added here by JavaScript -->
    </div>
    <input type="text" id="timeInput" placeholder="请输入时间 (HH:MM)">
    <button onclick="checkTime()">确定</button>
    <button onclick="generateRandomTime()">换验证码</button>
    <div id="message"></div>
</div>

<script>
    let currentTime = { hours: 0, minutes: 0 };

    function setClockHands(hours, minutes) {
        const hourHand = document.getElementById('hourHand');
        const minuteHand = document.getElementById('minuteHand');
        const hourDegrees = (hours % 12 + minutes / 60) * 30;
        const minuteDegrees = minutes * 6;

        hourHand.style.transform = `rotate(${hourDegrees}deg)`;
        minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
    }

    function addClockNumbers() {
        const clock = document.getElementById('clock');
        for (let i = 1; i <= 12; i++) {
            const number = document.createElement('div');
            number.className = 'number';
            number.textContent = i;
            const angle = (i - 3) * 30 * (Math.PI / 180);
            const x = 90 + 80 * Math.cos(angle);
            const y = 90 + 80 * Math.sin(angle);
            number.style.left = `${x}px`;
            number.style.top = `${y}px`;
            clock.appendChild(number);
        }
    }

    function generateRandomTime() {
        const hours = Math.floor(Math.random() * 12) + 1; // 1 to 12
        const minutes = Math.random() < 0.5 ? 0 : 30; // Only 0 or 30 minutes
        currentTime = { hours, minutes };
        setClockHands(hours, minutes);
        document.getElementById('timeInput').value = '';
        document.getElementById('message').textContent = '';
    }

    function checkTime() {
        const input = document.getElementById('timeInput').value;
        const [inputHours, inputMinutes] = input.split(':').map(Number);
        const correctTime = `${String(currentTime.hours).padStart(2, '0')}:${String(currentTime.minutes).padStart(2, '0')}`;

        if (inputHours === currentTime.hours && inputMinutes === currentTime.minutes) {
            document.getElementById('message').textContent = '验证通过！';
            document.getElementById('message').style.color = 'green';
        } else {
            document.getElementById('message').textContent = '时间不正确，请重试。';
            document.getElementById('message').style.color = 'red';
        }
    }

    // 初始化时钟
    addClockNumbers();
    generateRandomTime();
</script>
</body>
</html>