前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

2024年11月14日

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

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>

===完美===

学习python的人，有必要知道一点html、css、js=JavaScript。

喜欢的人，点赞、关注、评论、转发和收藏。

标签：css去除滚动条 

作者:whsf66 , 分类:前端教程 , 浏览:10 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言