egoing · April 10, 2022 12:42 · egoing · Apr 10, 2022
diff --git a/interval.html b/interval.html
 <html>
    <body>

        <div id="temperature">
            <div>기온</div>
            <ol>
                <li id="element-0" style="display:block;">서울 1°C</li>
                <li id="element-1">청주 2°C</li>
                <li id="element-2">성주 3°C</li>
            </ol>
        </div>
        
        <style>
            div>*{
                border:5px solid black;
                padding:0;
                margin:0;
                box-sizing:content-box;
                padding:5px;
            }
            div>*:first-child{
                border-right:0;
                background-color:black;
                color:white;
            }
            #temperature {
                display:grid;
                grid-template-columns: 100px 150px;
            }
            #temperature ol li {
                display:none;
            }
        </style>
        <script>
            let i = 0;
            setInterval(function(){
                console.log(i);
                i = (i + 1)%3;
                let lis = document.querySelectorAll('ol li');
                for(let i=0; i<lis.length; i++){
                    lis[i].style.display = 'none';
                }
                document.querySelector('#element-'+i).style.display = 'block';
            }, 1000);
        </script>
    </body>
 </html>
	<html>
	<body>

	<div id="temperature">
	<div>기온</div>
	<ol>
	<li id="element-0" style="display:block;">서울 1°C</li>
	<li id="element-1">청주 2°C</li>
	<li id="element-2">성주 3°C</li>
	</ol>
	</div>

	<style>
	div>*{
	border:5px solid black;
	padding:0;
	margin:0;
	box-sizing:content-box;
	padding:5px;
	}
	div>*:first-child{
	border-right:0;
	background-color:black;
	color:white;
	}
	#temperature {
	display:grid;
	grid-template-columns: 100px 150px;
	}
	#temperature ol li {
	display:none;
	}
	</style>
	<script>
	let i = 0;
	setInterval(function(){
	console.log(i);
	i = (i + 1)%3;
	let lis = document.querySelectorAll('ol li');
	for(let i=0; i<lis.length; i++){
	lis[i].style.display = 'none';
	}
	document.querySelector('#element-'+i).style.display = 'block';
	}, 1000);
	</script>
	</body>
	</html>