haer0248/OBS Console marquee.html Secret

## OBS Console marquee.html
<!DOCTYPE html>
<html lang="zh-tw">
    <head>
        <title>OBS 輸入中樣式跑馬燈</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
            @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');

            :root {
                /* 文字顏色 */
                --color: #a03737;

                /* 文字大小 */
                --size: 60px;

                /* 字型 */
                --font: 'Noto Sans TC';
            }

            html,
            body {
                padding: 0;
                margin: 0;
            }

            body {
                font-size: var(--size);
                font-family: var(--font);
                color: var(--color);
            }

            .hidden {
                opacity: 0;
            }

            .console-underscore {
                display: inline-block;
                position: relative;
                left: -1px;
                color: var(--color);
            }
        </style>
    </head>

    <body>
        <span id="text"></span>
        <div class="console-underscore" id="console">_</div>
    </body>

    <script defer>
        var textArray = ['中文測試', '第二行', '第三行'];

        consoleText(textArray, 'text');

        function consoleText(words, id) {
            /* 換行秒數在這邊改 */
            let seconds = 1;
            let visible = true;
            let con = document.getElementById('console');
            let letterCount = 1;
            let x = 1;
            let waiting = false;
            let target = document.getElementById(id);
            window.setInterval(function () {
                if (letterCount === 0 && waiting === false) {
                    waiting = true;
                    target.innerHTML = words[0].substring(0, letterCount)
                    window.setTimeout(function () {
                        let usedWord = words.shift();
                        words.push(usedWord);
                        x = 1;
                        letterCount += x;
                        waiting = false;
                    }, 1000)
                } else if (letterCount === words[0].length + 1 && waiting === false) {
                    waiting = true;
                    window.setTimeout(function () {
                        x = -1;
                        letterCount += x;
                        waiting = false;
                    }, seconds * 1000)
                } else if (waiting === false) {
                    target.innerHTML = words[0].substring(0, letterCount)
                    letterCount += x;
                }
            }, 60)
            window.setInterval(function () {
                if (visible === true) {
                    con.className = 'console-underscore hidden'
                    visible = false;
                } else {
                    con.className = 'console-underscore'
                    visible = true;
                }
            }, 400)
        }
    </script>
</html>
	<!DOCTYPE html>
	<html lang="zh-tw">
	<head>
	<title>OBS 輸入中樣式跑馬燈</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>
	@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');

	:root {
	/* 文字顏色 */
	--color: #a03737;

	/* 文字大小 */
	--size: 60px;

	/* 字型 */
	--font: 'Noto Sans TC';
	}

	html,
	body {
	padding: 0;
	margin: 0;
	}

	body {
	font-size: var(--size);
	font-family: var(--font);
	color: var(--color);
	}

	.hidden {
	opacity: 0;
	}

	.console-underscore {
	display: inline-block;
	position: relative;
	left: -1px;
	color: var(--color);
	}
	</style>
	</head>

	<body>
	<span id="text"></span>
	<div class="console-underscore" id="console">_</div>
	</body>

	<script defer>
	var textArray = ['中文測試', '第二行', '第三行'];

	consoleText(textArray, 'text');

	function consoleText(words, id) {
	/* 換行秒數在這邊改 */
	let seconds = 1;
	let visible = true;
	let con = document.getElementById('console');
	let letterCount = 1;
	let x = 1;
	let waiting = false;
	let target = document.getElementById(id);
	window.setInterval(function () {
	if (letterCount === 0 && waiting === false) {
	waiting = true;
	target.innerHTML = words[0].substring(0, letterCount)
	window.setTimeout(function () {
	let usedWord = words.shift();
	words.push(usedWord);
	x = 1;
	letterCount += x;
	waiting = false;
	}, 1000)
	} else if (letterCount === words[0].length + 1 && waiting === false) {
	waiting = true;
	window.setTimeout(function () {
	x = -1;
	letterCount += x;
	waiting = false;
	}, seconds * 1000)
	} else if (waiting === false) {
	target.innerHTML = words[0].substring(0, letterCount)
	letterCount += x;
	}
	}, 60)
	window.setInterval(function () {
	if (visible === true) {
	con.className = 'console-underscore hidden'
	visible = false;
	} else {
	con.className = 'console-underscore'
	visible = true;
	}
	}, 400)
	}
	</script>
	</html>