Question

I would like to fill the visible window in a webpage with random digits. The way I am currently trying to do this involves a long string of random digit first, and then using the following property on a div:

 #mydiv{
      font-family: "Inconsolata", monospace;
      word-break: break-all;
      font-size: 3em;
      color: #202020;
      height: 100%;
      width: 100%;
      overflow-y:hidden;
      }

https://jsfiddle.net/4ztpbnm0/1/

It works(ish) on Chrome, but it takes a very noticeable amount of time to reflow after resizing the browser window. Is there any way to make this seamless?

Answer 1

使用$.get url, {t: key, o: @state[key].length, l: @state[key].length + @state.defaultAmount}, (data) => if key == "allScores" data.allScores = data.allScores.data[@props.currentMode] $.each data[key].data, (i, o) => @setState (state) => result = {} result[key] = state[key].concat(o) result代替overflow-wrap: break-word。

https://jsfiddle.net/746g71wb/

word-break: break-all最近已重命名为word-wrap，因此要支持其他浏览器，您可能需要同时指定这两种浏览器：

overflow-wrap

可能相关的Chrome错误：https://bugs.chromium.org/p/chromium/issues/detail?id=591793

Answer 2

我建议使用SVG背景图片（由all current browsers支持）。您可以添加任意数量的随机＆＃39;你希望SVG图块的数字看起来令人信服：

＆＃13;

body {
  background-color: black;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='400px' width='385px'><text x='0' y='0' font-size='40px' font-family='monospace' fill='%23202020'><tspan x='0' dy='40px'>0011010101010100</tspan><tspan x='0' dy='40px'>0101001010100101</tspan><tspan x='0' dy='40px'>1010101000010001</tspan><tspan x='0' dy='40px'>0101010101000100</tspan><tspan x='0' dy='40px'>0010110101010101</tspan><tspan x='0' dy='40px'>0101000010101010</tspan><tspan x='0' dy='40px'>1010101101110101</tspan><tspan x='0' dy='40px'>1010010010010110</tspan><tspan x='0' dy='40px'>0100110101010101</tspan><tspan x='0' dy='40px'>1011100010111001</tspan></text></svg>");
}

＆＃13;

即使在一台已有8年历史的笔记本电脑上，它的性能也非常快。如果你对随机性很认真，可以通过JavaScript生成SVG并用完全随机的数字填充它。

另见Is there a way to use use text as the background with CSS?

Answer 3

Instead of concatenating the string, use an array. It's much faster.

bgtext = [];
for (var i = 0; i < 173; ++i) {
  bgtext.push(Math.random() < 0.5 ? '1' : '0');
}

for (var i = 0; i < 6; ++i) {
  bgtext.push(bgtext.join(''))
};

function loadbg() {

	bgtext = bgtext.join('');

  document.getElementById('background').innerHTML = bgtext;
}
loadbg();

<body>
  <div id="background">
  </div>
</body>

Fill the browser window with random digits

3 个答案: