HTML
1<p id="text" data-text="["Hello, World!","Hello, DOM!","Hello, JavaScript!"]" data-textindex="-1"></p>
2<input id="next" type="button" value="next" hidden />
3<script>
4'use strict';
5document.getElementById('next').addEventListener('click', {
6 textElement: document.getElementById('text'),
7 viewText: function viewText () {
8 setTimeout(function handleTimeout (element) {
9 var textList = JSON.parse(element.getAttribute('data-text')),
10 listIndex = +element.getAttribute('data-textindex'),
11 text = element.textContent,
12 originalText = textList[listIndex],
13 textLen = text.length + 1;
14
15 element.textContent = originalText.slice(0, textLen);
16
17 if (originalText.length > textLen) {
18 setTimeout(handleTimeout, 200, element);
19 } else {
20 this.document.getElementById('next').hidden = false;
21 }
22 }, 200, this.textElement);
23 },
24 handleEvent: function handleClick (event) {
25 var element = this.textElement,
26 textList = JSON.parse(element.getAttribute('data-text'));
27
28 element.setAttribute('data-textindex', (+element.getAttribute('data-textindex') + 1) % textList.length);
29 element.textContent = '';
30 this.viewText();
31 }
32}, false);
33document.getElementById('next').click();
34</script>
Re: tiegr_0196 さん