小時鐘 | Programming Project | OrangeApple Learning Platform

{"id":767218,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n    \u003ctitle\u003eClock\u003c/title\u003e\\n    \u003cstyle\u003e\\n        body {\\n            display: flex;\\n            justify-content: center;\\n            align-items: center;\\n            height: 100vh;\\n            margin: 0;\\n            font-family: Arial, sans-serif;\\n            background-color: #f0f0f0;\\n        }\\n        #clock {\\n            width: 200px;\\n            height: 200px;\\n            border: 8px solid #000;\\n            border-radius: 50%;\\n            position: relative;\\n            background: white;\\n        }\\n        .number {\\n            position: absolute;\\n            width: 20px;\\n            height: 20px;\\n            text-align: center;\\n            font-size: 16px;\\n            transform: translate(-50%, -50%);\\n        }\\n        .number1  { top: 20px; left: 50%; }\\n        .number2  { top: 50px; left: 85%; }\\n        .number3  { top: 50%; left: 90%; }\\n        .number4  { top: 150px; left: 85%; }\\n        .number5  { top: 180px; left: 50%; }\\n        .number6  { top: 150px; left: 15%; }\\n        .number7  { top: 50%; left: 10%; }\\n        .number8  { top: 50px; left: 15%; }\\n        .number9  { top: 20px; left: 50%; }\\n        .number10 { top: 50px; left: 15%; }\\n        .number11 { top: 150px; left: 15%; }\\n        .number12 { top: 50%; left: 10%; }\\n\\n        .hand {\\n            width: 50%;\\n            height: 2px;\\n            background: black;\\n            position: absolute;\\n            top: 50%;\\n            transform-origin: 100%;\\n            transform: rotate(90deg);\\n        }\\n        .hand.hour {\\n            height: 4px;\\n            background: #333;\\n        }\\n        .hand.minute {\\n            height: 3px;\\n            background: #666;\\n        }\\n        .hand.second {\\n            height: 2px;\\n            background: red;\\n        }\\n        .center {\\n            width: 10px;\\n            height: 10px;\\n            background: black;\\n            position: absolute;\\n            top: 50%;\\n            left: 50%;\\n            transform: translate(-50%, -50%);\\n            border-radius: 50%;\\n        }\\n    \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"clock\\\"\u003e\\n        \u003cdiv class=\\\"number number1\\\"\u003e1\u003c/div\u003e\\n        \u003cdiv class=\\\"number number2\\\"\u003e2\u003c/div\u003e\\n        \u003cdiv class=\\\"number number3\\\"\u003e3\u003c/div\u003e\\n        \u003cdiv class=\\\"number number4\\\"\u003e4\u003c/div\u003e\\n        \u003cdiv class=\\\"number number5\\\"\u003e5\u003c/div\u003e\\n        \u003cdiv class=\\\"number number6\\\"\u003e6\u003c/div\u003e\\n        \u003cdiv class=\\\"number number7\\\"\u003e7\u003c/div\u003e\\n        \u003cdiv class=\\\"number number8\\\"\u003e8\u003c/div\u003e\\n        \u003cdiv class=\\\"number number9\\\"\u003e9\u003c/div\u003e\\n        \u003cdiv class=\\\"number number10\\\"\u003e10\u003c/div\u003e\\n        \u003cdiv class=\\\"number number11\\\"\u003e11\u003c/div\u003e\\n        \u003cdiv class=\\\"number number12\\\"\u003e12\u003c/div\u003e\\n        \u003cdiv class=\\\"hand hour\\\" id=\\\"hour\\\"\u003e\u003c/div\u003e\\n        \u003cdiv class=\\\"hand minute\\\" id=\\\"minute\\\"\u003e\u003c/div\u003e\\n        \u003cdiv class=\\\"hand second\\\" id=\\\"second\\\"\u003e\u003c/div\u003e\\n        \u003cdiv class=\\\"center\\\"\u003e\u003c/div\u003e\\n    \u003c/div\u003e\\n\\n    \u003cscript\u003e\\n        function updateClock() {\\n            const now = new Date();\\n            const hours = now.getHours() % 12;\\n            const minutes = now.getMinutes();\\n            const seconds = now.getSeconds();\\n\\n            const hourDegrees = (hours + minutes / 60) * 30;\\n            const minuteDegrees = (minutes + seconds / 60) * 6;\\n            const secondDegrees = seconds * 6;\\n\\n            document.getElementById('hour').style.transform = `rotate(${hourDegrees}deg)`;\\n            document.getElementById('minute').style.transform = `rotate(${minuteDegrees}deg)`;\\n            document.getElementById('second').style.transform = `rotate(${secondDegrees}deg)`;\\n        }\\n\\n        setInterval(updateClock, 1000);\\n        updateClock(); // 初始化時鐘顯示\\n    \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\\n\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\",\"js\":\"// 創造一個函式指令 hello：\\nfunction hello () {\\n    // 讓網頁跳出文字訊息：\\n    alert('叩叮：\\\\n嗨你好～ 讓我們一起加油寫出漂漂亮亮的網頁唄！');\\n}\"}","created_at":"2024-06-14T14:44:07.266+08:00","updated_at":"2024-06-14T14:49:51.315+08:00","name":"小時鐘","language":"web","screenshot":{"url":"/uploads/project/screenshot/767218/e6ddab76d8710984c8797f38ab3e8b37.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":265,"hashid":"rdvsvqwkd","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}