반응형
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 |
<html>
<head>
<meta charset ="utf-8"> <!--문자 코드셋 정의 -->
</head>
<body>
<input id="age" type="text"/> <!-- input text box-->
<button onclick="btnclick()">button!</button><!-- button -->
<div style="border:1px solid black " id="block1"> ...</div>
<script>
var p=10;
var q=10;
var r="문자열";
function btnclick(){
var a = (parseInt(document.getElementById("age").value));
console.log(a);
if(isNaN(a)){
console.log("숫자가 아닙니다.");
}
else {
document.getElementById("block1").innerHTML += '입력된 값은'+ a +'입니다<br>';
}
}
</script>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 |
<html>
<head>
<meta charset ="utf-8"> <!--문자 코드셋 정의 -->
</head>
<body>
<input id="age" type="text"/> <!-- input text box-->
<input id="password" type="password"/> <!-- input password box-->
<input id="date" type="date"/> <!-- input date box-->
<input id="email" type="email"/> <!-- input email box-->
<button onclick="btnclick()">button!</button><!-- button -->
<div style="position:relative; border:1px solid black; border-radius : 10px; padding:5px; box-shadow: 10px 10px 5px silver " id="block1" onmousemove ="movemouse()"> 눌러보세요</div>
<img id = "img1"></body>
<script>
var a = [10, "안녕하세요", 20, "하이"];
var b= new Array(10);
function btnclick(){ // btn func
for (var i =0; i<a.length;i++){
a[i]=a[i]+1;
console.log(a[i]);
}
for (var i = 0; i<b.length;i++){
console.log("B index="+i+":"+b[i]);
}
if(document.getElementById("age").value == "1")
document.getElementById("block1").innerHTML += a[0];
a.push(document.getElementById("age").value);
}
function movemouse(){ // mouse hover func
document.getElementById("block1").style.top = (Math.random()*500)+"px";
}
var i =0;
var mytop =0;
var velocity =0;
setInterval (function() { // block1 move
i++;
document.getElementById("block1").style.top = (mytop*5) +"px";
mytop = mytop +velocity;
if(mytop >100){
mytop =100;
velocity = -velocity*0.8;
}
else {
velocity = velocity +0.5;
}
console.log("Hi"+i);
}, 50);
</script>
</body>
</html> |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 |
<html>
<head>
<meta charset ="utf-8"> <!--문자 코드셋 정의 -->
</head>
<body>
<input id="number" type="text" onkeypress = "if (event.keyCode ==13) btnclick();">
<button onclick="btnclick()"> 확인! </button><!-- button --><br><br>
<div style="position:relative; border:1px solid black; border-radius : 10px; padding:5px; box-shadow: 10px 10px 5px silver "id="block1"> 1부터 500까지 숫자를 입력하세요. </div><br><br>
<img id = "img" >
</body>
<script>
var result = Math.round(Math.random()*500);
var count =0;
function btnclick(){
count ++;
var a = (parseInt(document.getElementById("number").value));
if(document.getElementById("number").value==result){
document.getElementById("img").src = "3.jpg";
document.getElementById("block1").innerHTML += '<br>값은'+ a +'입니다, '+ count +' 번 만에 맞추셨네요';
}
else if(document.getElementById("number").value >result && document.getElementById("number").value <=500){
document.getElementById("block1").innerHTML += '<br>값은'+ a +'보다 작습니다';
document.getElementById("img").src = "2.jpg";
}
else if(document.getElementById("number").value < result){
document.getElementById("img").src = "1.jpg";
document.getElementById("block1").innerHTML += '<br>값은'+ a +'보다 큽니다';
}
else if(document.getElementById("number").value >500){
count --;
alert("1에서 500사이의 숫자를 입력해 주세요.");
}
}
</script>
</body>
</html> |
cs |
html-0920(updown).zip
반응형
'Study > html' 카테고리의 다른 글
| HTML,JSP - Snake game (0) | 2018.09.27 |
|---|---|
| HTML 실습 (0) | 2018.09.14 |