在循环访问数据库中的项时，如何显示视觉反馈？

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，这取决于您是否有结果。你甚至可以创建一个@keyframe动画。有很多种方法。https://spangle.com.au