nuel/typing.html

## typing.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>typing</title>
    <style>
        #text {
            background: #f00;
            color: #fff;
            font-size: 3rem;
            height: 1em;
        }
        .cursor {
            color: blue;
            animation: blink 0.5s infinite;
        }
        @keyframes blink {
            0% { opacity: 1 }
            50% { opacity: 0 }
            100% { opacity: 1 }
        }
    </style>
</head>
<body>
    <h1>typing</h1>
    <div id="text" data-words="apple,pear,banana"></div>
    <hr>
    <script>
        const textElement = document.getElementById('text')
        const words = textElement.dataset.words.split(',')
        const typingSpeed = 100
        const pauseTime = 2000
        let count = 0

        function typeWord(word) {
            let typeCount = 0

            const typeInterval = setInterval(() => {
                if (typeCount <= word.length) {
                    textElement.innerHTML = word.slice(0, typeCount) + '<span class="cursor">|</span>'
                    typeCount ++
                } else {
                    clearInterval(typeInterval)
                    setTimeout(() => {
                        typeWord(nextWord())
                    }, pauseTime)
                }

            }, typingSpeed)
        }

        function nextWord() {
            count ++
            return words[count % words.length]
        }

        typeWord(nextWord())

        // count = count === words.length - 1 ? 0 : count + 1

        // if (count === words.length - 1) {
        //     count = 0
        // } else {
        //     count ++
        // }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>typing</title>
	<style>
	#text {
	background: #f00;
	color: #fff;
	font-size: 3rem;
	height: 1em;
	}
	.cursor {
	color: blue;
	animation: blink 0.5s infinite;
	}
	@keyframes blink {
	0% { opacity: 1 }
	50% { opacity: 0 }
	100% { opacity: 1 }
	}
	</style>
	</head>
	<body>
	<h1>typing</h1>
	<div id="text" data-words="apple,pear,banana"></div>
	<hr>
	<script>
	const textElement = document.getElementById('text')
	const words = textElement.dataset.words.split(',')
	const typingSpeed = 100
	const pauseTime = 2000
	let count = 0

	function typeWord(word) {
	let typeCount = 0

	const typeInterval = setInterval(() => {
	if (typeCount <= word.length) {
	textElement.innerHTML = word.slice(0, typeCount) + '<span class="cursor">\|</span>'
	typeCount ++
	} else {
	clearInterval(typeInterval)
	setTimeout(() => {
	typeWord(nextWord())
	}, pauseTime)
	}

	}, typingSpeed)
	}

	function nextWord() {
	count ++
	return words[count % words.length]
	}

	typeWord(nextWord())

	// count = count === words.length - 1 ? 0 : count + 1

	// if (count === words.length - 1) {
	// count = 0
	// } else {
	// count ++
	// }
	</script>
	</body>
	</html>