{"id":44865,"date":"2026-03-25T09:34:58","date_gmt":"2026-03-25T01:34:58","guid":{"rendered":"https:\/\/www.qiusir.com\/?p=44865"},"modified":"2026-04-03T11:44:24","modified_gmt":"2026-04-03T03:44:24","slug":"qiutopia%e5%8c%80%e5%8f%98%e9%80%9f%e7%9b%b4%e7%ba%bf%e8%bf%90%e5%8a%a8%e5%9b%be%e5%83%8f","status":"publish","type":"post","link":"https:\/\/www.qiusir.com\/?p=44865","title":{"rendered":"qiutopIA\u5300\u53d8\u901f\u76f4\u7ebf\u8fd0\u52a8\u56fe\u50cf"},"content":{"rendered":"\r\n<div id=\"qiusir-wrapper-v6\" style=\"\r\n    width: 100%; \r\n    max-width: 580px; \r\n    margin: 20px auto; \r\n    background: #ffffff; \r\n    border: 1px solid #e2e8f0; \r\n    border-radius: 10px; \r\n    padding: 15px; \r\n    font-family: sans-serif; \r\n    box-sizing: border-box !important; \r\n    color: #1e293b; \r\n    line-height: 1.5;\">\r\n\r\n    <div style=\"display: flex; flex-direction: column; gap: 25px;\">\r\n        \r\n        <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\r\n            <div style=\"flex: 0 0 45px; display: flex; flex-direction: column; align-items: center; background: #fff5f5; padding: 6px 0; border-radius: 6px; border: 1px solid #fee2e2;\">\r\n                <span style=\"font-size: 11px; font-weight: bold; color: #ef4444; margin-bottom: 5px;\">a<\/span>\r\n                <input type=\"range\" id=\"q6-a\" min=\"-4\" max=\"4\" step=\"0.1\" value=\"1.5\" style=\"writing-mode: bt-lr; appearance: slider-vertical; width: 6px; height: 70px; cursor: pointer;\">\r\n                <span id=\"q6-a-v\" style=\"font-size: 11px; font-family: monospace; font-weight: bold; color: #b91c1c; margin-top: 5px;\">1.5<\/span>\r\n            <\/div>\r\n            <div style=\"flex: 1; min-width: 0;\">\r\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;\">\r\n                    <span style=\"font-size: 11px; font-weight: bold; color: #94a3b8;\">$a-t$ (m\/s\u00b2)<\/span>\r\n                    <span id=\"q6-dv\" style=\"font-size: 11px; font-family: monospace; color: #ef4444; background: #fee2e2; padding: 1px 5px; border-radius: 3px;\">\u0394v: 0.0<\/span>\r\n                <\/div>\r\n                <canvas id=\"qc-a\" style=\"width: 100%; height: 80px; border-bottom: 1px solid #f1f5f9; display: block;\"><\/canvas>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\r\n            <div style=\"flex: 0 0 45px; display: flex; flex-direction: column; align-items: center; background: #eff6ff; padding: 6px 0; border-radius: 6px; border: 1px solid #dbeafe;\">\r\n                <span style=\"font-size: 11px; font-weight: bold; color: #3b82f6; margin-bottom: 5px;\">v\u2080<\/span>\r\n                <input type=\"range\" id=\"q6-v0\" min=\"-10\" max=\"10\" step=\"1\" value=\"2\" style=\"writing-mode: bt-lr; appearance: slider-vertical; width: 6px; height: 90px; cursor: pointer;\">\r\n                <span id=\"q6-v0-v\" style=\"font-size: 11px; font-family: monospace; font-weight: bold; color: #1d4ed8; margin-top: 5px;\">2<\/span>\r\n            <\/div>\r\n            <div style=\"flex: 1; min-width: 0;\">\r\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;\">\r\n                    <span style=\"font-size: 11px; font-weight: bold; color: #94a3b8;\">$v-t$ (m\/s)<\/span>\r\n                    <span id=\"q6-sv\" style=\"font-size: 11px; font-family: monospace; color: #3b82f6; background: #dbeafe; padding: 1px 5px; border-radius: 3px;\">v: 0.0<\/span>\r\n                <\/div>\r\n                <canvas id=\"qc-v\" style=\"width: 100%; height: 110px; border-bottom: 1px solid #f1f5f9; display: block;\"><\/canvas>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div style=\"display: flex; align-items: flex-start; gap: 12px;\">\r\n            <div style=\"flex: 0 0 45px; display: flex; flex-direction: column; align-items: center; background: #ecfdf5; padding: 6px 0; border-radius: 6px; border: 1px solid #d1fae5;\">\r\n                <span style=\"font-size: 11px; font-weight: bold; color: #10b981; margin-bottom: 5px;\">t<\/span>\r\n                <input type=\"range\" id=\"q6-t\" min=\"0\" max=\"10\" step=\"0.1\" value=\"6.0\" style=\"writing-mode: bt-lr; appearance: slider-vertical; width: 6px; height: 90px; cursor: pointer;\">\r\n                <span id=\"q6-t-v\" style=\"font-size: 11px; font-family: monospace; font-weight: bold; color: #047857; margin-top: 5px;\">6.0s<\/span>\r\n            <\/div>\r\n            <div style=\"flex: 1; min-width: 0;\">\r\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;\">\r\n                    <span style=\"font-size: 11px; font-weight: bold; color: #94a3b8;\">$s-t$ (m)<\/span>\r\n                    <span id=\"q6-ss\" style=\"font-size: 11px; font-family: monospace; color: #10b981; background: #d1fae5; padding: 1px 5px; border-radius: 3px;\">s: 0.0<\/span>\r\n                <\/div>\r\n                <canvas id=\"qc-s\" style=\"width: 100%; height: 110px; border-bottom: 1px solid #f1f5f9; display: block;\"><\/canvas>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    (function() {\r\n        const root = document.getElementById('qiusir-wrapper-v6');\r\n        const get = (id) => root.querySelector('#' + id);\r\n        \r\n        const ctrl = { a: get('q6-a'), v0: get('q6-v0'), t: get('q6-t') };\r\n        const txt = { a: get('q6-a-v'), v0: get('q6-v0-v'), t: get('q6-t-v'), dv: get('q6-dv'), v: get('q6-sv'), s: get('q6-ss') };\r\n        const can = { a: get('qc-a'), v: get('qc-v'), s: get('qc-s') };\r\n        const ctx = { a: can.a.getContext('2d'), v: can.v.getContext('2d'), s: can.s.getContext('2d') };\r\n\r\n        function draw() {\r\n            const a = parseFloat(ctrl.a.value);\r\n            const v0 = parseFloat(ctrl.v0.value);\r\n            const t = parseFloat(ctrl.t.value);\r\n\r\n            txt.a.innerText = a.toFixed(1);\r\n            txt.v0.innerText = v0;\r\n            txt.t.innerText = t.toFixed(1) + \"s\";\r\n\r\n            const vt = v0 + a * t;\r\n            const st = v0 * t + 0.5 * a * t * t;\r\n\r\n            txt.dv.innerText = \"\u0394v: \" + (a * t).toFixed(1);\r\n            txt.v.innerText = \"v: \" + vt.toFixed(1);\r\n            txt.s.innerText = \"s: \" + st.toFixed(1);\r\n\r\n            const ratio = window.devicePixelRatio || 1;\r\n\r\n            \/\/ \u5173\u952e\uff1a\u57fa\u4e8e clientWidth \u7ed8\u56fe\uff0c\u4f46\u9ad8\u5ea6\u7edd\u5bf9\u9501\u5b9a\r\n            Object.keys(can).forEach(k => {\r\n                const c = can[k];\r\n                const w = c.clientWidth;\r\n                const h = (k === 'a') ? 80 : 110; \/\/ \u5bf9\u5e94 CSS \u4e2d\u5199\u6b7b\u7684\u9ad8\u5ea6\r\n                if (w > 0) {\r\n                    if (c.width !== w * ratio) {\r\n                        c.width = w * ratio;\r\n                        c.height = h * ratio;\r\n                    }\r\n                }\r\n            });\r\n\r\n            renderA(a, t, ratio);\r\n            renderV(a, v0, t, vt, ratio);\r\n            renderS(a, v0, t, st, vt, ratio);\r\n        }\r\n\r\n        function grid(p, ymin, ymax, time, r) {\r\n            const w = p.can.width, h = p.can.height;\r\n            p.ctx.clearRect(0, 0, w, h);\r\n            const zy = h - (0 - ymin) \/ (ymax - ymin) * h;\r\n            p.ctx.strokeStyle = '#f1f5f9'; p.ctx.lineWidth = 2 * r;\r\n            p.ctx.setLineDash([]);\r\n            p.ctx.beginPath(); p.ctx.moveTo(0, zy); p.ctx.lineTo(w, zy); p.ctx.stroke();\r\n            const tx = (time \/ 10) * w;\r\n            p.ctx.strokeStyle = '#fbbf24'; p.ctx.setLineDash([8 * r, 8 * r]);\r\n            p.ctx.beginPath(); p.ctx.moveTo(tx, 0); p.ctx.lineTo(tx, h); p.ctx.stroke();\r\n            p.ctx.setLineDash([]);\r\n        }\r\n\r\n        function renderA(a, t, r) {\r\n            const min = -5, max = 5, w = can.a.width, h = can.a.height, cx = ctx.a;\r\n            grid({can: can.a, ctx: cx}, min, max, t, r);\r\n            const ay = h - (a - min) \/ (max - min) * h;\r\n            const zy = h - (0 - min) \/ (max - min) * h;\r\n            cx.fillStyle = 'rgba(239, 68, 68, 0.1)';\r\n            cx.fillRect(0, Math.min(ay, zy), (t\/10)*w, Math.abs(ay - zy));\r\n            cx.strokeStyle = '#ef4444'; cx.lineWidth = 5 * r;\r\n            cx.beginPath(); cx.moveTo(0, ay); cx.lineTo(w, ay); cx.stroke();\r\n            mark(cx, (t\/10)*w, ay, a.toFixed(1), \"#ef4444\", null, r);\r\n        }\r\n\r\n        function renderV(a, v0, t, vt, r) {\r\n            const ve = v0 + a * 10;\r\n            const min = Math.min(v0, ve, -5) - 5, max = Math.max(v0, ve, 5) + 5;\r\n            const w = can.v.width, h = can.v.height, cx = ctx.v;\r\n            grid({can: can.v, ctx: cx}, min, max, t, r);\r\n            const tx = (t\/10)*w, ty = h - (vt - min) \/ (max - min) * h, zy = h - (0 - min) \/ (max - min) * h;\r\n            cx.fillStyle = 'rgba(59, 130, 246, 0.1)';\r\n            cx.beginPath(); cx.moveTo(0, zy);\r\n            for(let i=0; i<=t; i+=0.1) { cx.lineTo((i\/10)*w, h - (v0 + a*i - min)\/(max-min)*h); }\r\n            cx.lineTo(tx, zy); cx.fill();\r\n            cx.strokeStyle = '#3b82f6'; cx.lineWidth = 4 * r;\r\n            cx.beginPath(); cx.moveTo(0, h - (v0-min)\/(max-min)*h); cx.lineTo(w, h - (ve-min)\/(max-min)*h); cx.stroke();\r\n            tang(cx, tx, ty, a, (max-min), w, h, r);\r\n            mark(cx, tx, ty, vt.toFixed(1), \"#3b82f6\", \"k=\" + a.toFixed(1), r);\r\n        }\r\n\r\n        function renderS(a, v0, t, st, vt, r) {\r\n            let pts = []; for(let i=0; i<=100; i++) { let ti = i\/10; pts.push(v0*ti + 0.5*a*ti*ti); }\r\n            const min = Math.min(...pts, -10) - 10, max = Math.max(...pts, 10) + 10;\r\n            const w = can.s.width, h = can.s.height, cx = ctx.s;\r\n            grid({can: can.s, ctx: cx}, min, max, t, r);\r\n            cx.strokeStyle = '#10b981'; cx.lineWidth = 4 * r;\r\n            cx.beginPath();\r\n            pts.forEach((s, i) => { const x = (i\/100)*w, y = h - (s-min)\/(max-min)*h; if(i === 0) cx.moveTo(x, y); else cx.lineTo(x, y); });\r\n            cx.stroke();\r\n            const tx = (t\/10)*w, ty = h - (st-min)\/(max-min)*h;\r\n            tang(cx, tx, ty, vt, (max-min), w, h, r);\r\n            mark(cx, tx, ty, st.toFixed(1), \"#10b981\", \"k=\" + vt.toFixed(1), r);\r\n        }\r\n\r\n        function mark(cx, x, y, val, col, k, r) {\r\n            cx.fillStyle = '#fff'; cx.beginPath(); cx.arc(x, y, 6 * r, 0, 7); cx.fill();\r\n            cx.strokeStyle = col; cx.lineWidth = 2 * r; cx.beginPath(); cx.arc(x, y, 5 * r, 0, 7); cx.stroke();\r\n            cx.fillStyle = col; cx.font = \"bold \" + (12 * r) + \"px monospace\";\r\n            cx.fillText(val, x + 8 * r, y - 6 * r);\r\n            if(k) {\r\n                cx.fillStyle = \"#f97316\"; cx.font = \"bold \" + (10 * r) + \"px sans-serif\";\r\n                cx.fillText(k, x + 8 * r, y + 14 * r);\r\n            }\r\n        }\r\n\r\n        function tang(cx, x, y, k, yr, w, h, r) {\r\n            const pk = -(k * (h \/ yr)) \/ (w \/ 10);\r\n            const l = 50 * r; cx.strokeStyle = '#f97316'; cx.lineWidth = 2 * r; cx.setLineDash([5*r, 4*r]);\r\n            cx.beginPath(); cx.moveTo(x - l, y - l * pk); cx.lineTo(x + l, y + l * pk); cx.stroke();\r\n            cx.setLineDash([]);\r\n        }\r\n\r\n        ctrl.a.oninput = ctrl.v0.oninput = ctrl.t.oninput = draw;\r\n        window.addEventListener('resize', draw);\r\n        setTimeout(draw, 100);\r\n    })();\r\n    <\/script>\r\n<\/div>\r\n","protected":false},"excerpt":{"rendered":"<p>a 1.5 $a-t$ (m\/s\u00b2) \u0394v: 0.0 v\u2080 2 $v-t$ (m\/s) v: 0.0 t 6. &#8230; <a title=\"qiutopIA\u5300\u53d8\u901f\u76f4\u7ebf\u8fd0\u52a8\u56fe\u50cf\" class=\"read-more\" href=\"https:\/\/www.qiusir.com\/?p=44865\" aria-label=\"\u9605\u8bfb qiutopIA\u5300\u53d8\u901f\u76f4\u7ebf\u8fd0\u52a8\u56fe\u50cf\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[5],"tags":[443,259,247],"class_list":["post-44865","post","type-post","status-publish","format-standard","hentry","category-physics","tag-ai","tag-class","tag-physics"],"_links":{"self":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts\/44865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=44865"}],"version-history":[{"count":7,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts\/44865\/revisions"}],"predecessor-version":[{"id":44872,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=\/wp\/v2\/posts\/44865\/revisions\/44872"}],"wp:attachment":[{"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=44865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=44865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qiusir.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=44865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}