研修35日目
56813 ワード
display:none=>=領域なし
可視性(Visibility):非表示=>画面には表示されませんが、1つの領域があります.
出力
KeyCode:13->トルコは覚えてる!!
しゅつりょく
JAvaスクリプト文字列
出力
感じない...早く実习に行って感じを探します...
可視性(Visibility):非表示=>画面には表示されませんが、1つの領域があります.
test 13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test13</title>
<style type="text/css">
#box, #box2{
display: inline-block;
vertical-align: top;
width: 200px;
height: 200px;
border : 20px solid rgb(0, 0, 0);
background-color: rgb(0, 0, 0);
}
</style>
<script type="text/javascript">
var r = 0;
var g = 0;
var b = 0;
function boxColor(btn){
var box = document.getElementById("box");
switch (btn.value) {
case "rUp":
if(r < 255){
r += 5 ;
}
break;
case "rDown":
if( r > 0){
r -= 5 ;
}
break;
case "gUp":
if(g < 255){
g += 5 ;
}
break;
case "gDown":
if( g > 0){
g -= 5 ;
}
break;
case "bUp":
if(b < 255){
b += 5 ;
}
break;
case "bDown":
if( b > 0){
b -= 5 ;
}
break;
case "allUp":
if(r < 255 || g < 255 || b < 255){
r += 5 ;
g += 5 ;
b += 5 ;
}
break;
case "allDown":
if(r > 0 || g > 0 || b > 0){
r -= 5 ;
g -= 5 ;
b -= 5 ;
}
break;
}
/* 스타일에 넣은 rgb안에 있는 0값을 각 r,g,b로 선언 */
box.style.backgroundColor = "rgb("+ r + ","+ g + ","+ b + ")";
}
function tog(){
var box = document.getElementById("box");
console.log(box.style.display);
if(box.style.display == "none"){//display : none => 영역제거
box.style.display = "";
//""값을 안줄 경우 해당 style속성이 제거됨
}else{
box.style.display = "none";
}
}
function tog2(){
var box = document.getElementById("box");
console.log(box.style.display);
if(box.style.visibility == "hidden"){//visibility : hidden => 감추기
box.style.visibility = "";
//""값을 안줄 경우 해당 style속성이 제거됨
}else{
box.style.visibility = "hidden";
}
}
function bigger(){
var box2 = document.getElementById("box2");
console.log(box2.clientWidth);
//clientWidth : css에 적용된 크기를 가져옴
box2.style.width = box2.clientWidth * 2 + "px";
box2.style.height = box2.clientHeight * 2 + "px";
}
function smaller(){
var box2 = document.getElementById("box2");
console.log(box2.clientWidth);
//clientWidth : css에 적용된 크기를 가져옴
box2.style.width = box2.clientWidth / 2 + "px";
box2.style.height = box2.clientHeight / 2 + "px";
}
</script>
</head>
<body>
<div id="box"></div> <div id="box2"></div>
<br/>
<input type="button" value="rUp" onclick="boxColor(this);"/>
<input type="button" value="rDown" onclick="boxColor(this);"/>
<input type="button" value="gUp" onclick="boxColor(this);"/>
<input type="button" value="gDown" onclick="boxColor(this);"/>
<input type="button" value="bUp" onclick="boxColor(this);"/>
<input type="button" value="bDown" onclick="boxColor(this);"/>
<input type="button" value="allUp" onclick="boxColor(this);"/>
<input type="button" value="allDown" onclick="boxColor(this);"/>
<br/>
<input type="button" value="버튼" onclick="tog();"/>
<input type="button" value="버튼2" onclick="tog2();"/>
<input type="button" value="커져라!" onclick="bigger();"/>
<input type="button" value="작아져라!" onclick="smaller();"/>
</body>
</html>矢印キー操作
test 14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>방향키 조작</title>
<style type="text/css">
#box {
display: inline-block;
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
background-color: aqua;
}
</style>
<script type="text/javascript">
var t = 0;
var l = 0;
function m(e) {
//console.log(e);
//console.log(e.keyCode);
// w - 119, s - 115, a - 97, d - 100
var box = document.getElementById("box");
switch(e.keyCode){
case 119: //w 위
if(t -10 >= 0){
t -= 10;
}
break;
case 100: //d 오른쪽
l += 10;
break;
case 115: //s 아래
t += 10;
break;
case 97: //a 왼쪽
if(l -10 >= 0){
l -= 10;
}
break;
}
box.style.top = t + "px";
box.style.right = l - "px";
box.style.bottom = t - "px";
box.style.left = l + "px";
}
</script>
</head>
<body onkeypress="m(event);">
<div id="box"></div>
</body>
</html>KeyCode:13->トルコは覚えてる!!
しゅつりょく
JAvaスクリプト文字列
test 15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
console.log(Math.round(3.141529));
console.log(Math.floor(3.141529));
console.log(Math.ceil(3.141529));
console.log(Math.abs(-123));
console.log(Math.floor(Math.random()*10)+0);
/* 중요하다 꼭 기억 할 것 */
var str = "Hello World!!\"Hi\"";
console.log(str);
str = "Hello World";
console.log(str.length);
console.log(str.indexOf("l"));
console.log(str.indexOf("l", 3));
console.log(str.indexOf("x")); //찾을 게없을때 01
console.log(str.lastIndexOf("l"));
console.log(str.substring(0,1));
console.log(str.replace("l","k"));
/* 정규식 사용 시 replaceall하고싶을 때
/대상문자/옵션
의 형태를 사용. 옵션 - i : 대소문자 구분 없음, g : 모든대상 */
console.log(str.replace(/l/ig,"k"));
//정규식은 예약어 같은 것
console.log(str.toUpperCase());
console.log(str.toLowerCase());
//trim : 앞 뒤 공백제거
str = " Hello world!! ";
console.log("["+str.trim()+"]");
str = "Hello World";
console.log(str.charAt(0));
console.log(str[0]);
var arr = "apple,banana,mango".split(",");
console.log(arr);
var d = new Date();
console.log(d);
console.log(d.toString());
console.log(d.getFullYear()); //연도
console.log(d.getMonth()+1); // 인덱스 기반 월
console.log(d.getDate()); // 일
console.log(d.getHours()); // 시
console.log(d.getMinutes()); // 분
console.log(d.getSeconds()); // 초
console.log(d.getMilliseconds()); // 밀리초
console.log(d.getDay()); // 주의 몇번째 날인지
</script>
<head>
<body>
</body>
</html>感じない...早く実习に行って感じを探します...
Reference
この問題について(研修35日目), 我々は、より多くの情報をここで見つけました https://velog.io/@wogus216/교육-35일차テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol