前言：
眼前兄弟们对“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>===完美===
学习python的人，有必要知道一点html、css、js=JavaScript。
喜欢的人，点赞、关注、评论、转发和收藏。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #htmlenter
