<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
width: 500px;
height: 50px;
background-color: #DAD699;
text-align: center;
margin:0 auto;
margin-top:20px;
}
input{
background-color: #D2BEF4;
width: 19%;
height: 90%;
border-radius: 5px;
margin-top:2px;
}
.content{
width: 600px;
border:2px solid;
}
.numtext{
width: 600px;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="content">
<div class="wrap">
<input type="button" value="添加">
<input type="button" value="删除">
<input type="button" value="大于0">
<input type="button" value="小于0">
<input type="button" value="刷新">
</div>
<div class="numtext"></div>
</div>
</body>
<script>
//获取元素
var inps = document.querySelectorAll("input");
var content = document.querySelector(".content");
var numtext = document.querySelector(".numtext");
//用来存储已经创建的元素
var numsArr = [];
//定义一个数组
var arr=["-","+"]
//添加的点击事件
inps[0].onclick = function(){
//创建box
var box = document.createElement("div");
//得到一个随机数
var num = parseInt(Math.random()*100+1);
//随机一个arr数组的的下标
var a = parseInt(Math.random()*2);
if(arr[a]=="-"){
num =Number(arr[a]+num);
}
//为box设置样式
box.style.width="500px";
box.style.height="100px";
box.style.backgroundColor="#D2BEF4";
box.style.margin="5px auto";
box.style.fontSize="50px";
box.style.lineHeight="100px";
box.style.textAlign="center";
//把num写入box中
box.innerHTML += num;
//将box添加到numtext中
numtext.appendChild(box);
//存储
numsArr.push(box);
console.log(numsArr);
}
//删除的点击事件
inps[1].onclick = function(){
var a = numtext.lastElementChild;
if(numtext.hasChildNodes()){
a.remove();
//删除数组中的最后一个
numsArr.pop();
}
}
//大于0的点击事件
inps[2].onclick = function(){
var nums = numtext.children;
console.log(nums);
for(var i=0;i<nums.length;i++){
if(nums[i].innerHTML<0){
nums[i].style.display="none";
}else{
nums[i].style.display="block";
}
}
}
// 小于0的点击事件
inps[3].onclick = function(){
var nums = numtext.children;
for(var i=0;i<nums.length;i++){
if(nums[i].innerHTML>0){
nums[i].style.display="none";
}else{
nums[i].style.display="block";
}
}
}
//刷新的点击事件
inps[4].onclick=function(){
var nums = numtext.children;
for(var i=0;i<nums.length;i++){
nums[i].style.display="block";
}
}
</script>
</html>
JS基础之DOM操作增删改查的操作
最新推荐文章于 2024-04-16 17:07:56 发布