整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          求立方體的體積和表面積,不難!用html制作立方體自動生成

          說明:

          =====

          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。

          喜歡的人,點贊、關注、評論、轉發和收藏。

          當今信息爆炸的時代,寫作已經成為了一項不可或缺的技能。而在這個數字化時代,人工智能也逐漸滲透到各個領域,包括寫作。ai文章自動生成代碼正是其中的一項重要應用。作為一位資深的寫作教練,我將與大家分享一些打造高效的ai文章自動生成代碼技巧。

          1.熟悉編程語言

          首先,在開始使用ai文章自動生成代碼之前,我們需要熟悉所使用的編程語言。掌握Python、JavaScript等常用編程語言對于理解和運用ai文章自動生成代碼至關重要。

          2.理解自然語言處理原理

          ai文章自動生成代碼的核心是自然語言處理(NLP)。理解NLP的基本原理和常見算法,比如詞向量、文本分類、序列生成等,可以幫助我們更好地利用ai生成高質量的文章。

          3.收集并整理大量文本數據

          為了讓ai文章自動生成代碼更加準確和有趣,我們需要收集并整理大量的文本數據作為訓練樣本。這些數據可以來自于網絡、書籍、論文等各種來源。同時,我們還需要對數據進行清洗和預處理,以提高訓練效果。

          4.設計合適的模型架構

          在使用ai文章自動生成代碼時,我們需要設計合適的模型架構??梢赃x擇基于循環神經網絡(RNN)、長短期記憶網絡(LSTM)或者變換器(Transformer)等常見的NLP模型。根據具體需求和數據特點進行調整和優化。

          5.進行模型訓練和調優

          完成模型架構設計后,我們需要進行模型的訓練和調優。通過迭代訓練和調整超參數,不斷提升模型在生成文章方面的能力。同時,注意避免過擬合和欠擬合問題,以保證生成文章的質量。

          6.結果評估和改進

          在使用ai文章自動生成代碼之后,我們需要對生成的結果進行評估和改進??梢岳萌斯ぴu估、自動評估指標等方法來評判生成文章的質量,并根據反饋結果進行相應的改進。

          7.注意版權和倫理問題

          在使用ai文章自動生成代碼時,我們要注意尊重版權和倫理問題。避免直接復制他人作品,并注意不要產生誤導或有害信息。同時,也要遵守相關法律法規和道德規范。

          8.結合人工編輯進行優化

          9.不斷學習和探索新技術

          最后,作為一名寫作教練,我鼓勵大家不斷學習和探索新技術。ai文章自動生成代碼只是技術的一小部分,未來還會有更多創新的應用。保持學習的態度,與時俱進,才能在寫作領域中不斷進步。

          通過以上九個方面的經驗分享,我們可以更好地打造高效的ai文章自動生成代碼技巧。希望這些經驗對大家有所啟發,并能在寫作過程中發揮巨大的幫助作用。讓我們一起迎接數字化時代的挑戰,創造出更加優秀的作品!

          尋找熱愛表達的你#


          "一鍵將網頁截圖制作成HTML網頁"是指一種技術,它允許用戶通過簡單的操作,將網頁的截圖轉換成HTML代碼的網頁。這通常涉及到自動布局、樣式提取和代碼生成。以下是實現這一功能的相關技術和步驟:

          1. 截圖捕捉:首先,需要有一個方法來捕捉網頁的截圖,這可以通過瀏覽器插件、屏幕捕獲工具或專門的應用程序來完成。

          2. 圖像處理:捕捉到的截圖可能需要進行預處理,比如裁剪、壓縮或調整分辨率,以確保圖像的質量。

          3. 元素識別:使用圖像識別技術來分析截圖,識別網頁中的元素,比如文本、按鈕、圖片等。

          4. 布局分析:基于識別出的元素,分析頁面的布局信息,包括元素的大小、位置和層級。

          5. 樣式解析:提取頁面的樣式信息,包括顏色、字體、間距等,并將它們轉換為CSS代碼。

          6. HTML生成:根據布局和樣式信息,生成HTML結構代碼,將截圖中的元素轉換為HTML標簽。

          7. 代碼優化:對生成的HTML代碼進行優化,確保代碼的可讀性、維護性和性能。

          8. 響應式設計:確保生成的網頁代碼能夠適應不同的屏幕尺寸和設備,實現響應式布局。

          9. 交互性實現:如果截圖中的頁面包含交互元素,需要添加相應的JavaScript代碼來實現這些交互。

          10. 一鍵操作:提供一個簡單的用戶界面,用戶只需點擊一個按鈕,就可以完成截圖到HTML的轉換。

          11. 預覽功能:在轉換過程中提供實時預覽,讓用戶可以實時看到轉換效果。

          12. 自定義選項:允許用戶對生成的HTML代碼進行自定義,比如修改布局、添加額外的樣式或功能。

          13. 保存和導出:用戶可以保存或導出生成的HTML代碼,以便進一步使用或分享。

          14. 錯誤處理:在轉換過程中識別和處理潛在的錯誤,比如布局沖突或樣式問題。

          15. 兼容性測試:確保生成的網頁在不同的瀏覽器和設備上都能正常顯示和工作。

          16. 安全性考慮:生成的代碼應遵循安全最佳實踐,避免潛在的安全風險。

          17. 用戶反饋:收集用戶反饋,不斷改進轉換算法和用戶體驗。

          18. 開源和社區支持:作為開源項目,鼓勵社區參與貢獻代碼和改進功能。

          這種一鍵轉換技術可以大大提高網頁開發的效率,尤其是對于快速原型設計和演示目的。然而,需要注意的是,自動生成的代碼可能需要進一步的人工審查和調整,以確保最終產品的質量和性能。此外,一些復雜的網頁效果和動態交互可能需要手動編寫代碼來實現。


          主站蜘蛛池模板: 精品人妻无码一区二区色欲产成人| 男人的天堂av亚洲一区2区| 中文字幕一区二区三区人妻少妇| 精品一区二区三区无码免费直播 | 日本精品3d动漫一区二区| 国产成人久久精品一区二区三区| 国产日韩视频一区| 天堂成人一区二区三区| 国产日韩一区二区三区| 亚洲蜜芽在线精品一区| 国产在线一区二区三区| 伊人色综合一区二区三区| 中文字幕日本一区| 丝袜人妻一区二区三区网站| 一区国严二区亚洲三区| 日韩少妇无码一区二区三区| 日韩一区二区三区在线| 精品视频一区在线观看| 免费一区二区视频| 一区二区三区四区视频在线| 亚洲AV无码一区二三区| 波多野结衣一区二区三区aV高清| 久久国产午夜精品一区二区三区| 国产福利电影一区二区三区久久久久成人精品综合 | 国产精品区一区二区三在线播放| 精品人妻一区二区三区毛片| 国产精品一区12p| 在线精品亚洲一区二区小说| 久久一区二区三区精品| 亚洲国产成人精品无码一区二区 | 蜜桃视频一区二区三区| 日本夜爽爽一区二区三区| 一区二区三区在线免费| 日韩精品无码一区二区三区AV| 亲子乱av一区二区三区| 亚洲一区二区影院| 久久精品无码一区二区三区免费| 国产嫖妓一区二区三区无码| 久久精品国产亚洲一区二区三区| 久久久精品一区二区三区| 无码国产精品一区二区免费式直播 |