javascript - 循环遍历数据库中的元素时如何显示视觉反馈？

Question

我正在制作一个元素拣选系统，用户将在其中单击一个按钮，它将从数据库中检索要拣选的元素。选择后，用户将单击该按钮，它将转到表中的下一个元素。我想在用户每次点击时展示一种视觉显示或反馈。

假设有 10 个元素需要选择，我会使用一个每次递增直到完成的进度条，或者甚至像 1//10、2/10 等文本指示器。

为了引用，我将包含我的相关代码

这是js

<script >
var offset = 0;
$(document).ready(function() {
$('#button1').click(function(e) {
    $("#div1").empty();
    // pass offset value with GET request
    $.getJSON("getItem.php?offset=" + offset, function(result) {

    offset++; // increment the value after sucessful AJAX call
    $.each(result, function(i, field) {
        $("#div1").empty();
        $("#div1").append(JSON.stringify(result)); //alert(JSON.stringify(data));
    });
});
});
}); 
</script>

和我的 php

mysqli_select_db($con,"orders");
$rows = null;
// Get the offset value
$offset = empty($_GET['offset']) ? 0 : $_GET['offset'];

$sql="SELECT * FROM orders Limit $offset, 1 "; // pass the offset value to LIMIT query

$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_assoc($result))
$rows[] = array_map('utf8_encode', $row);

echo json_encode($rows);

我已经做了一些谷歌搜索，但找不到任何与我的想法相关的例子，如果有人知道如何或可以指出与我类似的问题的解决方案，将不胜感激

Answer 1

我不是 100% 确定您想要的是什么，但是如果您想要一个简单的加载动画，您可以使用 CSS、JS 和 Html 的组合来实现。 创建 div，并为其指定类名或 ID。例如加载 用于加载的 CSS 看起来像这样:

.loading{
  z-index: 10;
  width: 100%;
  height: 100vh;
  background-color: rgb(255,255,255); /*What ever color you want*/
  position: absolute;
  top: 0;
  left: 0;
}

我不确定你想在加载下一个结果时显示什么，所以为了获得灵感，看看 codePen 上的加载动画。例如 https://codepen.io/Manoz/pen/pydxK

在 CSS 中，创建一个名为 displayNone 的类。 CSS 看起来像

.displayNone{
  display:none;
}

然后根据是否有结果，使用JS在加载类中添加/删除displayNone。您甚至可以只创建一个@keyframes 动画。很多方法。 https://spangle.com.au