单击按钮时创建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

回答

相关问题