求立方体的体积和表面积，不难！用html制作立方体自动生成

易三一世 12-24 203

前言：

眼前兄弟们对“htmlenter”大约比较关注，你们都需要学习一些“htmlenter”的相关内容。那么小编在网络上网罗了一些有关“htmlenter””的相关文章，希望看官们能喜欢，同学们快快来了解一下吧！

1 说明：

=====

1.1 html制作立方体。

1.2 滑动条调节长、宽、高，并自动生成体积和表面积。

1.3 熟悉和复习html的基本知识，主要是立方体的绘制和input滑动条制作等。

2 效果图：

3 第一步：

微软编辑器vscode打开，新建一个文件，保存cube.html；

英文状态下，! 加回车键（enter），新建html骨架。

4 第二步：css部分的style在head内；而body内有form和script，骨架图。

5 第三步：head内的css部分代码：（注释版）

  <style>    /*网页整体设置*/    * {      /*网页背景颜色*/      background: black;    }    body {      /*overflow=网页上下和左右滑动条==隐藏=hodden*/      overflow: hidden;    }    /*表格-调节滑动条设置*/    form {      /*绝对定位,固定的*/      position: absolute;      /*绝对定位是通过下面的指标固定的*/      bottom: 0;      left: 0;      right: 0;      /*以上三个指标提示，表格-调节滑动条的位置是，底部0，左右均为0，代表在底部位置*/      /*背景颜色的方法：white=#efefef=白色*/      background: rgb(0, 225, 255);      /*内边距属性 padding复习*/      /* 应用到四条边 Apply to all four sides */      /* 顶部| 右边| 底部| 左边*/      padding: 0 0 0 1em;      /*padding: 1em复习;*/      /*“em”是一个相对的大小,1em=16px,建议采用em，不会因为改变UI控件而出现网页的崩溃*/      /*在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系*/      /*1em = 16px 也就是 1px = 1 ÷ 16 = 0.0625em*/      /*居中*/      /*text-align: center;*/    }  </style>

6 第四步：body内的form部分的代码：（注释版），注意小的js代码就紧随input后面调用等等。

<!--表格-调节滑动条：立方体的长、宽、高和颜色的调节--><form style="width: 150px; height: 500px;">   <!--注意：x、z、y和color的顺序，就是水平由左向右的顺序-->  <!--x=长-->  <input type="text" style="width: 20px; height: 10px;color: white;" value="长">   <input type="range" max="400" min="0" value="100" id="x" onmousemove="xanxia()" /><br />  <span    id="lenghtx" style="width: 50px; height: 20px;color: white;"></span>  <br />  <script>    function xanxia() {      document.getElementById(        'lenghtx'      ).innerHTML = document.getElementById('x').value    }  </script>  <!--z=宽-->  <input type="text" style="width: 20px; height: 10px;color: white;" value="宽">  <input type="range" max="400" min="0" value="100" id="z" onmousemove="zanxia()" /><br />  <span    id="lenghtz" style="width: 50px; height: 20px;color: white;"></span>  <br />  <script>    function zanxia() {      document.getElementById(        'lenghtz'      ).innerHTML = document.getElementById('z').value    }  </script>  <!--y=高-->  <input type="text" style="width: 20px; height: 10px;color: white;" value="高">   <input type="range" max="400" min="0" value="100" id="y" onmousemove="yanxia()" /><br />  <span    id="lenghty" style="width: 50px; height: 20px;color: white;"></span>  <br />  <script>    function yanxia() {      document.getElementById(        'lenghty'      ).innerHTML = document.getElementById('y').value    }  </script>  <!--初始化立方体的颜色：黄色==#DBFF3E-->  <input type="text" style="width: 40px; height: 10px;color: white;" value="颜色">   <input id="color" type="color" value="#DBFF3E">    <br />  <!--体积-->  <input type="text" style="width: 30px; height: 10px;color: white;" value="体积" onmousemove="ztiji()"/>  <br />  <span    id="tiji" style="width: 80px; height: 20px;color: white;"></span>  <br />  <script>    function ztiji() {      document.getElementById(        'tiji'      ).innerHTML = document.getElementById('y').value*document.getElementById('x').value*document.getElementById('z').value    }  </script>  <!--表面积-->  <input type="text" style="width: 40px; height: 10px;color: white;" value="表面积" onmousemove="biaomianji()"/>  <br />  <span    id="bmianji" style="width: 80px; height: 20px;color: white;"></span>  <br />  <script>    function biaomianji() {      document.getElementById(        'bmianji'      ).innerHTML = 2*((document.getElementById('y').value*document.getElementById('x').value)      +(document.getElementById('y').value*document.getElementById('z').value)+(document.getElementById('x').value*document.getElementById('z').value))    }  </script></form>

7 第五步：body的js=JavaScript代码部分。

<!--内置js代码块--><script type="text/javascript">  var canvas = document.createElement('canvas');//原生JS创建canvas  canvas.width = window.innerWidth;//画布的宽就是窗口显示区域的宽  canvas.height = window.innerHeight;//画布的宽就是窗口显示区域的高  document.body.appendChild(canvas); //画布挂在网页body上  //当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。  var ctx = canvas.getContext('2d');  var x = document.querySelector('#x');//找到x  var z = document.querySelector('#z');//找到z  var y = document.querySelector('#y');//找到y  var color = document.querySelector('#color');//找到color   // 定义画图draw函数  function draw() {    // 在给定范围内清空一个矩形    ctx.clearRect(0, 0, canvas.width, canvas.height);    // Wobble the cube using a sine wave    var wobble = Math.sin(Date.now() / 250) * window.innerHeight / 50;     // 画立方体    drawCube(            window.innerWidth / 2,  //x坐标            window.innerHeight / 2 + wobble + y.value / 2,  //y坐标            Number(x.value),  //长            Number(z.value),  //宽            Number(y.value),  //高            color.value  //cube立方体的表面颜色    );     requestAnimationFrame(draw);  }  draw();   // Colour adjustment function==调节颜色函数  function shadeColor(color, percent) {    color = color.substr(1);    var num = parseInt(color, 16),            amt = Math.round(2.55 * percent),            R = (num >> 16) + amt,            G = (num >> 8 & 0x00FF) + amt,            B = (num & 0x0000FF) + amt;    return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);  }   // 定义画立方体的函数  function drawCube(x, y, wx, wy, h, color) {    ctx.beginPath();  //开始一条路径，或重置当前的路径    ctx.moveTo(x, y); //来到这个坐标    ctx.lineTo(x - wx, y - wx * 0.5);    ctx.lineTo(x - wx, y - h - wx * 0.5);    ctx.lineTo(x, y - h * 1);    ctx.closePath();    ctx.fillStyle = shadeColor(color, -10);    ctx.strokeStyle = color;    ctx.stroke();    ctx.fill();     ctx.beginPath();    ctx.moveTo(x, y);    ctx.lineTo(x + wy, y - wy * 0.5);    ctx.lineTo(x + wy, y - h - wy * 0.5);    ctx.lineTo(x, y - h * 1);    ctx.closePath();    ctx.fillStyle = shadeColor(color, 10);    ctx.strokeStyle = shadeColor(color, 50);    ctx.stroke();    ctx.fill();     ctx.beginPath();    ctx.moveTo(x, y - h);    ctx.lineTo(x - wx, y - h - wx * 0.5);    ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));    ctx.lineTo(x + wy, y - h - wy * 0.5);    ctx.closePath();    ctx.fillStyle = shadeColor(color, 20);    ctx.strokeStyle = shadeColor(color, 60);    ctx.stroke();    ctx.fill();  }</script>

8 完整代码：修改标题和删减注释等，稍微简洁些的代码。

<!DOCTYPE html><html><head>  <!--网页标题名-->  <title>高级可变的立方体悬浮</title>  <!--网页CSS设置-->  <style>    /*网页整体设置*/    * {      /*网页背景颜色*/      background: black;    }    body {      /*overflow=网页上下和左右滑动条==隐藏=hodden*/      overflow: hidden;    }    /*表格-调节滑动条设置*/    form {      /*绝对定位,固定的*/      position: absolute;      /*绝对定位是通过下面的指标固定的*/      bottom: 0;      left: 0;      right: 0;      /*背景颜色的方法：white=#efefef=白色*/      background: rgb(0, 225, 255);      /* 顶部| 右边| 底部| 左边*/      padding: 0 0 0 1em;    }  </style></head><body><!--表格-调节滑动条：立方体的长、宽、高和颜色的调节--><form style="width: 150px; height: 500px;">   <!--注意：x、z、y和color的顺序，就是水平由左向右的顺序-->  <!--x=长-->  <input type="text" style="width: 20px; height: 10px;color: white;" value="长">   <input type="range" max="400" min="0" value="100" id="x" onmousemove="xanxia()" /><br />  <span    id="lenghtx" style="width: 50px; height: 20px;color: white;"></span>  <br />  <script>    function xanxia() {      document.getElementById(        'lenghtx'      ).innerHTML = document.getElementById('x').value    }  </script>  <!--z=宽-->  <input type="text" style="width: 20px; height: 10px;color: white;" value="宽">  <input type="range" max="400" min="0" value="100" id="z" onmousemove="zanxia()" /><br />  <span    id="lenghtz" style="width: 50px; height: 20px;color: white;"></span>  <br />  <script>    function zanxia() {      document.getElementById(        'lenghtz'      ).innerHTML = document.getElementById('z').value    }  </script>  <!--y=高-->  <input type="text" style="width: 20px; height: 10px;color: white;" value="高">   <input type="range" max="400" min="0" value="100" id="y" onmousemove="yanxia()" /><br />  <span    id="lenghty" style="width: 50px; height: 20px;color: white;"></span>  <br />  <script>    function yanxia() {      document.getElementById(        'lenghty'      ).innerHTML = document.getElementById('y').value    }  </script>  <!--初始化立方体的颜色：黄色==#DBFF3E-->  <input type="text" style="width: 40px; height: 10px;color: white;" value="颜色">   <input id="color" type="color" value="#DBFF3E">    <br />  <!--体积-->  <input type="text" style="width: 30px; height: 10px;color: white;" value="体积" onmousemove="ztiji()"/>  <br />  <span    id="tiji" style="width: 80px; height: 20px;color: white;"></span>  <br />  <script>    function ztiji() {      document.getElementById(        'tiji'      ).innerHTML = document.getElementById('y').value*document.getElementById('x').value*document.getElementById('z').value    }  </script>  <!--表面积-->  <input type="text" style="width: 40px; height: 10px;color: white;" value="表面积" onmousemove="biaomianji()"/>  <br />  <span    id="bmianji" style="width: 80px; height: 20px;color: white;"></span>  <br />  <script>    function biaomianji() {      document.getElementById(        'bmianji'      ).innerHTML = 2*((document.getElementById('y').value*document.getElementById('x').value)      +(document.getElementById('y').value*document.getElementById('z').value)+(document.getElementById('x').value*document.getElementById('z').value))    }  </script></form><!--内置js代码块--><script type="text/javascript">  var canvas = document.createElement('canvas');//原生JS创建canvas  canvas.width = window.innerWidth;//画布的宽就是窗口显示区域的宽  canvas.height = window.innerHeight;//画布的宽就是窗口显示区域的高  document.body.appendChild(canvas); //画布挂在网页body上  //当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。  var ctx = canvas.getContext('2d');  var x = document.querySelector('#x');//找到x  var z = document.querySelector('#z');//找到z  var y = document.querySelector('#y');//找到y  var color = document.querySelector('#color');//找到color   // 定义画图draw函数  function draw() {    // 在给定范围内清空一个矩形    ctx.clearRect(0, 0, canvas.width, canvas.height);    // Wobble the cube using a sine wave    var wobble = Math.sin(Date.now() / 250) * window.innerHeight / 50;     // 画立方体    drawCube(            window.innerWidth / 2,  //x坐标            window.innerHeight / 2 + wobble + y.value / 2,  //y坐标            Number(x.value),  //长            Number(z.value),  //宽            Number(y.value),  //高            color.value  //cube立方体的表面颜色    );     requestAnimationFrame(draw);  }  draw();   // Colour adjustment function==调节颜色函数  function shadeColor(color, percent) {    color = color.substr(1);    var num = parseInt(color, 16),            amt = Math.round(2.55 * percent),            R = (num >> 16) + amt,            G = (num >> 8 & 0x00FF) + amt,            B = (num & 0x0000FF) + amt;    return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);  }   // 定义画立方体的函数  function drawCube(x, y, wx, wy, h, color) {    ctx.beginPath();  //开始一条路径，或重置当前的路径    ctx.moveTo(x, y); //来到这个坐标    ctx.lineTo(x - wx, y - wx * 0.5);    ctx.lineTo(x - wx, y - h - wx * 0.5);    ctx.lineTo(x, y - h * 1);    ctx.closePath();    ctx.fillStyle = shadeColor(color, -10);    ctx.strokeStyle = color;    ctx.stroke();    ctx.fill();     ctx.beginPath();    ctx.moveTo(x, y);    ctx.lineTo(x + wy, y - wy * 0.5);    ctx.lineTo(x + wy, y - h - wy * 0.5);    ctx.lineTo(x, y - h * 1);    ctx.closePath();    ctx.fillStyle = shadeColor(color, 10);    ctx.strokeStyle = shadeColor(color, 50);    ctx.stroke();    ctx.fill();     ctx.beginPath();    ctx.moveTo(x, y - h);    ctx.lineTo(x - wx, y - h - wx * 0.5);    ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));    ctx.lineTo(x + wy, y - h - wy * 0.5);    ctx.closePath();    ctx.fillStyle = shadeColor(color, 20);    ctx.strokeStyle = shadeColor(color, 60);    ctx.stroke();    ctx.fill();  }</script></body></html>