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

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

＆＃13;

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;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

它实际上是不言自明的，但你首先有一系列引号，然后选择一个随机的＆＃34;追加＆＃34;它是你的内心文本元素。

Answer 2

使用jokes API获得解决方案，但您可以使用您想要的任何引用API。淡入/淡出并不完美，但你得到了图片（每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);

如何使用随机句子作为html spinner加载器

2 个答案: