如何使用随机句子作为 html spinner loader

Question

我有以下代码，它与微调器一起运行得很好：

<!DOCTYPE html>
<html>
       <head>
       <title> Do Something </title>
       <link rel="stylesheet" href= "css/style.css"/>
       <meta http-equiv="refresh" content="5" charset="utf-8">
       </head>
<body>
    <div id="container" class='loading' >
     <div class='loading-text'>Processing</div>
     <img class="loading-gif" id="processing" src= "images/squares.gif"  alt="Processing" />
     </div>

</body>
</html>

看起来像这样：

现在不再使用静态文本 "Processing"。我想生成从存储库中挑选的句子（例如著名作者的引述）。我该怎么做？

Answer 1

这是一个使用笑话 API 的解决方案，但您可以使用您想要的任何引用 API。淡入淡出 in/out 并不完美，但你得到了图片（每 6 秒更新一次）。

Codepen link

setInterval(function() {
  $.ajax({
    dataType: "json",
    url: "http://api.icndb.com/jokes/random?firstName=John&amp;lastName=Doe",
    success: function(data) {
      $('.loading-text').fadeOut().delay(100).text(data.value.joke).delay(100).fadeIn();
    }
  });
}, 6000);

Answer 2

您似乎没有使用 jQuery，所以这是普通 javascript 版本：https://jsfiddle.net/Lwp4zcm2/1/

var strings = [
  'For he who can wait, everything comes in time.',
    'We will wait to see if it is a doozy before we decide how to cover it, and what it all means.',
    'We need to talk about what we are going to do and see and decide. We\'ll have to wait and see.'
];

var rand = strings[Math.floor(Math.random() * strings.length)];
document.getElementById('loading-text').innerHTML = rand;

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #ddd;
    padding-top: 200px;
}
.loading-gif {
    display: block;
    width: 80px;
    height: 80px;
    background: #aaa;
    margin: 10px auto;
}

<div id="container" class='loading' >
     <div id='loading-text' class='loading-text'>Processing</div>
     <img class="loading-gif" id="processing" src= "images/squares.gif"  alt="Processing" />
</div>

这实际上是不言自明的，但您首先要有一组引号，然后随机选择一个并"append"它到您的内部文本元素。

如何使用随机句子作为 html spinner loader

How to use random sentences as html spinner loader

html

javascript

css

spinner