14-3. JS ๊ฐ์ฒด ์ฐ์ต๋ฌธ์ 1, 2
2021. 10. 20. 17:18ใHTML + CSS + JS
728x90
* ์ฐ์ต๋ฌธ์ 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ์ฌ ์๊ฐ์?</title>
<style>
p {
margin-top:20px;
font-size:1.2em;
text-align: center;
}
.display {
font-size:1.5em;
font-weight:bold;
}
</style>
</head>
<body>
<p>ํ์ฌ ์๊ฐ <span id="current" class="display"></span></p>
<script>
setInterval(displayNow, 1000);
function displayNow() {
var now = new Date();
var currentTime = now.toLocaleTimeString();
document.querySelector("#current").innerHTML = currentTime;
}
</script>
</body>
</html>
* ์ฐ์ต๋ฌธ์ 2
ํ์ฌ ์๊ฐ์ ์๋ ค์ฃผ๋ ํ์ ์ ๊ฐ์ด๋ฐ์ ๋์ฐ๊ธฐ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ์ฌ ์๊ฐ ๋ณด๊ธฐ</title>
<style>
#container{
width:200px;
margin:50px auto;
}
button {
border:1px solid #ccc;
background:#fff;
padding:20px 30px;
}
</style>
</head>
<body>
<div id="container">
<button id="bttn">ํ์ฌ ์๊ฐ ๋ณด๊ธฐ</button>
</div>
<script>
document.getElementById('bttn').onclick = displayTime; // ๋ฒํผ ํด๋ฆญํ๋ฉด displayTime ํจ์ ์คํ
function displayTime(){
var left = (screen.availWidth- 400) / 2 ;
var top = (screen.availHeight- 200) /2 ;
var opt = "left = " + left + ",top = " + top + ", width = " + 400 + ", height = " + 200;
window.open("current.html", "", opt);
}
</script>
</body>
</html>
728x90