如何在元素内使用 Javascript 绘制正方形？
Posted
技术标签:
【中文标题】如何在元素内使用 Javascript 绘制正方形？【英文标题】：How to draw a square using Javascript inside an element? 【发布时间】：2016-01-23 13:58:00 【问题描述】：我做了很多研究，但不确定最好的方法是什么。我有一个 3 行 3 列的剑道网格（表格）。我在初始页面加载时显示一个表只有第一列，然后我调用 AJAX 方法来检索其余数据并将 整个表替换为新的 html。
----------------
| 01 | | |
| 02 | | |
| 03 | | |
----------------
我用显示如下表格的 html 替换整个表格：
----------------
| 01 | hi | gr |
| 02 | hi | sd |
| 03 | fe | sf |
----------------
我想要做的是，以某种方式在初始空表中的空列上“绘制”一个正方形（仅填充第一列），以便我可以在中心显示一条消息。
实现这一目标的最佳方法是什么？
【问题讨论】：
你想用“whut”画一个正方形吗？开放解释...首先想到：使用CSS =>background-color background-image border，第二个想法：您喜欢输出哪些字符，以编程方式绘制正方形▄ ■？
我基本上想用其中包含“正在加载...”的文本“覆盖”我的表格。我希望我要覆盖的这个元素大致位于我的桌子的中心。即使调整了窗口大小，我也希望这个元素大致保持在表格的中心。这可能吗？
【参考方案1】：
这是您要查找的示例。由于单元格边框间距或其他原因，存在 2 px 错误，但我现在太累了，无法找到解决方案。您的 div 的高度等于 padding-top+height。需要填充以将加载文本垂直居中放置。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#mytable
position: absolute;
border: 1px solid black;
width: 20%;
width: 100px;
height: 100px;
#box
padding-top: 40px;
text-align: center;
position: absolute;
margin: 0px;
z-index: 40;
border: 1px solid blue;
width: 100px;
height: 60px;
</style>
</head>
<body>
<table id="mytable">
<tr>
<td>Cat</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Dog</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Parrot</td>
<td></td>
<td></td>
</tr>
</table>
<div id="box">
Loading...
</div>
</body>
</html>
【讨论】：
我基本上想用其中包含“正在加载...”的文本“覆盖”我的表格。我希望我要覆盖的这个元素大致位于我的桌子的中心。即使调整了窗口大小，我也希望这个元素大致保持在表格的中心。这可能吗？这个答案是否可以解决这个问题？ 您还可以为其设置背景以隐藏表格或使其小于表格。 加载表格数据时，只需将叠加层的显示属性更改为“无”； 您将表格的宽度和高度设置为常数值，我不确定表格的高度和宽度（取决于加载的数据和窗口的大小）。我该如何解决这个问题？ 你真的不能。但是你可以只显示覆盖并隐藏表格，直到它加载然后交换它们。当然，您也可以以 % 的形式给出它，但如果您不知道您的桌子有多大，那将无济于事。【参考方案2】：向表loading 添加一个类并用CSS 标记它。
当 AJAX 调用为 done() 时，删除 loading 类。
不管你用 Kendo 做什么，这个例子在 jQuery 中只是暗示性的。
var table = $('#table');
table.addClass('loading');
$.ajax(ajaxOptions).done(function()
table.removeClass('loading');
);
然后，对于 CSS，在 rgba(238, 238, 238, 0.4) 或 ajax loader 中使用透明的 background-color（因此得名）。
table position: relative;
table.loading:before
width: 100%;
height: 100%;
content: 'loading';
background-color: rgba(234,234,234,0.4);
padding: 70%;
box-sizing: border-box;
position: absolute;
text-align: center;
伪选择器:before 将在table 上创建一个隐藏层，并且仅在添加loading 类时可见。一旦 AJAX 调用为 done()，您将再次将其删除。
水平居中可以使用text-align 完成，但垂直居中只能使用height 或min-height。
您可以通过使用第二个隐藏层 :after 来解决该问题。
DEMO
【讨论】：
以上是关于如何在元素内使用 Javascript 绘制正方形？的主要内容，如果未能解决你的问题，请参考以下文章