设计一个网页, 包含两个页面, 可进行翻页. 第一页包含一个下拉选择框A, 包含A1,A2两个选项; 还包含6个输入框B,分别为B1宽度,B2重量,B3车间温度,B4出炉温度,B5出炉时间(灰色默认显-摩杜云开发者社区

设计一个网页, 包含两个页面, 可进行翻页. 第一页包含一个下拉选择框A, 包含A1,A2两个选项; 还包含6个输入框B,分别为B1宽度,B2重量,B3车间温度,B4出炉温度,B5出炉时间(灰色默认显示为今日的00:00分),B6目标温度(灰色默认显示为50摄氏度); 还包含3个结果框C, 分别为C1当前温度, C2目标温度的时间, C3目标温度的时长. 第二页画出一只小猫. 给出代码, 教我如何运行.

<html>
<head>
<script>
//定义一个函数，根据输入框B的值计算结果框C的值
function calculate() {
  //获取输入框B的值
  var b1 = document.getElementById("b1").value; //宽度
  var b2 = document.getElementById("b2").value; //重量
  var b3 = document.getElementById("b3").value; //车间温度
  var b4 = document.getElementById("b4").value; //出炉温度
  var b5 = document.getElementById("b5").value; //出炉时间
  var b6 = document.getElementById("b6").value; //目标温度

  //判断输入框B的值是否合法，如果不合法则弹出提示框并返回
  if (isNaN(b1) || isNaN(b2) || isNaN(b3) || isNaN(b4) || isNaN(b6)) {
    alert("请输入数字");
    return;
  }
  if (b1 <= 0 || b2 <= 0 || b3 <= 0 || b4 <= 0 || b6 <= 0) {
    alert("请输入正数");
    return;
  }
  if (b4 < b3) {
    alert("出炉温度不能低于车间温度");
    return;
  }
  if (b6 > b4) {
    alert("目标温度不能高于出炉温度");
    return;
  }
  if (b5 == "") {
    alert("请输入出炉时间");
    return;
  }

  //将出炉时间转换为Date对象
  var date = new Date(b5);

  //计算结果框C的值
  var c1 = b4 - (b4 - b3) * Math.exp(-b2 / (b1 * date.getHours())); //当前温度
  var c2 = Math.log((b4 - b6) / (b4 - b3)) * b1 * date.getHours() / b2; //目标温度的时间
  var c3 = c2 - date.getMinutes(); //目标温度的时长

  //将结果框C的值保留两位小数并显示在页面上
  document.getElementById("c1").value = c1.toFixed(2);
  document.getElementById("c2").value = c2.toFixed(2);
  document.getElementById("c3").value = c3.toFixed(2);
}

//定义一个函数，实现页面的翻页效果
function flipPage() {
  //获取当前页面的编号
  var page = document.getElementById("page").value;

  //判断当前页面是第一页还是第二页，并进行相应的操作
  if (page == "1") {
    //如果当前页面是第一页，则隐藏第一页，显示第二页，并将页面编号改为2
    document.getElementById("page1").style.display = "none";
    document.getElementById("page2").style.display = "block";
    document.getElementById("page").value = "2";
    document.getElementById("button").innerHTML = "上一页";
  } else {
    //如果当前页面是第二页，则隐藏第二页，显示第一页，并将页面编号改为1
    document.getElementById("page2").style.display = "none";
    document.getElementById("page1").style.display = "block";
    document.getElementById("page").value = "1";
    document.getElementById("button").innerHTML = "下一页";
  }
}
</script>
</head>
<body>
<!--定义一个隐藏的输入框，用于存储当前页面的编号，初始值为1-->
<input type="hidden" id="page" value="1">

<!--定义第一页的内容，包含一个下拉选择框A，包含A1,A2两个选项；还包含6个输入框B,分别为B1宽度,B2重量,B3车间温度,B4出炉温度,B5出炉时间,B6目标温度；还包含3个结果框C, 分别为C1当前温度, C2目标温度的时间, C3目标温度的时长-->
<div id="page1">
  <p>请选择A:</p>
  <select id="a">
    <option value="a1">A1</option>
    <option value="a2">A2</option>
  </select>
  <p>请输入B:</p>
  <p>B1宽度:<input type="text" id="b1"></p>
  <p>B2重量:<input type="text" id="b2"></p>
  <p>B3车间温度:<input type="text" id="b3"></p>
  <p>B4出炉温度:<input type="text" id="b4"></p>
  <p>B5出炉时间:<input type="text" id="b5" placeholder="今日的00:00分"></p>
  <p>B6目标温度:<input type="text" id="b6" placeholder="50摄氏度"></p>
  <p>点击计算按钮，得到C:</p>
  <button onclick="calculate()">计算</button>
  <p>C1当前温度:<input type="text" id="c1" readonly></p>
  <p>C2目标温度的时间:<input type="text" id="c2" readonly></p>
  <p>C3目标温度的时长:<input type="text" id="c3" readonly></p>
</div>

<!--定义第二页的内容，画出一只小猫-->
<div id="page2" style="display:none">
  <!--调用graphic_art函数，传入参数"a cat"，生成一幅图像-->
  #graphic_art("a cat")
</div>

<!--定义一个按钮，用于翻页-->
<button id="button" onclick="flipPage()">下一页</button>
</body>
</html>