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

bash 复制代码
<!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>
相关推荐
crary,记忆1 分钟前
Angular如何让整个项目的所有页面能够整体缩小一定的比例?
javascript·ecmascript·angular.js
Mintopia16 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
江城开朗的豌豆28 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
你的电影很有趣32 分钟前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
江城开朗的豌豆33 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..34 分钟前
VUE工程化开发模式
前端·javascript·vue.js
Moment1 小时前
快手前端校招一面面经 🤔🤔🤔
前端·javascript·面试
掘根1 小时前
【Protobuf】proto3语法详解1
开发语言·前端·javascript
艾小码1 小时前
从入门到精通:JavaScript异步编程避坑指南
前端·javascript
昔人'4 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html