51 lines
953 B
HTML
51 lines
953 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<button id="btn">点我 </button>
|
||
|
|
|
||
|
|
<div id="app"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let app = document.querySelector("#app");//获取dom
|
||
|
|
let btn = document.querySelector("#btn");
|
||
|
|
let i=0;
|
||
|
|
console.log(btn);
|
||
|
|
|
||
|
|
//01-添加事件
|
||
|
|
// dom.on事件名称= 函数
|
||
|
|
btn.onclick = ()=>{
|
||
|
|
i++;
|
||
|
|
console.log("被点了怎模板!","我很记仇的这是你点击我的第"+i+"下");
|
||
|
|
|
||
|
|
|
||
|
|
//02-修改内容
|
||
|
|
if(i>10){
|
||
|
|
// app.innerText=`找死!!`;
|
||
|
|
app.innerHTML=`<b>找死!!</b>`;
|
||
|
|
|
||
|
|
}else{
|
||
|
|
// app.innerText = `我很记仇的这是你点击我的第${i}下`;
|
||
|
|
app.innerHTML = `我很记仇的这是你点击我的第${i}下`;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//注意:
|
||
|
|
//innerText 不解析标签
|
||
|
|
//innerHTML 解析标签
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|