<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="background: green; position: absolute; left:50px;top:50px">
111111
<div style="background: red; width:100px;height:100px; position: absolute;top:0px;left:0px;">
<div style="background: blue; width:50px;height:50px; position: absolute;top:0px;left:0px;">
.ff
</div>
</div>
</div>
<script>
let body = document.querySelector('body')
let c = document.createElement('button')
body.appendChild(c)
c.style.transition = "3s"
c.innerText = "버튼"
let d = document.createElement('button')
body.appendChild(d)
d.style.transition = "3s"
d.innerText = "xxxx"
d.style.left ="10px"
d.style.top ="10px"
d.style.position="relative"
d.addEventListener('click',function(){
d.style.left ="200px"
d.style.top ="200px"
d.style.opacity = '0.2'
})
c.addEventListener('click', function () {
console.log(a)
a = a + 50
c.style.width = a + "px";
let xxx = 10
c.innerText = xxx.toString();
// console.log('A');
// let ggg = 0
// for (let i = 0; i < 10; i++) {
// setTimeout(function () { c.innerText = (xxx - i).toString() }, ggg)
// ggg = ggg + 1000
// }
// console.log('B');
c.style.width = "10px";
c.style.height = "10px";
// })
c.addEventListener('click', function () {
if (a == 0) {
c.style.width = "120px";
c.style.height = "120px";
a = 1
} else {
c.style.width = "10px";
c.style.height = "10px";
a = 0
}
;
})
</script>
</body>
</html>