haer0248/OBS Marquee and Time.html Secret

## OBS Marquee and Time.html
<!DOCTYPE html>

<head>
    <title>OBS 跑馬燈</title>
    <meta name="title" content="OBS 跑馬燈">
    <meta charset="utf-8">
    <meta name="auhtor" content="Michael Lin (https://www.facebook.com/haer0248)">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <script>
        // 設定訊息
        const messages = [
            '📢 第一則訊息',
            '📢 第二則訊息',
            '📢 第三則訊息'
        ];

        // 顯示時間 true 或 false
        const enableTimer = true;

        // 跑馬燈設定
        const marquee = {
            direction: 'left', // 文字捲動方向，預設 left，可設定為 right
            scrollamount: '6' // 文字捲動速度，預設 6，可設定數字
        }
    </script>

    <style>
        html,
        body {
            /* 字型 */
            font-family: 'Noto Sans TC';

            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        .main-box {
            /*
             * 135deb = 方向
             * rgb(182, 227, 212) 開始的顏色
             * rgb(51, 167, 181) 結束的顏色
             * 顏色一定要用 rgba()
             */
            background-image: linear-gradient(135deg, rgb(182, 227, 212) 0%, rgb(51, 167, 181) 100%);

            /* 文字顏色 */
            color: #000000;

            /* 文字大小 */
            font-size: 120%;

            /* 顯示於底部 */
            bottom: 0;

            /* 顯示於頂部 */
            /* top: 0; */

            margin: 0 auto;
            width: 100%;
            font-weight: bold;
            position: fixed;
            align-items: center;
            box-shadow: 0px -2px 6px 0px rgb(34, 34, 34);
        }

        .main-content {
            display: flex;
            align-items: center;
            place-content: center;
        }

        marquee {
            display: flex;
        }

        #messages {
            left: 8%;
            width: 100%;
        }

        #time {
            display: none;
            width: 10%;
            text-align: center;
        }

        span {
            vertical-align: middle;
            margin-left: 20px;
        }
    </style>
</head>

<body>

    <div class="main-box">
        <div class="main-content">
            <div id="time"></div>
            <div id="messages" data-message></div>
        </div>
    </div>

    <script type="text/javascript">
        const message = document.getElementById('messages');
        const message_box = document.createElement('marquee');

        message_box.setAttribute('id', 'messages');
        message_box.setAttribute('direction', marquee.direction);
        message_box.setAttribute('scrollamount', marquee.scrollamount);

        for (let index = 0; index < messages.length; index++) {
            const element = messages[index];
            const span = document.createElement('span');
            span.innerHTML = element;
            message_box.appendChild(span);
        }
        message.appendChild(message_box);

        // Clock
        const clock = document.querySelector('div[id=time]');
        if (enableTimer === true) {
            clock.style.display = "block";
            (function() {
                var pad = function(x) {
                    return x < 10 ? '0' + x : x;
                }

                var ticktock = function() {
                    let time = new Date();

                    let Y = pad(time.getFullYear());
                    let M = pad(time.getMonth() + 1);
                    let D = pad(time.getDate());
                    let h = pad(time.getHours());
                    let m = pad(time.getMinutes());
                    let s = pad(time.getSeconds());
                    let day = time.getDay();
                    let current_time = '';

                    current_time += '🕒 ' + [h, m].join(':');

                    clock.innerHTML = current_time;
                };

                ticktock();

                setInterval(ticktock, 1000);
            }());
        }
    </script>

</body>

</html>
	<!DOCTYPE html>

	<head>
	<title>OBS 跑馬燈</title>
	<meta name="title" content="OBS 跑馬燈">
	<meta charset="utf-8">
	<meta name="auhtor" content="Michael Lin (https://www.facebook.com/haer0248)">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

	<script>
	// 設定訊息
	const messages = [
	'📢 第一則訊息',
	'📢 第二則訊息',
	'📢 第三則訊息'
	];

	// 顯示時間 true 或 false
	const enableTimer = true;

	// 跑馬燈設定
	const marquee = {
	direction: 'left', // 文字捲動方向，預設 left，可設定為 right
	scrollamount: '6' // 文字捲動速度，預設 6，可設定數字
	}
	</script>

	<style>
	html,
	body {
	/* 字型 */
	font-family: 'Noto Sans TC';

	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	}

	.main-box {
	/*
	* 135deb = 方向
	* rgb(182, 227, 212) 開始的顏色
	* rgb(51, 167, 181) 結束的顏色
	* 顏色一定要用 rgba()
	*/
	background-image: linear-gradient(135deg, rgb(182, 227, 212) 0%, rgb(51, 167, 181) 100%);

	/* 文字顏色 */
	color: #000000;

	/* 文字大小 */
	font-size: 120%;

	/* 顯示於底部 */
	bottom: 0;

	/* 顯示於頂部 */
	/* top: 0; */

	margin: 0 auto;
	width: 100%;
	font-weight: bold;
	position: fixed;
	align-items: center;
	box-shadow: 0px -2px 6px 0px rgb(34, 34, 34);
	}

	.main-content {
	display: flex;
	align-items: center;
	place-content: center;
	}

	marquee {
	display: flex;
	}

	#messages {
	left: 8%;
	width: 100%;
	}

	#time {
	display: none;
	width: 10%;
	text-align: center;
	}

	span {
	vertical-align: middle;
	margin-left: 20px;
	}
	</style>
	</head>

	<body>

	<div class="main-box">
	<div class="main-content">
	<div id="time"></div>
	<div id="messages" data-message></div>
	</div>
	</div>

	<script type="text/javascript">
	const message = document.getElementById('messages');
	const message_box = document.createElement('marquee');

	message_box.setAttribute('id', 'messages');
	message_box.setAttribute('direction', marquee.direction);
	message_box.setAttribute('scrollamount', marquee.scrollamount);

	for (let index = 0; index < messages.length; index++) {
	const element = messages[index];
	const span = document.createElement('span');
	span.innerHTML = element;
	message_box.appendChild(span);
	}
	message.appendChild(message_box);

	// Clock
	const clock = document.querySelector('div[id=time]');
	if (enableTimer === true) {
	clock.style.display = "block";
	(function() {
	var pad = function(x) {
	return x < 10 ? '0' + x : x;
	}

	var ticktock = function() {
	let time = new Date();

	let Y = pad(time.getFullYear());
	let M = pad(time.getMonth() + 1);
	let D = pad(time.getDate());
	let h = pad(time.getHours());
	let m = pad(time.getMinutes());
	let s = pad(time.getSeconds());
	let day = time.getDay();
	let current_time = '';

	current_time += '🕒 ' + [h, m].join(':');

	clock.innerHTML = current_time;
	};

	ticktock();

	setInterval(ticktock, 1000);
	}());
	}
	</script>

	</body>

	</html>