<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.box{
position:relative;
width:200px;
height:200px;
background-color:pink;
text-align:right;
margin: 100px auto;
}
.close{
position:absolute;
width:20px;
height:20px;
top:10px;
right:10px;
}
</style>
</head>
<body>
<div class="box">
<div class="close">X
</div>
<script>
//事件监听
const box = document.querySelector('.box')
const close = document.querySelector('.close')
close.addEventListener('click', function(){
box.style.display = 'none'
})
/*
//间歇事件
function fn(){
document.write('每2秒执行一次！<br>');
}
//间歇函数
let timer = setInterval('fn()',2000)
document.write(timer);
clearInterval(timer)
*/
/*
//改变li元素的颜色
const lis = document.querySelectorAll('ul li');
for (let i=0;i< lis.length;i++){
//lis[i].style='none';
lis[i].style.color = 'red';
document.write('<br>')
document.write(lis[i].innerText)
document.write('<br>')
lis[i].innerHTML = '<b>000</b>';
document.write(lis[i].innerHTML)
}*/
/*
let human = {hname:'andy', age:22, gender:'girl'};
for (let k in human)
{ document.write(k);
document.write(':\n');
document.write(human[k]);
document.write('<br>');
console.log(k);
console.log(human[k]);
}
let human2=human;
human2.age=45;
for (let k in human)
{ document.write(k);
document.write(':\n');
document.write(human[k]);
document.write('<br>');
console.log(k);
console.log(human[k]);
}
//document.write(Math.random()*10 );
*/
</script>
</body>
</html>