單擊按鈕時創建piramid

-2

我現在的結果是這樣的

我想是這樣的

<button id="piramid" onclick="piramid()">test</button>

繼承人的代碼

https://jsfiddle.net/k22bf4o4/

如何循環，結果會變成最後一張圖片？謝謝你的時間

來源

2017-07-17 GerryofTrivia

那麼什麼是你的問題？ – Alex

我更新了說明 – GerryofTrivia

這看起來像作業。你應該自己解決它！ –

以前的評論是正確的，你不應該在StackOverflow上發佈你的作業。這就是說，我想爲自己做一件有趣的運動。

對於這些數字，我現在看到數字源於兩行高的金字塔，它們顛倒了。例如。從頂部開始第三行：1 + 2 = 3其中3將是倒置金字塔的頂部，基本行1和2（行上方的行3）。一旦你看到了，這是由你或其他人來編寫代碼。

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Pyramid</title> 
</head> 

<body></body> 

<script src="pyramid.js"></script> 

</html>

pyramid.js

let blockWidth = 20, 
    blockHeight = 20, 
    blockCountBaseRow = 10, 
    blockOffset = blockWidth/2; 
let drawSurfaceWidth = blockWidth * blockCountBaseRow, 
    drawSurfaceHeight = blockHeight * blockCountBaseRow, 
    drawSurfaceCenter = drawSurfaceWidth/2; 

createDrawingSurface(); 
drawPyramid(); 

function createDrawingSurface() { 
    let body = document.getElementsByTagName('body').item(0); 
    body.innerHTML += '<div id="drawingSurface" style="' + 
     'position:absolute;' + 
     'width:' + drawSurfaceWidth + 'px;' + 
     'height:' + drawSurfaceHeight + 'px;' + 
     'background:#EEE;">' + 
     '</div>'; 
} 

function drawPyramid() { 
    for (let row = 1; row < blockCountBaseRow + 1; row++) { 
     let left = calculateLeftFirstBlock(row); 
     let top = calculateTop(row); 
     for (let j = 1; j < row + 1; j++) { 
      addBlock(left, top); 
      left += blockWidth; 
     } 
    } 
} 

function addBlock(left, top) { 
    let drawingSurface = document.getElementById("drawingSurface"); 
    drawingSurface.innerHTML += '<div style="' + 
     'position:absolute;' + 
     'left:' + left + 'px;' + 
     'top:' + top + 'px;' + 
     'width:' + blockWidth + 'px;' + 
     'height:' + blockHeight + 'px;' + 
     'border:1px solid black; ' + 
     'background:#DDD;">' + 
     '</div>'; 
} 

function calculateLeftFirstBlock(row) { 
    return drawSurfaceCenter - blockOffset * row; 
} 

function calculateTop(row) { 
    return (row - 1) * blockHeight; 
}

來源

2017-07-17 11:35:40 progonkpa

單擊按鈕時創建piramid

回答

相關問題