text4 待改进
<!DOCTYPE html>
<html>
<head>
<style>
#floatWindow {
position: absolute;
top: 50px;
left: 100px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
<option value="自然冷却" selected>自然冷却</option>
<option value="单个大风机">单个大风机</option>
<option value="单4风机">单4风机</option>
<option value="大风机+单4风机">大风机+单4风机</option>
<option value="双4风机">双4风机</option>
</select>
<div id="floatWindow"></div>
<!--添加cavas标题-->
<div id="formula" style="position: absolute; left: 600px; top: 70px; font-size: 20px;"></div>
<canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
<!-- 添加横坐标标签 -->
<span style="position: absolute; left: 750px; top: 500px; font-size: 16px;">出炉时长（小时）</span>
<!-- 添加纵坐标标签 -->
<span style="position: absolute; left: 330px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">料温（摄氏度）</span>
<script>
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
var init_time = currentDate.toISOString().slice(0, 16);
var init_temp = 310;
var ambi_temp = 36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6 = 19.5;
//更新函数
function updateFormula() {
var formulaDiv = document.getElementById('formula');
formulaDiv.innerHTML = "料温 = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * 出炉时长) + " + ambi_temp;
}
function changeFunType(selectObject) {
fun_type = selectObject.value;
switch(fun_type) {
case '自然冷却':
z2 = z3 = z4 = z5 = 0;
break;
case '单个大风机':
z2 = 1;
z3 = z4 = z5 = 0;
break;
case '单4风机':
z3 = 1;
z2 = z4 = z5 = 0;
break;
case '大风机+单4风机':
z4 = 1;
z2 = z3 = z5 = 0;
break;
case '双4风机':
z5 = 1;
z2 = z3 = z4 = 0;
break;
}
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
function calculateK() {
var k1 = 0.03691591;
var k2 = -0.01086697;
var k3 = -0.02207111;
var k4 = -0.04971315;
var k5 = -0.06927802;
var k6 = -0.00682166;
window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
}
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
for (var i = 0; i <= canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
}
for (var j = 0; j <= canvas.height; j += 40) {
ctx.beginPath();
ctx.moveTo(0, j);
ctx.lineTo(canvas.width, j);
ctx.stroke();
ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
}
ctx.strokeStyle = 'blue';
ctx.beginPath();
for (var x = 0; x <= 70; x += 1) {
var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
if (x === 0) {
ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
} else {
ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
}
}
ctx.stroke();
}
function updateValue(elementId, elementValue) {
switch(elementId) {
case 'id_width':
width = parseFloat(elementValue);
break;
case 'id_weight':
weight = parseFloat(elementValue);
break;
case 'id_init_time':
init_time = elementValue;
break;
case 'id_init_temp':
init_temp = parseFloat(elementValue);
break;
case 'id_ambi_temp':
ambi_temp = parseFloat(elementValue);
break;
}
var density = 2.7 * Math.pow(10, -6);
var inner_radius = 665;
var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
z6 = surface_area / weight * Math.pow(10, 4);
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
window.onload = function() {
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
</script>
<div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
<div style="margin-bottom: 20px;">
<label for="id_width" style="font-size: 20px;">宽度mm</label><br>
<input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_weight" style="font-size: 20px;">重量kg</label><br>
<input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
<input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
<input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
<input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
</div>
<!--输入料温预测时间-->
<div id="target_temp" style="position: absolute; left: 100px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标料温</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时间</label>
</div>
</div>
<div id="target_temp_input" style="position: absolute; left: 300px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标料温</label>
<input type="text" id="id_target_temp" value="45" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px; width: 50px;">
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例1 (50摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">50</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例2 (40摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">40</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
<!--输入时间预测料温-->
<div id="target_time" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<div id="target_time_input" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标时间</label>
<input type="datetime-local" id="id_target_time" value="" onchange="updateValue(this.id, this.value)" style="margin-top: 20px; font-size: 20px;">
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
<label style="margin-top: 20px; font-size: 20px;">当前时间</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
<label style="margin-top: 20px; font-size: 20px;">出炉时间+50小时</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
</body>
</html>text3 修改div
<!DOCTYPE html>
<html>
<head>
<style>
#floatWindow {
position: absolute;
top: 50px;
left: 100px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
<option value="自然冷却" selected>自然冷却</option>
<option value="单个大风机">单个大风机</option>
<option value="单4风机">单4风机</option>
<option value="大风机+单4风机">大风机+单4风机</option>
<option value="双4风机">双4风机</option>
</select>
<div id="floatWindow"></div>
<!--添加cavas标题-->
<div id="formula" style="position: absolute; left: 600px; top: 70px; font-size: 20px;"></div>
<canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
<!-- 添加横坐标标签 -->
<span style="position: absolute; left: 750px; top: 500px; font-size: 16px;">出炉时长（小时）</span>
<!-- 添加纵坐标标签 -->
<span style="position: absolute; left: 330px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">料温（摄氏度）</span>
<script>
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
var init_time = currentDate.toISOString().slice(0, 16);
var init_temp = 310;
var ambi_temp = 36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6 = 19.5;
//更新函数
function updateFormula() {
var formulaDiv = document.getElementById('formula');
formulaDiv.innerHTML = "料温 = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * 出炉时长) + " + ambi_temp;
}
function changeFunType(selectObject) {
fun_type = selectObject.value;
switch(fun_type) {
case '自然冷却':
z2 = z3 = z4 = z5 = 0;
break;
case '单个大风机':
z2 = 1;
z3 = z4 = z5 = 0;
break;
case '单4风机':
z3 = 1;
z2 = z4 = z5 = 0;
break;
case '大风机+单4风机':
z4 = 1;
z2 = z3 = z5 = 0;
break;
case '双4风机':
z5 = 1;
z2 = z3 = z4 = 0;
break;
}
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
function calculateK() {
var k1 = 0.03691591;
var k2 = -0.01086697;
var k3 = -0.02207111;
var k4 = -0.04971315;
var k5 = -0.06927802;
var k6 = -0.00682166;
window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
}
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
for (var i = 0; i <= canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
}
for (var j = 0; j <= canvas.height; j += 40) {
ctx.beginPath();
ctx.moveTo(0, j);
ctx.lineTo(canvas.width, j);
ctx.stroke();
ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
}
ctx.strokeStyle = 'blue';
ctx.beginPath();
for (var x = 0; x <= 70; x += 1) {
var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
if (x === 0) {
ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
} else {
ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
}
}
ctx.stroke();
}
function updateValue(elementId, elementValue) {
switch(elementId) {
case 'id_width':
width = parseFloat(elementValue);
break;
case 'id_weight':
weight = parseFloat(elementValue);
break;
case 'id_init_time':
init_time = elementValue;
break;
case 'id_init_temp':
init_temp = parseFloat(elementValue);
break;
case 'id_ambi_temp':
ambi_temp = parseFloat(elementValue);
break;
}
var density = 2.7 * Math.pow(10, -6);
var inner_radius = 665;
var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
z6 = surface_area / weight * Math.pow(10, 4);
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
window.onload = function() {
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
</script>
<div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
<div style="margin-bottom: 20px;">
<label for="id_width" style="font-size: 20px;">宽度mm</label><br>
<input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_weight" style="font-size: 20px;">重量kg</label><br>
<input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
<input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
<input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
<input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
</div>
<!--输入料温预测时间-->
<div id="target_temp" style="position: absolute; left: 100px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标料温</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时间</label>
</div>
</div>
<div id="target_temp_input" style="position: absolute; left: 300px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标料温</label>
<label style="margin-top: 20px; font-size: 20px;">子标签1</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例1 (50摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">子标签1</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 20px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例2 (40摄氏度)</label>
<label style="margin-top: 20px; font-size: 20px;">子标签1</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
<!--输入时间预测料温-->
<div id="target_time" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<div id="target_time_input" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">请输入目标时间</label>
<label style="margin-top: 20px; font-size: 20px;">子标签1</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
<label style="margin-top: 20px; font-size: 20px;">子标签1</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
<div style="margin-right: 30px;">
<div style="display: flex; flex-direction: column; align-items: flex-start;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
<label style="margin-top: 20px; font-size: 20px;">子标签1</label>
<label style="margin-top: 20px; font-size: 20px;">子标签2</label>
<label style="margin-top: 20px; font-size: 20px;">子标签3</label>
</div>
</div>
</div>
</body>
</html>text2 修改div
<!DOCTYPE html>
<html>
<head>
<style>
#floatWindow {
position: absolute;
top: 50px;
left: 100px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
<option value="自然冷却" selected>自然冷却</option>
<option value="单个大风机">单个大风机</option>
<option value="单4风机">单4风机</option>
<option value="大风机+单4风机">大风机+单4风机</option>
<option value="双4风机">双4风机</option>
</select>
<div id="floatWindow"></div>
<!--添加cavas标题-->
<div id="formula" style="position: absolute; left: 600px; top: 70px; font-size: 20px;"></div>
<canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
<!-- 添加横坐标标签 -->
<span style="position: absolute; left: 750px; top: 500px; font-size: 16px;">出炉时长（小时）</span>
<!-- 添加纵坐标标签 -->
<span style="position: absolute; left: 330px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">料温（摄氏度）</span>
<script>
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
var init_time = currentDate.toISOString().slice(0, 16);
var init_temp = 310;
var ambi_temp = 36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6 = 19.5;
//更新函数
function updateFormula() {
var formulaDiv = document.getElementById('formula');
formulaDiv.innerHTML = "料温 = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * 出炉时长) + " + ambi_temp;
}
function changeFunType(selectObject) {
fun_type = selectObject.value;
switch(fun_type) {
case '自然冷却':
z2 = z3 = z4 = z5 = 0;
break;
case '单个大风机':
z2 = 1;
z3 = z4 = z5 = 0;
break;
case '单4风机':
z3 = 1;
z2 = z4 = z5 = 0;
break;
case '大风机+单4风机':
z4 = 1;
z2 = z3 = z5 = 0;
break;
case '双4风机':
z5 = 1;
z2 = z3 = z4 = 0;
break;
}
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
function calculateK() {
var k1 = 0.03691591;
var k2 = -0.01086697;
var k3 = -0.02207111;
var k4 = -0.04971315;
var k5 = -0.06927802;
var k6 = -0.00682166;
window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
}
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
for (var i = 0; i <= canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
}
for (var j = 0; j <= canvas.height; j += 40) {
ctx.beginPath();
ctx.moveTo(0, j);
ctx.lineTo(canvas.width, j);
ctx.stroke();
ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
}
ctx.strokeStyle = 'blue';
ctx.beginPath();
for (var x = 0; x <= 70; x += 1) {
var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
if (x === 0) {
ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
} else {
ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
}
}
ctx.stroke();
}
function updateValue(elementId, elementValue) {
switch(elementId) {
case 'id_width':
width = parseFloat(elementValue);
break;
case 'id_weight':
weight = parseFloat(elementValue);
break;
case 'id_init_time':
init_time = elementValue;
break;
case 'id_init_temp':
init_temp = parseFloat(elementValue);
break;
case 'id_ambi_temp':
ambi_temp = parseFloat(elementValue);
break;
}
var density = 2.7 * Math.pow(10, -6);
var inner_radius = 665;
var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
z6 = surface_area / weight * Math.pow(10, 4);
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
window.onload = function() {
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
</script>
<div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
<div style="margin-bottom: 20px;">
<label for="id_width" style="font-size: 20px;">宽度mm</label><br>
<input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_weight" style="font-size: 20px;">重量kg</label><br>
<input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
<input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
<input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
<input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
</div>
<!--输入料温预测时间-->
<div id="target_temp" style="position: absolute; left: 100px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标料温</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时间</label>
</div>
</div>
<div id="target_temp_input" style="position: absolute; left: 300px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 20px;">
<label style="font-size: 20px;">请输入目标料温</label>
</div>
<div style="margin-right: 20px;">
<label style="font-size: 20px;">举例1 (50摄氏度)</label>
</div>
<div style="margin-right: 20px;">
<label style="font-size: 20px;">举例2 (40摄氏度)</label>
</div>
</div>
<!--输入时间预测料温-->
<div id="target_time" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<div id="target_time_input" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<label style="font-size: 20px;">请输入目标时间</label>
</div>
<div style="margin-right: 30px;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
</div>
<div style="margin-right: 30px;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
</div>
</div>
</body>
</html>text1 已添加div
<!DOCTYPE html>
<html>
<head>
<style>
#floatWindow {
position: absolute;
top: 50px;
left: 100px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h1 style="position: absolute; left: 100px; top: 10px;">料温预测</h1>
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<select id="id_fan_type" style="position: absolute; left: 200px; top: 100px; font-size: 20px;" onchange="changeFunType(this)">
<option value="自然冷却" selected>自然冷却</option>
<option value="单个大风机">单个大风机</option>
<option value="单4风机">单4风机</option>
<option value="大风机+单4风机">大风机+单4风机</option>
<option value="双4风机">双4风机</option>
</select>
<div id="floatWindow"></div>
<!--添加cavas标题-->
<div id="formula" style="position: absolute; left: 600px; top: 70px; font-size: 20px;"></div>
<canvas id="graphCanvas" width="800" height="400" style="position: absolute; left: 400px; top: 100px;"></canvas>
<!-- 添加横坐标标签 -->
<span style="position: absolute; left: 750px; top: 500px; font-size: 16px;">出炉时长（小时）</span>
<!-- 添加纵坐标标签 -->
<span style="position: absolute; left: 330px; top: 250px; font-size: 16px; transform: rotate(-90deg); transform-origin: 50% 50%;">料温（摄氏度）</span>
<script>
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
var init_time = currentDate.toISOString().slice(0, 16);
var init_temp = 310;
var ambi_temp = 36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6 = 19.5;
//更新函数
function updateFormula() {
var formulaDiv = document.getElementById('formula');
formulaDiv.innerHTML = "料温 = (" + init_temp + " - " + ambi_temp + ") * e^(" + window.k.toFixed(8) + " * 出炉时长) + " + ambi_temp;
}
function changeFunType(selectObject) {
fun_type = selectObject.value;
switch(fun_type) {
case '自然冷却':
z2 = z3 = z4 = z5 = 0;
break;
case '单个大风机':
z2 = 1;
z3 = z4 = z5 = 0;
break;
case '单4风机':
z3 = 1;
z2 = z4 = z5 = 0;
break;
case '大风机+单4风机':
z4 = 1;
z2 = z3 = z5 = 0;
break;
case '双4风机':
z5 = 1;
z2 = z3 = z4 = 0;
break;
}
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
function calculateK() {
var k1 = 0.03691591;
var k2 = -0.01086697;
var k3 = -0.02207111;
var k4 = -0.04971315;
var k5 = -0.06927802;
var k6 = -0.00682166;
window.k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
}
function drawGraph() {
var canvas = document.getElementById('graphCanvas');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
var xInterval = 70 / (canvas.width / 40); // x轴每个网格的间距值
var yInterval = 410 / (canvas.height / 40); // y轴每个网格的间距值
for (var i = 0; i <= canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
ctx.fillText((i / 40 * xInterval).toFixed(0), i, canvas.height); // x轴刻度
}
for (var j = 0; j <= canvas.height; j += 40) {
ctx.beginPath();
ctx.moveTo(0, j);
ctx.lineTo(canvas.width, j);
ctx.stroke();
ctx.fillText((canvas.height / 40 * yInterval - j / 40 * yInterval).toFixed(0), 0, j); // y轴刻度
}
ctx.strokeStyle = 'blue';
ctx.beginPath();
for (var x = 0; x <= 70; x += 1) {
var y = (init_temp - ambi_temp) * Math.exp(window.k * x) + ambi_temp;
if (x === 0) {
ctx.moveTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
} else {
ctx.lineTo(x * (canvas.width / 70), canvas.height - y * (canvas.height / 410));
}
}
ctx.stroke();
}
function updateValue(elementId, elementValue) {
switch(elementId) {
case 'id_width':
width = parseFloat(elementValue);
break;
case 'id_weight':
weight = parseFloat(elementValue);
break;
case 'id_init_time':
init_time = elementValue;
break;
case 'id_init_temp':
init_temp = parseFloat(elementValue);
break;
case 'id_ambi_temp':
ambi_temp = parseFloat(elementValue);
break;
}
var density = 2.7 * Math.pow(10, -6);
var inner_radius = 665;
var outer_radius = Math.sqrt(weight / density / width / Math.PI + Math.pow(inner_radius, 2));
var surface_area = 2 * Math.PI * (outer_radius * width + inner_radius * width + Math.pow(outer_radius, 2) - Math.pow(inner_radius, 2)) / Math.pow(10, 6);
z6 = surface_area / weight * Math.pow(10, 4);
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
window.onload = function() {
calculateK();
updateFormula(); // 更新函数
drawGraph();
}
</script>
<div id="inputFields" style="position: absolute; left: 100px; top: 150px;">
<div style="margin-bottom: 20px;">
<label for="id_width" style="font-size: 20px;">宽度mm</label><br>
<input type="text" id="id_width" value="1680" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_weight" style="font-size: 20px;">重量kg</label><br>
<input type="text" id="id_weight" value="12720" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_time" style="font-size: 20px;">出炉时间</label><br>
<input type="datetime-local" id="id_init_time" value="" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_init_temp" style="font-size: 20px;">出炉温度</label><br>
<input type="text" id="id_init_temp" value="310" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
<div style="margin-bottom: 20px;">
<label for="id_ambi_temp" style="font-size: 20px;">车间温度</label><br>
<input type="text" id="id_ambi_temp" value="36" onchange="updateValue(this.id, this.value)" style="font-size: 20px;">
</div>
</div>
<!--输入料温预测时间-->
<!--margin-bottom在每个标签下方添加20像素的空间，从而增大标签之间的间距-->
<div id="target_temp_ylabel" style="position: absolute; left: 100px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标料温</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测出炉时间</label>
</div>
</div>
<!--display: flex; justify-content: space-between; 子元素沿着水平方向排列-->
<div id="target_temp_xlabel" style="position: absolute; left: 300px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 20px;">
<label style="font-size: 20px;">请输入目标料温</label>
</div>
<div style="margin-right: 20px;">
<label style="font-size: 20px;">举例1 (50摄氏度)</label>
</div>
<div style="margin-right: 20px;">
<label style="font-size: 20px;">举例2 (40摄氏度)</label>
</div>
</div>
<!--输入时间预测料温-->
<!--margin-bottom在每个标签下方添加20像素的空间，从而增大标签之间的间距-->
<div id="target_time_ylabel" style="position: absolute; left: 900px; top: 600px;">
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">目标时间</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">出炉时长</label>
</div>
<div style="margin-bottom: 20px;">
<label style="font-size: 20px;">预测料温</label>
</div>
</div>
<!--display: flex; justify-content: space-between; 子元素沿着水平方向排列-->
<div id="target_time_xlabel" style="position: absolute; left: 1000px; top: 550px; display: flex; justify-content: space-between;">
<div style="margin-right: 60px;">
<label style="font-size: 20px;">请输入目标时间</label>
</div>
<div style="margin-right: 30px;">
<label style="font-size: 20px;">举例3 (当前时间)</label>
</div>
<div style="margin-right: 30px;">
<label style="font-size: 20px;">举例4 (出炉时间+50小时)</label>
</div>
</div>
</body>
</html>