基于any2web+deepseek实现对三角函数定义的理解

最新推荐文章于 2026-08-22 23:26:40 发布

原创

最新推荐文章于 2026-08-22 23:26:40 发布 · 762 阅读

AI 时代程序员必备技能

Codex、Claude Code、Cursor、Hermes Agent、OpenClaw等工程化实战专栏，讲透 AI 如何接管脏活累活

一键订阅

参考文献：https://www.anytoweb.com/p/73f351a6.html

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>直角坐标系三角函数定义演示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: #fff;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 1200px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
padding: 20px;
background: rgba(0, 0, 0, 0.4);
border-radius: 15px;
width: 100%;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.subtitle {
font-size: 1.4rem;
opacity: 0.9;
}
.content {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
width: 100%;
}
.canvas-container {
flex: 1;
min-width: 500px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
}
#coordinateCanvas {
background: rgba(255, 255, 255, 0.95);
border-radius: 10px;
margin-bottom: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.controls {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
}
.angle-control {
display: flex;
align-items: center;
gap: 10px;
}
input[type="range"] {
flex: 1;
height: 10px;
border-radius: 5px;
background: linear-gradient(to right, #1a2a6c, #b21f1f);
outline: none;
}
.info-panel {
flex: 1;
min-width: 300px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 25px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
gap: 20px;
}
.trig-values {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.trig-value {
background: rgba(255, 255, 255, 0.15);
padding: 15px;
border-radius: 10px;
text-align: center;
transition: all 0.3s ease;
}
.trig-value:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.25);
}
.trig-name {
font-weight: bold;
font-size: 1.3rem;
margin-bottom: 8px;
}
.trig-equation {
font-size: 1.1rem;
margin-bottom: 5px;
}
.trig-result {
font-size: 1.4rem;
font-weight: bold;
}
.explanation {
background: rgba(255, 255, 255, 0.15);
padding: 20px;
border-radius: 10px;
line-height: 1.6;
}
.legend {
display: flex;
flex-wrap: w