html - 如何在CSS中显示随机句子

Question

我想在加载动画上使用一些句子。

“你减肥了吗？”, “数到10”， “为什么如此严肃？”， “不是你，是我。”

我有这个 css 代码来呈现加载:

.loading .spinner:Before{content:"Discovering new ways of making you wait..."; position:absolute; bottom:50px; text-align:center; left:0; right:0; font-size:23px}

怎样才能让句子随机出现？

非常感谢您的帮助:)

Answer 1

您可以将 content 属性设置为元素的 data-content 属性，然后使用 JavaScript 将数组中的值随机设置为该属性。

const possibleContent = ["Have you lost weight?", "Just count to 10", "Why so serious?", "It's not you. It's me."];

spinner.setAttribute('data-content', possibleContent[Math.floor(Math.random() * possibleContent.length)]);

.loading .spinner:Before {
  content: attr(data-content);
  position: absolute;
  bottom: 50px;
  text-align: center;
  left: 0;
  right: 0;
  font-size: 23px
}

<div class="loading"><div class="spinner" id="spinner"></div></div>