[HTML] 자바스크립트로 동적 요소 추가하기
주제: 자바스크립트 활용
결과물
1. Right.js
var image=['Dockericon.jpg', 'CSSicon.jpg', 'html5icon.jpg'];
function imgchange(){
var img = image[Math.floor(Math.random() * 3)];
document.getElementById("img").src = img;
}- css 당시에는 본문창에 있는 3개의 사진이 있었지만 그 이미지 들을 하나로 모았고 “이미지 변경”버튼을 누르면 imgchange()함수에서 random변수를 통해 해당 이미지들을 무작위로 돌려줍니다.
- 이미지를 한쪽으로 몰아서 오른쪽 공간이 비어서 바로가기 메뉴 창을 만들었습니다.
const clock = document.querySelector('.h1-clock');
function Time(){
const today = new Date();
const mon = today.getMonth();
const date = today.getDate();
const day = today.getDay();
const week = ['일','월','화','수','목','금','토'];
const hour = today.getHours();
const min = today.getMinutes();
const sec = today.getSeconds();
clock.innerHTML = `${mon+1}월 ${date}일 ${week[day]}요일<br> ${hour<10 ? `0${hour}`:hour} : ${min<10 ? `0${min}`:min} : ${sec<10 ? `0${sec}`:sec}`;
}
function init(){
setInterval(Time, 1000);
}
init();- clock.js는 시계를 나타내 줍니다. 월, 일, 요일, 시간을 나타내주고 현재가 몇 초인지도 알려줍니다.
- 시간을 알려주는 변수를 선언하고 innerhtml 값을 선언해 매순간 시간이 바뀔 수 있도록 설정해 주었습니다.
- 마지막으로 init이라는 함수를 선언해 setInterval 함수를 선언해서 time함수를 일정한 시간 간격을 두고 반복해서 실행하게 두었습니다.
3. Site.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #92A8D1;
color: whitesmoke;
text-align:center;
}
a:link{
color:whitesmoke;
text-decoration-line: none;
}
a:visited{
color: whitesmoke;
text-decoration-line: none;
}
img{
width:40px;
height:40px;
}
</style>
<script language="javascript">
function openblog(){
window.open("https://julian5383.tistory.com/", "_blank","fullscreen");
}
function opengit(){
window.open("https://github.com/Julian-Hwang", "_blank","fullscreen");
}
function stack(){
window.open("https://stackoverflow.com/users/14945246/luna", "_blank","fullscreen");
}
function kku(){
window.open("https://cs.kku.ac.kr/", "_blank","fullscreen");
}
</script>
</head>
<body>
<h2>My website</h2>
<p><hr></p>
<a href="" onClick="openblog()"><img src="blog.jpg">Tistory</a><br>
<p><hr></p>
<a href="" onClick="opengit()"><img src="github.jpg">GitHub</a><br>
<p><hr></p>
<a href="" onClick="stack()"><img src="stack.jpg">Stackoverflow</a><br>
<p><hr></p>
<a href="" onClick="kku()"><img src="kku.jpg">KKU</a><br>
<p><hr></p>
</body>
</html>- CSS 당시에는 본문창 Right.html에 창을 띄우는 방식으로 사이트를 띄었습니다. 그러나 깃허브와 스택오버플로우는 연결이 거부가 되는 사태가 발생했습니다.
- window.open 함수를 이용해 창을 직접 띄우는 방식을 택해서 오류를 해결했습니다.
4. zoom.js
- Zoom in 클릭시 화면이 확대된다.
- 나이트 모드이다. 해당 버튼을 클릭하면 화면이 검게 변하고 돌아가기를 누르면 원래 색으로 돌아온다.
- 주제 설명 페이지에서 사진 위에 마우스를 대면 자동으로 확대가 된다.
var nowzoom = 100;
function zoomout(){
nowzoom = nowzoom - 20;
if(nowzoom <= 80)
nowzoom = 80;
zooms();
}
function zoomin(){
nowzoom = nowzoom + 20;
if(nowzoom >=120)
nowzoom = 120;
zooms();
}
function zoomreset(){
nowzoom = 100;
zooms();
}
function zooms(){
document.body.style.zoom = nowzoom + '%';
}
function change(color)
{
document.body.style.background=color;
}
function mouse_zoomin(event) {
event.target.style.transform = "scale(1.2)";
event.target.style.zIndex = 1;
event.target.style.transition = "all 0.5s";
}
function mouse_zoomout(event) {
event.target.style.transform = "scale(1)";
event.target.style.zIndex = 0;
event.target.style.transition = "all 0.5s";
}- 우선 기존 화면크기를 100으로 설정하였다.
- 100을 기준으로 zoomout을 클릭하면 20만큼 축소가 되고 zoomin을 클릭하면 20만큼 확대가 되도록 설정하였다.
- reset을 클릭하면 원래의 크기 100으로 돌아온다.
- 화면 나이트모드는 change함수를 선언해서 style.background로 css를 건드려서 배경색깔을 변하도록 설정하였다.
- mouse_zoomin, mouse_zoomout을 통해 이미지에 마우스를 대면 확대, 축소가 가능하도록 설정하였다.
- 가위바위보 게임으로 설정한 난수를 통해서 게임을 하는 것입니다.
- 해당 사진 중 하나를 선택하면 되고 컴퓨터의 난수하고 함께 가위바위보를 하게 됩니다.
- 가위바위보를 하면 팝업창을 통해서 결과가 뜨고 승률이 기록됩니다.
var playerStateChar = "";
var playerState = 0;
var comStateChar = "";
var comState = 0;
var result = 0;
var win = 0;
var defeat = 0;
var draw = 0;
function play(num) {
if (num == 1) {
playerStateChar = "가위";
playerState = 1;
}
else if (num == 2) {
playerStateChar = "바위";
playerState = 2;
}
else {
playerStateChar = "보";
playerState = 3;
}
setComState();
setDistinct();
showResult();
}
function setComState() {
var state = Math.floor(Math.random() * 3) + 1;
comState = state;
if (state == 1) {
comStateChar = "가위";
}
else if (state == 2) {
comStateChar = "바위";
}
else {
comStateChar = "보";
}
}
function setDistinct() {
if (playerState == comState) {
result = 0;
}
else {
if (playerState == 1) {
if (comState == 2) {
result = -1;
}
else if (comState == 3) {
result = 1;
}
}
else if (playerState == 2) {
if (comState == 1) {
result = 1;
}
else if (comState == 3) {
result = -1;
}
}
else {
if (comState == 1) {
result = -1;
}
else if (comState == 2) {
result = 1;
}
}
}
}
function showResult() {
if (result == 0) {
draw++;
alert("비겼습니다.");
alert("승 : " + win + "\n패 : " + defeat + "\n무 : " + draw);
}
else if (result == 1) {
win++;
alert("이겼습니다.");
alert("승 : " + win + "\n패 : " + defeat + "\n무 : " + draw);
}
else {
defeat++;
alert("졌습니다.");
alert("승 : " + win + "\n패 : " + defeat + "\n무 : " + draw);
}
}
- CSS당시에는 도커에 관련 메뉴를 세부항목까지 길게 있었지만 dropdown을 적용해서 단순하게 했습니다.
function dp_menu(){
let click = document.getElementById("drop-content");
if(click.style.display === "none"){
click.style.display = "block";
}else{
click.style.display = "none";
}
}- 문서가 클릭하는 것을 받아들이도록 getelementbyid을 선언하고 style.display로 about docker를 클릭하면 세부메뉴가 길게 뜨면서 원하는 메뉴로 갈 수 있게 해줍니다.
https://github.com/Julian-Hwang/html_term_project/tree/main/tp3_201821100
GitHub - Julian-Hwang/html_term_project
Contribute to Julian-Hwang/html_term_project development by creating an account on GitHub.
github.com