<!DOCTYPE html>
<html lang="en">
<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/plotly.js-dist@2.9.0"></script>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #ffffff;
color: #000000;
transition: background-color 0.3s, color 0.3s;
}
.dark-mode {
background-color: #121212;
color: #ffffff;
}
#input-container {
margin-bottom: 20px;
}
#plot-container {
width: 100%;
height: 500px;
}
#point-info {
margin-top: 20px;
font-size: 16px;
font-weight: bold;
}
#error-message {
color: red;
font-weight: bold;
}
button {
margin-top: 10px;
}
.mode-toggle-btn {
padding: 10px 15px;
background-color: #444444;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.mode-toggle-btn:hover {
background-color: #666666;
}
.action-btn {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.action-btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="input-container">
<label for="function-input">请输入一次函数表达式 (例如: y=2x+3 或 2x+3):</label>
<input type="text" id="function-input" value="2x+3" placeholder="例如: 2x+3 或 y=2x+3" />
<button class="action-btn" onclick="plotFunction()">绘制图像</button>
<button class="action-btn" onclick="clearPlot()">清空图像</button>
<button class="action-btn" onclick="undoPlot()">撤销操作</button>
<div id="error-message"></div>
</div>
<div id="plot-container"></div>
<div id="point-info"></div>
<button class="mode-toggle-btn" onclick="toggleMode()">切换黑夜/白天模式</button>
<script>
let plotHistory = []; // 存储历史绘制的图像
let currentPlots = []; // 当前绘制的图像数据
// 初始化绘制一次函数图像
function plotFunction() {
let inputFunc = document.getElementById('function-input').value.trim();
// 清除上次的错误提示
document.getElementById('error-message').innerHTML = '';
// 自动去除输入中的空格
inputFunc = inputFunc.replace(/\s+/g, '');
// 如果用户输入了 "y="，去掉 "y="
if (inputFunc.startsWith('y=')) {
inputFunc = inputFunc.substring(2);
}
// 简单的输入验证：确保输入的形式为 kx + b 或 kx - b
let validPattern = /^[\-]?\d*\.?\d*x[\+\-]?\d*$/;
if (!validPattern.test(inputFunc)) {
document.getElementById('error-message').innerHTML = '无效的输入，请确保使用一次函数形式，例如 2x+3 或 -2x-3。';
return;
}
// 提取 k 和 b 的值
let k, b;
let match = inputFunc.match(/^([\-]?\d*\.?\d*)x([+-]?\d+)?$/);
if (match) {
k = match[1] === '' || match[1] === '-' || match[1] === '+' ? 1 * match[1] : parseFloat(match[1]);
b = match[2] ? parseFloat(match[2]) : 0;
}
// 创建 X 和 Y 数据（无限延伸的直线）
let x_values = [];
let y_values = [];
for (let x = -1000; x <= 1000; x += 0.1) {
let y = k * x + b; // 计算 y 值
x_values.push(x);
y_values.push(y);
}
// 保存当前绘制的图像
let newPlot = {
x: x_values,
y: y_values,
mode: 'lines',
type: 'scatter'
};
// 添加当前图像到历史记录
currentPlots.push(newPlot);
plotHistory.push([...currentPlots]);
// 更新绘图
updatePlot();
}
// 更新图像
function updatePlot() {
let layout = {
title: '一次函数图像',
xaxis: {
title: 'x',
range: [-10, 10] // 设置默认视图为 -10 到 10
},
yaxis: {
title: 'y',
range: [-10, 10] // 设置默认视图为 -10 到 10
}
};
Plotly.newPlot('plot-container', currentPlots, layout);
}
// 清空图像
function clearPlot() {
currentPlots = [];
plotHistory = [];
updatePlot();
}
// 撤销操作
function undoPlot() {
if (plotHistory.length > 1) {
plotHistory.pop();
currentPlots = plotHistory[plotHistory.length - 1];
updatePlot();
}
}
// 显示点击的点的函数值
document.getElementById('plot-container').on('plotly_click', function(data) {
let point = data.points[0];
let x = point.x;
let y = point.y;
// 显示点信息
document.getElementById('point-info').innerHTML = `选择的点: x = ${x.toFixed(2)}, y = ${y.toFixed(2)}`;
});
// 默认绘制一个简单的一次函数
plotFunction();
// 切换黑夜/白天模式
function toggleMode() {
document.body.classList.toggle('dark-mode');
}
</script>
</body>
</html>
index.html
index.html