<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>끝말 잇기</h1>
제시어 : <span id="word"></span><br>
글자 입력 : <input type="text" id="txt"><br>
<input type="button" value="입력한 글자 가져오기" onclick="wordCheck()">
<script type="text/javascript">
var input = prompt("제시어를 입력하세요.", "");
var word = document.getElementById("word");
word.innerHTML = input;
function wordCheck() {
var getTxt = document.getElementById("txt");
if (word.innerHTML.charAt(word.innerHTML.length-1) == getTxt.value.charAt(0)) {
word.innerHTML = getTxt.value.charAt(getTxt.value.length-1);
} else {
alert("땡!");
}
}
</script>
</body>
</html>
============================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="h1">김옥띠</h1>
<p id="p">기모띠</p>
<input type="button" name="" value="h1태그" onclick="hChange()">
<input type="button" name="" value="p태크" onclick="pChange()">
<script type="text/javascript">
function hChange() {
var h = document.getElementById("h1");
h.style.color = "green";
h.style.backgroundColor = "orange";
}
function pChange() {
var p = document.getElementById("p");
p.style.fontSize = "50px";
p.style.border = "1px solid red";
}
</script>
</body>
</html>
============================================
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
div {
width: auto;
height: auto;
background: gray;
}
span {
color: white;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background: blue;
}
#button {
float: right;
}
</style>
</head>
<body>
<div id="div1">
<h1>배경색 변경하기</h1>
<span id= "red">R:</span> <input type="text" name="" value="" id="input_red">
<span id= "green">G:</span> <input type="text" name="" value="" id="input_green">
<span id= "blue">B:</span> <input type="text" name="" value="" id="input_blue"><br><br>
<input type="button" name="" value="변경" onclick="Change()" id="button">
</div>
<script type="text/javascript">
function Change() {
var div = document.getElementById("div1");
var input_red = document.getElementById("input_red");
var input_green = document.getElementById("input_green");
var input_blue = document.getElementById("input_blue");
var color = "#" + input_red.value + input_green.value + input_blue.value;
alert(color);
div.style.backgroundColor = color;
}
</script>
</body>
</html>
============================================
'노트필기' 카테고리의 다른 글
| [PPT] PPT (0) | 2017.08.11 |
|---|---|
| [Web] JSPClass0720-1 (0) | 2017.07.20 |
| [Web] JSP class0719-1 (0) | 2017.07.19 |
| [Web] Servlet class07-19 (0) | 2017.07.19 |
| [Web] CSS class0718-1 (0) | 2017.07.18 |
