2020-3-20前端题目

题目一：
判断checked复选框是否有被选中

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script>
window.onload = () => {let odiv=document.getElementById("ant");let ck=document.getElementById("ck");let obt=document.getElementById("bt");obt.onclick= () => {odiv.innerHTML=ck.checked;}
}
</script>
</head>
<body><div id="ant"></div><input type="checkbox" id="ck" checked/><input type="button" value="查看效果" id="bt"/>
</body>
</html>

运行结果：
在这里插入图片描述

题目二：
JavaScript 动态添加与删除div元素
代码和分析：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
#box{width:500px;
}
#box div{width:200px;height:20px;background:blue;margin-bottom:5px;
}
</style>
<script> 
window.onload=function(){let oadd=document.getElementById("add");let odel=document.getElementById("del");let obox=document.getElementById("box");oadd.onclick=function(){//为添加按钮注册click事件处理函数。var odiv=document.createElement("div");//创建一个div元素对象。obox.appendChild(odiv);//将新创建的div添加到obox元素中。}odel.onclick=function(){var divs=obox.getElementsByTagName("div");//将新创建的div添加到obox元素中。if(divs.length>0){obox.removeChild(divs[0]);//如果obox含有添加的div元素，那么删除其中的第一个。}}
}
</script>
</head>
<body><div id="box"></div><input type="button" id="add" value="添加元素"/><input type="button" id="del" value="删除元素"/>
</body>
</html>