在以上代码的基础上,给出完整修改后代码,并在更新处注释,需求如下:
生成变量z6, 计算规则如下:
由输入框(id_width, id_weight)分别获取变量(width, weight), 定义变量density = 2.7*(10**-6),inner_radius = 665,生成变量outer_radius = np.sqrt(
weight/density/width/np.pi + inner_radius**2
),其中np是python中的numpy模块,请转化为对应js语言函数;再生成变量surface_area = 2 * np.pi * (
outer_radius*width + inner_radius*width + outer_radius**2 - inner_radius**2
) / 10**6,其中np是python中的numpy模块,请转化为对应js语言函数;再生成变量z6 = surface_area / weight * 10**4, 其中np是python中的numpy模块,请转化为对应js语言函数;
随着输入框(id_width, id_weight)内的输入值变动,更新变量(width, weight,outer_radius ,surface_area ,z6),并在页面正上方半透明1秒后消失浮窗显示文字,文字内容为“比表面积”+变量z6的值
在以上代码的基础上,给出完整修改后代码,并在更新处注释,需求如下:
生成变量k, 计算规则如下:
默认参数k1, k2, k3, k4, k5, k6 = (0.03691591, -0.01086697, -0.02207111, -0.04971315, -0.06927802, -0.00682166)
k = k1 + np.dot([k2, k3, k4, k5, k6], [z2, z3, z4, z5, z6])
其中np是python中的numpy模块,请转化为对应js语言函数
<!DOCTYPE html>
<html>
<head>
<title>风机类型选择</title>
<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>
<!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<!-- 创建一个下拉选择框,并将字体大小设置为20px -->
<!-- 将下拉选择框的位置移动到x=200,y=100 -->
<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>
<!-- 创建一个浮动窗口来显示fun_type的值 -->
<div id="floatWindow"></div>
<script>
// 初始化变量
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var init_time = new Date().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;
// 定义函数changeFunType,当选择项改变时更新fun_type的值
function changeFunType(selectObject) {
fun_type = selectObject.value;
// 根据fun_type的值设置z2、z3、z4和z5
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;
}
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
// 计算k值
var k1 = 0.03691591;
var k2 = -0.01086697;
var k3 = -0.02207111;
var k4 = -0.04971315;
var k5 = -0.06927802;
var k6 = -0.00682166;
var k = k1 + (k2 * z2 + k3 * z3 + k4 * z4 + k5 * z5 + k6 * z6);
// 打印k值到控制台
console.log("k: " + k);
}
// 定义函数updateValue,当输入框的值改变时更新对应的变量
function updateValue(id, value) {
switch(id) {
case 'id_width':
width = value;
break;
case 'id_weight':
weight = value;
break;
case 'id_init_time':
init_time = value;
break;
case 'id_init_temp':
init_temp = value;
break;
case 'id_ambi_temp':
ambi_temp = value;
break;
}
// 计算z6
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);
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
</script>
<!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
<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>
</body>
</html>
根据下面的代码更新了上面的代码,但是没有更新默认的输入框的出炉时间
上面的test
<!DOCTYPE html>
<html>
<head>
<title>风机类型选择</title>
<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>
<!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<!-- 创建一个下拉选择框,并将字体大小设置为20px -->
<!-- 将下拉选择框的位置移动到x=200,y=100 -->
<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>
<!-- 创建一个浮动窗口来显示fun_type的值 -->
<div id="floatWindow"></div>
<script>
// 初始化变量
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var init_time = new Date().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;
// 定义函数changeFunType,当选择项改变时更新fun_type的值
function changeFunType(selectObject) {
fun_type = selectObject.value;
// 根据fun_type的值设置z2、z3、z4和z5
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;
}
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
// 定义函数updateValue,当输入框的值改变时更新对应的变量
function updateValue(id, value) {
switch(id) {
case 'id_width':
width = value;
break;
case 'id_weight':
weight = value;
break;
case 'id_init_time':
init_time = value;
break;
case 'id_init_temp':
init_temp = value;
break;
case 'id_ambi_temp':
ambi_temp = value;
break;
}
// 计算z6
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);
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
</script>
<!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
<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>
</body>
</html>
下面的test2
<!DOCTYPE html>
<html>
<head>
<title>风机类型选择</title>
<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>
<!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<!-- 创建一个下拉选择框,并将字体大小设置为20px -->
<!-- 将下拉选择框的位置移动到x=200,y=100 -->
<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>
<!-- 创建一个浮动窗口来显示fun_type的值 -->
<div id="floatWindow"></div>
<script>
// 初始化变量
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var init_time = new Date().toISOString().slice(0, 16); // 当前日期的零点零分
var init_temp = 310;
var ambi_temp = 36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6;
// 定义函数changeFunType,当选择项改变时更新fun_type的值
function changeFunType(selectObject) {
fun_type = selectObject.value;
// 根据fun_type的值设置z2、z3、z4和z5
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;
}
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
// 定义函数updateValue,当输入框的值改变时更新对应的变量
function updateValue(id, value) {
switch(id) {
case 'id_width':
width = value;
break;
case 'id_weight':
weight = value;
break;
case 'id_init_time':
init_time = value;
break;
case 'id_init_temp':
init_temp = value;
break;
case 'id_ambi_temp':
ambi_temp = value;
break;
}
// 计算z6
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);
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
</script>
<!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
<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="2023-10-24T00:00" 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>
</body>
</html>
我为变量再次增加了默认值
<!DOCTYPE html>
<html>
<head>
<title>风机类型选择</title>
<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>
<!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<!-- 创建一个下拉选择框,并将字体大小设置为20px -->
<!-- 将下拉选择框的位置移动到x=200,y=100 -->
<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>
<!-- 创建一个浮动窗口来显示fun_type的值 -->
<div id="floatWindow"></div>
<script>
// 初始化变量
// 初始化变量
var fun_type = "自然冷却";
var width = 1680;
var weight = 12720;
var init_time = new Date().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;
// 定义函数changeFunType,当选择项改变时更新fun_type的值
function changeFunType(selectObject) {
fun_type = selectObject.value;
// 根据fun_type的值设置z2、z3、z4和z5
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;
}
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
// 定义函数updateValue,当输入框的值改变时更新对应的变量
function updateValue(id, value) {
switch(id) {
case 'id_width':
width = value;
break;
case 'id_weight':
weight = value;
break;
case 'id_init_time':
init_time = value;
break;
case 'id_init_temp':
init_temp = value;
break;
case 'id_ambi_temp':
ambi_temp = value;
break;
}
// 计算z6
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);
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
</script>
<!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
<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>
</body>
</html>
增加默认值
以下是修改后的代码,我已经添加了变量z6,并根据width和weight的值来计算它。当width或weight改变时,我也添加了一个浮动窗口来显示z6的新值。这个窗口会在1秒后自动消失。以下是更新的部分:
<!DOCTYPE html>
<html>
<head>
<title>风机类型选择</title>
<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>
<!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<!-- 创建一个下拉选择框,并将字体大小设置为20px -->
<!-- 将下拉选择框的位置移动到x=200,y=100 -->
<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>
<!-- 创建一个浮动窗口来显示fun_type的值 -->
<div id="floatWindow"></div>
<script>
// 初始化变量
var fun_type = "自然冷却";
var width=1680, weight=12720, init_time, init_temp=310, ambi_temp=36;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
var z6;
// 定义函数changeFunType,当选择项改变时更新fun_type的值
function changeFunType(selectObject) {
fun_type = selectObject.value;
// 根据fun_type的值设置z2、z3、z4和z5
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;
}
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
// 定义函数updateValue,当输入框的值改变时更新对应的变量
function updateValue(id, value) {
switch(id) {
case 'id_width':
width = value;
break;
case 'id_weight':
weight = value;
break;
case 'id_init_time':
init_time = value;
break;
case 'id_init_temp':
init_temp = value;
break;
case 'id_ambi_temp':
ambi_temp = value;
break;
}
// 计算z6
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);
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = "比表面积: " + z6;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
</script>
<!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
<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>
</body>
</html>
这段代码将在页面上创建五个新的输入框和对应的标签,每个输入框都有一个默认值,并且它们的结果都绑定到了一个变量。每个输入框上方都有一个标签,显示了输入框的内容。这些输入框和标签都位于一个名为inputFields
的<div>
元素中,并且它们的位置已经被设置为x=100,y=150。然后,我在每个输入框和标签之间添加了一些边距,以确保它们不会相互遮挡。如果您希望更改这些元素的布局或样式,您可以修改这个<div>
元素或其中的任何子元素。如果用户更改了输入框中的值,相应的变量就会被更新。这是通过将每个输入框的onchange
事件处理器设置为updateValue
函数来实现的。这个函数会根据输入框的ID来更新对应的变量。最后,请注意,我已经将出炉时间的输入类型设置为datetime-local
,这将允许用户选择日期和时间。然而,HTML不支持将此输入类型的默认值设置为当前日期和时间,因此我将其默认值留空。如果您希望在页面加载时自动填充当前日期和时间,您可能需要使用JavaScript来实现这一点。
此外,我还添加了一个浮动窗口来显示z6的
在以上代码的基础上,给出完整修改后代码,并在更新处注释,需求如下:
生成变量z2,z3,z4,z5;如果变量fun_type = “自然冷却”,则z2,z3,z4,z5均为0;如果变量fun_type=“单个大风机”,则z2=1,z3,z4,z5均为0;如果变量fun_type="单4风机“,则z3=1,z2,z4,z5均为0;如果变量fun_type="大风机+单4风机",则z4=1,z2,z3,z5均为0;如果变量fun_type="双4风机", 则z5=1,z2,z3,z4均为0;当输入框id_fan_type发生变动时,页面正上方半透明1秒后消失浮窗显示文字,文字内容为变量fun_type的值
以下是修改后的代码,我已经添加了变量z2、z3、z4和z5,并根据fun_type的值来设置它们。当fun_type改变时,我也添加了一个浮动窗口来显示fun_type的新值。这个窗口会在1秒后自动消失。以下是更新的部分:
<!DOCTYPE html>
<html>
<head>
<title>风机类型选择</title>
<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>
<!-- 在下拉选择框的左侧添加标签文本“风机类型”,并将其向左移动以确保完全显示 -->
<label for="id_fan_type" style="position: absolute; left: 100px; top: 100px; font-size: 20px;">风机类型</label>
<!-- 创建一个下拉选择框,并将字体大小设置为20px -->
<!-- 将下拉选择框的位置移动到x=200,y=100 -->
<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>
<!-- 创建一个浮动窗口来显示fun_type的值 -->
<div id="floatWindow"></div>
<script>
// 初始化变量
var fun_type = "自然冷却";
var width, weight, init_time, init_temp, ambi_temp;
var z2 = 0, z3 = 0, z4 = 0, z5 = 0;
// 定义函数changeFunType,当选择项改变时更新fun_type的值
function changeFunType(selectObject) {
fun_type = selectObject.value;
// 根据fun_type的值设置z2、z3、z4和z5
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;
}
// 显示浮动窗口,并在1秒后自动隐藏
var floatWindow = document.getElementById('floatWindow');
floatWindow.innerHTML = fun_type;
floatWindow.style.display = 'block';
setTimeout(function() {
floatWindow.style.display = 'none';
}, 1000);
}
// 定义函数updateValue,当输入框的值改变时更新对应的变量
function updateValue(id, value) {
switch(id) {
case 'id_width':
width = value;
break;
case 'id_weight':
weight = value;
break;
case 'id_init_time':
init_time = value;
break;
case 'id_init_temp':
init_temp = value;
break;
case 'id_ambi_temp':
ambi_temp = value;
break;
}
}
</script>
<!-- 创建五个输入框和对应的标签,字体大小设置为20px -->
<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>
</body>
</html>
这段代码将在页面上创建五个新的输入框和对应的标签,每个输入框都有一个默认值,并且它们的结果都绑定到了一个变量。每个输入框上方都有一个标签,显示了输入框的内容。这些输入框和标签都位于一个名为inputFields
的<div>
元素中,并且它们的位置已经被设置为x=100,y=150。然后,我在每个输入框和标签之间添加了一些边距,以确保它们不会相互遮挡。如果您希望更改这些元素的布局或样式,您可以修改这个<div>
元素或其中的任何子元素。如果用户更改了输入框中的值,相应的变量就会被更新。这是通过将每个输入框的onchange
事件处理器设置为updateValue
函数来实现的。这个函数会根据输入框的ID来更新对应的变量。最后,请注意,我已经将出炉时间的输入类型设置为datetime-local
,这将允许用户选择日期和时间。然而,HTML不支持将此输入类型的默认值设置为当前日期和时间,因此我将其默认值留空。如果您希望在页面加载时自动填充当前日期和时间,您可能需要使用JavaScript来实现这一点。
此外,我还添加了一个浮动窗口来显示fun_type的新值。当fun_type改变时,这个窗口会显示出来,并在1秒后自动消失。这是通过在changeFunType
函数中使用setTimeout函数来实现的。如果您希望更改浮动窗口的样式或行为,您可以修改CSS样式或JavaScript代码。