33 lines
1.3 KiB
HTML
33 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<title>Cthulhu Changing Document Probe</title>
|
|
<style>section { min-height: 120px; } .rows { display: grid; grid-template-columns: 1fr 1fr; }</style>
|
|
<h1 tabindex="0">Changing document</h1>
|
|
<div class="rows" id="rows"></div>
|
|
<h2>Statistics</h2>
|
|
<p id="counter">Current total 10000 units</p>
|
|
<p>Following stable line</p>
|
|
<div role="group" aria-label="Custom action" onclick="document.getElementById('action-result').textContent = 'Action count ' + (++actionCount)">Visible custom label</div>
|
|
<div id="action-result" role="status" aria-live="polite" aria-atomic="true"></div>
|
|
<label>Editable value <input></label>
|
|
<button>Ordinary action</button>
|
|
<script>
|
|
const rows = document.getElementById('rows');
|
|
for (let index = 1; index <= 10; index++) {
|
|
const section = document.createElement('section');
|
|
const heading = document.createElement('h3');
|
|
heading.textContent = `Section ${index}`;
|
|
section.append(heading, document.createTextNode('Changing value '), document.createElement('span'));
|
|
rows.append(section);
|
|
}
|
|
let value = 10000;
|
|
let actionCount = 0;
|
|
setInterval(() => {
|
|
value++;
|
|
document.querySelectorAll('section span').forEach(span => span.replaceChildren(String(value)));
|
|
document.getElementById('counter').replaceChildren(`Current total ${value} units`);
|
|
}, 80);
|
|
</script>
|
|
</html>
|