558 lines
19 KiB
HTML
558 lines
19 KiB
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>
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/mathjs@11.6.0/lib/browser/math.js"></script>
|
||
<style>
|
||
:root {
|
||
--primary-color: #4361ee;
|
||
--secondary-color: #3f37c9;
|
||
--accent-color: #4895ef;
|
||
--light-color: #f8f9fa;
|
||
--dark-color: #212529;
|
||
--success-color: #4cc9f0;
|
||
--warning-color: #f72585;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
}
|
||
|
||
body {
|
||
background-color: #f5f7fa;
|
||
color: var(--dark-color);
|
||
line-height: 1.6;
|
||
padding: 20px;
|
||
min-width: 900px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
min-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 30px;
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
h1 {
|
||
color: var(--primary-color);
|
||
font-weight: 700;
|
||
margin-bottom: 10px;
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #6c757d;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.intro-box {
|
||
background-color: #f8f9fa;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
margin-bottom: 30px;
|
||
border-left: 4px solid var(--accent-color);
|
||
}
|
||
|
||
.intro-box h3 {
|
||
color: var(--primary-color);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.intro-box ul {
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.intro-box li {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.app-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 2fr;
|
||
gap: 30px;
|
||
}
|
||
|
||
.control-panel {
|
||
background-color: #f8f9fa;
|
||
padding: 25px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||
min-width: 350px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
color: var(--dark-color);
|
||
}
|
||
|
||
input, select {
|
||
width: 100%;
|
||
padding: 12px 15px;
|
||
border: 1px solid #ced4da;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
input:focus, select:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
|
||
}
|
||
|
||
button {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 20px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
transition: all 0.3s;
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: var(--secondary-color);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.chart-container {
|
||
position: relative;
|
||
height: 500px;
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||
padding: 15px;
|
||
min-width: 500px;
|
||
}
|
||
|
||
.examples-panel {
|
||
margin-top: 25px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.examples-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.examples-header h3 {
|
||
color: var(--primary-color);
|
||
margin: 0;
|
||
}
|
||
|
||
.examples-content {
|
||
display: none;
|
||
padding: 10px;
|
||
background-color: white;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.examples-content.show {
|
||
display: block;
|
||
}
|
||
|
||
.example-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.example-list li {
|
||
margin-bottom: 10px;
|
||
padding: 10px;
|
||
background-color: white;
|
||
border-radius: 6px;
|
||
border-left: 4px solid var(--accent-color);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.example-list li:hover {
|
||
background-color: #e9ecef;
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.error-message {
|
||
color: var(--warning-color);
|
||
margin-top: 10px;
|
||
font-size: 0.9rem;
|
||
display: none;
|
||
}
|
||
|
||
.footer {
|
||
text-align: center;
|
||
margin-top: 40px;
|
||
color: #6c757d;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.toggle-icon {
|
||
transition: transform 0.3s;
|
||
}
|
||
|
||
.toggle-icon.rotated {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.real-time-btn {
|
||
background-color: var(--accent-color);
|
||
}
|
||
|
||
.real-time-btn.active {
|
||
background-color: var(--success-color);
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.button-group button {
|
||
margin-top: 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>数学函数图像生成器</h1>
|
||
<p class="subtitle">拥有基本运算，输入框不支持更高级参数填入</p>
|
||
</header>
|
||
|
||
<div class="intro-box">
|
||
<h3>使用说明</h3>
|
||
<p>手机请缩小屏幕，输入数学函数表达式，设置参数范围，即可生成精美的函数图像。</p>
|
||
<h3>支持的运算符和函数：</h3>
|
||
<ul>
|
||
<li>基本运算: +, -, *, /, ^ (幂)</li>
|
||
<li>三角函数: sin, cos, tan, asin, acos, atan</li>
|
||
<li>对数函数: log, log10, ln</li>
|
||
<li>其他函数: sqrt, abs, ceil, floor, round</li>
|
||
<li>常数: pi, e</li>
|
||
</ul>
|
||
<h3>注意事项：</h3>
|
||
<ul>
|
||
<li>使用 x 作为变量，区分大小写</li>
|
||
<li>不支持隐式乘法，必须使用 * 运算符</li>
|
||
<li>不支持分段函数和条件表达式</li>
|
||
<li>程序预留有示例方案</li>
|
||
<li>某些函数在特定区间可能无定义(如log(0))</li>
|
||
<li>复数结果将显示为NaN</li>
|
||
<li>无法生成创意图案，因为输入框限制，而且这个不是直角系</li>
|
||
<li>千万不要把所有数值输入过大和过小，否则会卡</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="app-container">
|
||
<div class="control-panel">
|
||
<div class="form-group">
|
||
<label for="function-input">函数表达式 (使用 x 作为变量)</label>
|
||
<input type="text" id="function-input" placeholder="例如: sin(x), x^2 + 2*x + 1" value="sin(x)">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="x-min">X 最小值</label>
|
||
<input type="number" id="x-min" value="-10" step="0.1">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="x-max">X 最大值</label>
|
||
<input type="number" id="x-max" value="10" step="0.1">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="step">步长 (精度)</label>
|
||
<input type="number" id="step" value="0.1" step="0.01" min="0.01">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="line-color">线条颜色</label>
|
||
<select id="line-color">
|
||
<option value="#4361ee">蓝色</option>
|
||
<option value="#f72585">粉色</option>
|
||
<option value="#4cc9f0">青色</option>
|
||
<option value="#7209b7">紫色</option>
|
||
<option value="#3a0ca3">深蓝</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="button-group">
|
||
<button id="plot-button">绘制函数图像</button>
|
||
<button id="real-time-btn" class="real-time-btn">实时生成图像</button>
|
||
</div>
|
||
<div id="error-message" class="error-message"></div>
|
||
|
||
<div class="examples-panel">
|
||
<div class="examples-header" id="examples-toggle">
|
||
<h3>示例函数</h3>
|
||
<svg class="toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="6 9 12 15 18 9"></polyline>
|
||
</svg>
|
||
</div>
|
||
<div class="examples-content" id="examples-content">
|
||
<ul class="example-list">
|
||
<li onclick="useExample('sin(x)')">正弦函数: sin(x)</li>
|
||
<li onclick="useExample('cos(x)')">余弦函数: cos(x)</li>
|
||
<li onclick="useExample('tan(x)')">正切函数: tan(x)</li>
|
||
<li onclick="useExample('x^2')">二次函数: x^2</li>
|
||
<li onclick="useExample('x^3 - 3*x')">三次函数: x^3 - 3*x</li>
|
||
<li onclick="useExample('sqrt(x)')">平方根函数: sqrt(x)</li>
|
||
<li onclick="useExample('log(x)')">自然对数: log(x)</li>
|
||
<li onclick="useExample('log10(x)')">常用对数: log10(x)</li>
|
||
<li onclick="useExample('exp(x)')">指数函数: exp(x)</li>
|
||
<li onclick="useExample('abs(x)')">绝对值函数: abs(x)</li>
|
||
<li onclick="useExample('sin(x)/x')">sinc函数: sin(x)/x</li>
|
||
<li onclick="useExample('1/x')">反比例函数: 1/x</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<canvas id="function-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>© 2023 高级数学可视化工具 | 使用 Chart.js 和 Math.js 构建 | 支持缩放和平移功能</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 初始化图表
|
||
const ctx = document.getElementById('function-chart').getContext('2d');
|
||
let chart = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
datasets: [{
|
||
label: '函数图像(支持横向触摸图像有信息跟踪)',
|
||
borderColor: '#4361ee',
|
||
borderWidth: 3,
|
||
pointRadius: 0,
|
||
fill: false,
|
||
tension: 0.1
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
x: {
|
||
title: {
|
||
display: true,
|
||
text: 'X轴',
|
||
font: {
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
grid: {
|
||
color: 'rgba(0, 0, 0, 0.05)'
|
||
}
|
||
},
|
||
y: {
|
||
title: {
|
||
display: true,
|
||
text: 'Y轴',
|
||
font: {
|
||
size: 14,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
grid: {
|
||
color: 'rgba(0, 0, 0, 0.05)'
|
||
}
|
||
}
|
||
},
|
||
plugins: {
|
||
legend: {
|
||
position: 'top',
|
||
labels: {
|
||
font: {
|
||
size: 14
|
||
}
|
||
}
|
||
},
|
||
tooltip: {
|
||
mode: 'index',
|
||
intersect: false,
|
||
callbacks: {
|
||
label: function(context) {
|
||
return `f(${context.parsed.x.toFixed(2)}) = ${context.parsed.y.toFixed(4)}`;
|
||
}
|
||
}
|
||
},
|
||
zoom: {
|
||
zoom: {
|
||
wheel: {
|
||
enabled: true,
|
||
},
|
||
pinch: {
|
||
enabled: true
|
||
},
|
||
mode: 'xy',
|
||
},
|
||
pan: {
|
||
enabled: true,
|
||
mode: 'xy',
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 实时生成状态
|
||
let isRealTime = false;
|
||
let inputElements = [
|
||
document.getElementById('function-input'),
|
||
document.getElementById('x-min'),
|
||
document.getElementById('x-max'),
|
||
document.getElementById('step'),
|
||
document.getElementById('line-color')
|
||
];
|
||
|
||
// 防抖函数，避免频繁更新
|
||
function debounce(func, wait) {
|
||
let timeout;
|
||
return function() {
|
||
const context = this;
|
||
const args = arguments;
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(() => {
|
||
func.apply(context, args);
|
||
}, wait);
|
||
};
|
||
}
|
||
|
||
// 绘制函数
|
||
function plotFunction() {
|
||
const funcInput = document.getElementById('function-input').value;
|
||
const xMin = parseFloat(document.getElementById('x-min').value);
|
||
const xMax = parseFloat(document.getElementById('x-max').value);
|
||
const step = parseFloat(document.getElementById('step').value);
|
||
const lineColor = document.getElementById('line-color').value;
|
||
|
||
const errorElement = document.getElementById('error-message');
|
||
errorElement.style.display = 'none';
|
||
|
||
try {
|
||
// 生成x值数组
|
||
const xValues = [];
|
||
for (let x = xMin; x <= xMax; x += step) {
|
||
xValues.push(x);
|
||
}
|
||
|
||
// 计算y值
|
||
const yValues = [];
|
||
const scope = {};
|
||
|
||
for (let i = 0; i < xValues.length; i++) {
|
||
scope.x = xValues[i];
|
||
try {
|
||
const y = math.evaluate(funcInput, scope);
|
||
yValues.push(y);
|
||
} catch (e) {
|
||
// 对于某些x值可能无法计算（如log(0)）
|
||
yValues.push(NaN);
|
||
}
|
||
}
|
||
|
||
// 更新图表
|
||
chart.data.labels = xValues;
|
||
chart.data.datasets[0].data = yValues.map((y, i) => ({x: xValues[i], y: y}));
|
||
chart.data.datasets[0].borderColor = lineColor;
|
||
chart.update();
|
||
|
||
} catch (error) {
|
||
errorElement.textContent = `错误: ${error.message}`;
|
||
errorElement.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
// 使用示例函数
|
||
function useExample(func) {
|
||
document.getElementById('function-input').value = func;
|
||
if (isRealTime) {
|
||
plotFunction();
|
||
}
|
||
}
|
||
|
||
// 切换实时生成模式
|
||
function toggleRealTime() {
|
||
const realTimeBtn = document.getElementById('real-time-btn');
|
||
isRealTime = !isRealTime;
|
||
|
||
if (isRealTime) {
|
||
realTimeBtn.classList.add('active');
|
||
realTimeBtn.textContent = '实时生成中...';
|
||
// 立即绘制一次
|
||
plotFunction();
|
||
} else {
|
||
realTimeBtn.classList.remove('active');
|
||
realTimeBtn.textContent = '实时生成图像';
|
||
}
|
||
}
|
||
|
||
// 设置输入框监听
|
||
function setupInputListeners() {
|
||
const debouncedPlot = debounce(plotFunction, 500);
|
||
|
||
inputElements.forEach(element => {
|
||
element.addEventListener('input', () => {
|
||
if (isRealTime) {
|
||
debouncedPlot();
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 切换示例面板
|
||
document.getElementById('examples-toggle').addEventListener('click', function() {
|
||
const content = document.getElementById('examples-content');
|
||
const icon = this.querySelector('.toggle-icon');
|
||
content.classList.toggle('show');
|
||
icon.classList.toggle('rotated');
|
||
});
|
||
|
||
// 事件监听
|
||
document.getElementById('plot-button').addEventListener('click', plotFunction);
|
||
document.getElementById('real-time-btn').addEventListener('click', toggleRealTime);
|
||
|
||
// 设置输入监听
|
||
setupInputListeners();
|
||
|
||
// 初始绘制
|
||
plotFunction();
|
||
</script>
|
||
</body>
|
||
</html>
|