Be a groovy man by positive thinking

UI/UX_010 본문

IT/_HTML_CSS_JS

UI/UX_010

KhanSelf 2017. 7. 13. 16:11

간단정리

1. 타이머 함수

1) setTimeout(function, millisecond)

 - 일정 시간 후 함수를 한번 실행합니다.

2) setInterval(function, millisecond)

 - 일정 시간마다 함수를 반복해서 실행합니다.

3) clearTimeout(id)

 - 일정 시간 후 함수를 한 번 실행하는 것을 중지합니다.

4) clearInterval(id)

 - 일정 시간 후 함수를 반복하는 것을 중지합니다.




2. Date 객체

1) 생성

<script>

var date= new Date();   //변수를 선언

alert(date);             //출력

</script>


2) 매개변수

 - 연, 월-1, 일,시,분,초,밀리 초 순서로 Date객체를 생성할 수 있다.


3) 메서드

 - getFullYear()

 - getMonth()

 - getDate()

 - getDay()

등등등










간단예문



Ex_01 setTimeout(function, millisecond)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<body>

<script>

function a() {

alert(100);

};

setTimeout(a, 1000); //1초뒤에 alert

</script>

</body>

</html>








Ex_02  다음을 수정하여 setInterval을 이용하여 원하는 색깔이 반복하게 하시오

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<body>

<div id="divTag">홍길동</div>

<script>

divTag.style.fontSize = "5em";

var colorArray = [ "orange", "blue", "pink"  ];

var cnt = 0;

function a() {

if (cnt == 3)

cnt = 0;

divTag.style.color = colorArray[cnt++];

}

setInterval(a, 1000); //1초마다 색상 바뀌게 함 1000이 1초 2000은 2초

</script>

</body>

</html>




Sol_02

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<body>

<div id="divTag">홍길동</div>

<script>

divTag.style.fontSize = "5em";

var colorArray = [ "orange", "blue", "pink" ];

var cnt = 0;

function a() {

if (cnt == 3) {

cnt = 0;

}

divTag.style.color = colorArray[cnt++];

}

setInterval(a, 1000);

</script>

</body>

</html>






Ex_03 년, 월, 일, 요일을 뽑아내는 예문 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<body>

<script>

var o = new Date();

var y = o.getFullYear();

var m = o.getMonth();

var d = o.getDate();

var e = o.getDay();

document.write(y + "<br>");

document.write((m + 1) + "<br>");

document.write(d + "<br>");

document.write(e + "<br>"); //0=일요일 1=월요일

</script>

</body>

</html>






Ex_04 요일까지 나오게 해주세요

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<body>

<script>

var o = new Date();

var y = o.getFullYear();

var m = o.getMonth();

var d = o.getDate();

var e = o.getDay();

document.write(y + "<br>");

document.write((m + 1) + "<br>");

document.write(d + "<br>");

document.write(e + "<br>");

</script>

</body>

</html>





Sol_04

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<body>

<script>

var o = new Date(2017,6,1); //here에 원하는 날짜 넣으면됨 ex.2017,6,1

var y = o.getFullYear();

var m = o.getMonth();

var d = o.getDate();

var e = o.getDay();

var array = [ "일", "월", "화", "수", "목", "금", "토" ];

document.write(y + "<br/>");

document.write(m + 1 + "<br/>");

document.write(d + "<br/>");

document.write(array[e] + "<br/>");

</script>

</body>

</html>









Ex_05 요일 얻기 버튼을 누르면 요일이 찍히게 해주세요

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function dayofweek() {

divTag.innerHTML = "홍길동";

}

</script>

</head>

<body>

<input type="text" id="txt1">년

<br />

<input type="text" id="txt2">월

<br />

<input type="text" id="txt3">일

<br />

<input type="button" value="요일얻기" onclick="dayofweek()">

<div id="divTag">x요일</div>

</body>

</html>




Sol_05

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function dayofweek() {

var s = txt1.value;

var t = txt2.value;

var u = txt3.value;

var o = new Date(s, t - 1, u);

var e = o.getDay();

var array = [ "일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일" ];

divTag.innerHTML = array[e];

}

</script>

</head>

<body>

<input type="text" id="txt1">년

<br />

<input type="text" id="txt2">월

<br />

<input type="text" id="txt3">일

<br />

<input type="button" value="요일얻기" onclick="dayofweek()">

<div id="divTag">x요일</div>

</body>

</html>








Ex_06 

Date객체를 생성하여 시간이 증가하게 하시오



Sol_06

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<span id="spanTag">XX</span>초

<script>

var o=new Date();

var s=o.getSeconds();

spanTag.innerHTML=s++;

function a(){

if(s==60){

s=0;

}

spanTag.innerHTML=s++;

}

setInterval(a,1000);

</script>

</body>

</html>









Ex_07 년, 월, 일을 입력하여 해당 하는 날짜의 요일이 나오게 하세요

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<div id="divTag">홍길동</div>

<script>

divTag.style.fontSize = "5em";

var colorArray = [ "orange", "gray", "green" ];

var cnt = 0;

function a() {

if (cnt == 3)

cnt = 0;

divTag.style.color = colorArray[cnt++];

}

var timerId = setInterval(a, 500);

clearInterval(timerId);

</script>

<input type="button" value="시작" onclick="f1()">

<input type="button" value="종료" onclick="f2()">

</body>

</html>




Sol_07

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

window.onload = function() {

divTag.style.fontSize = "5em";

}

var timerId;

function f1() {

var colorArray = [ "orange", "gray", "green" ];

var cnt = 0;

function a() {

if (cnt == 3)

cnt = 0;

divTag.style.color = colorArray[cnt++];

}

timerId = setInterval(a, 500);

}

function f2() {

clearInterval(timerId);

}

</script>

</head>

<body>

<div id="divTag">홍길동</div>

<input type="button" value="시작" onclick="f1()">

<input type="button" value="종료" onclick="f2()">

</body>

</html>

</html>






Ex_08 텍스트박스에 글자를 입력한뒤 버튼을 누르면

 대화상자(alert)에 텍스트박스에 입력한 글자를

 메세지로 출력하시오.

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function f() {

//here

}

</script>

</head>

<body>

<input type="text" id="txt">

<input type="button" onclick="f()">

</body>

</html>




Sol_08

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function f() {

alert(txt.value);

}

</script>

</head>

<body>

<input type="text" id="txt">

<input type="button" onclick="f()">

</body>

</html>












Ex_09 텍스트박스에 영문색상을 입력한뒤 버튼을 누르면 "홍길동"글자색상이 바뀔 수 있도록 소스코드를 작성하시오.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function f() {

//here

}

</script>

</head>

<body>

<div id="divTag" style="font-size: 5em">홍길동</div>

<input type="text" id="txt">

<input type="button" onclick="f()">

</body>

</html>




Sol_09

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function f() {

divTag.sytle.color=txt.value;

}

</script>

</head>

<body>

<div id="divTag" style="font-size: 5em">홍길동</div>

<input type="text" id="txt">

<input type="button" onclick="f()">

</body>

</html>






Ex_10 텍스트박스에 초를 입력하면 해당 초 뒤에 색깔이 바뀌게 하시오

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function f() {

//here

}

</script>

</head>

<body>

<div id="divTag" style="font-size: 5em">홍길동</div>

초를 입력하세요~

<input type="text" id="txt">

<input type="button" onclick="f()" value="글자색상바꾸기">

</body>

</html>




Sol_10

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script>

function f() {

setTimeout(function() {

divTag.style.color = "pink"

}, txt.value * 1000)

}

</script>

</head>

<body>

<div id="divTag" style="font-size: 5em">홍길동</div>

초를 입력하세요~

<input type="text" id="txt">

<input type="button" onclick="f()" value="글자색상바꾸기">

</body>

</html>



저작자표시 (새창열림)

'IT > _HTML_CSS_JS' 카테고리의 다른 글

UI/UX_HTML,CSS 깜짝퀴즈  (0) 2017.07.17
UI/UX_011  (0) 2017.07.14
UI/UX_009  (0) 2017.07.12
UI/UX_008  (0) 2017.07.10
UI/UX_007  (0) 2017.07.07
'IT/_HTML_CSS_JS' Related Articles more