一、方块闪烁
添加：点击添加按钮，实现在容器中添加方块的效果（超过容量后不能添加）
删除：点击删除按钮，实现在容器中删除方块的效果（删除完最后一块方块后不能删除）
闪烁：点击后开始随机变色，再次点击后停止
CSS代码：CSS采用flex布局
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
border: 0;
text-align: center;
}
#container{
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 800px;
height: 500px;
border: 3px solid black;
margin: auto;
}
#item{
width: 100px;
height: 100px;
background-color: lightblue;
}
button{
width: 100px;
height: 50px;
font-size: 30px;
margin: auto;
}
</style>
html代码：
<div id="container">
</div>
<button type="button">添加</button>
<button type="button">删除</button>
<button type="button">闪烁</button>
JS代码：
//外部JS代码
function randomColor(){
var r=parseInt(Math.random()*256);
var g=parseInt(Math.random()*256);
var b=parseInt(Math.random()*256);
return "rgb("+r+","+g+","+b+")"
}
<script type="text/javascript">
var count=0;
var container=document.getElementById("container");
buttons=document.querySelectorAll("button");
buttons[0].addEventListener("click",addItem);
buttons[1].addEventListener("click",removeItem);
buttons[2].addEventListener('click',showColor);
function addItem(){
item=document.createElement("div");
item.id="item";
item.style.backgroundColor=randomColor();
if(container.children.length==40){
buttons[0].hidden="hidden";
window.alert("帅哥，超过限制了哟");
}
else{
container.appendChild(item);
buttons[1].hidden="";
}
}
function removeItem(){
if(container.children.length>0){
container.removeChild(container.children[container.children.length-1]);
buttons[0].hidden="";
}
else{
buttons[1].hidden="hidden";
window.alert("傻缺，不能再删除咯哈");
}
}
function showColor(){
count+=1;
if (count % 2 != 0){
timeId=window.setInterval(function(){
var items=document.querySelectorAll("#container div");
for(i=0;i<items.length;i+=1){
items[i].style.backgroundColor=randomColor();
}
},100);
buttons[2].textContent="停止";
}
else{
window.clearInterval(timeId);
buttons[2].textContent="闪烁";
}
console.log(count);
}
</script>
效果：
方块效果.png
二、操作表格
1、美化表格
2、删除内容
3、删除单元格
4、隐藏表格
CSS代码：
<style>
#data {
border-collapse: collapse;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
margin: 10px 0;
}
</style>
html代码：
<body>
<table id="data">
<caption >数据统计表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
</table>
<div id="buttons">
<button id="pretty">美化表格</button>
<button id="clear">清除数据</button>
<button id="remove">删单元格</button>
<button id="hide">隐藏表格</button>
</div>
</body>
JS代码：
<script type="text/javascript">
var table=document.getElementById("data");
var tbody=table.children[1];
var caption=table.children[0];
var hiddencount=0;
var buttons=document.querySelectorAll("#buttons button");
buttons[0].addEventListener('click',pretty);
buttons[1].addEventListener('click',clear);
buttons[2].addEventListener('click',remove);
buttons[3].addEventListener('click',hide);
function pretty(){
caption.style.fontFamily="黑体";
caption.style.fontSize="20px";
caption.style.color="black"
for(i=0;i<tbody.children.length;i+=1){
//改变单元格border
for(j=0;j<tbody.children[i].children.length;j+=1){
tbody.children[i].children[j].style.border="0";
tbody.children[i].children[j].style.borderTop="1px solid black";
tbody.children[i].children[j].style.borderBottom="1px solid black";
}
tbody.children[0].style.borderBottom="2px solid black";
tbody.children[0].style.borderTop="2px solid black";
//改变单元格的背景
if(i % 2==0){
tbody.children[i].style.backgroundColor="lightblue";
}
else{
tbody.children[i].style.backgroundColor="lightgreen";
}
}
}
function clear(){
for(i=1;i<tbody.children.length;i+=1){
//改变单元格border
for(j=0;j<tbody.children[i].children.length;j+=1){
tbody.children[i].children[j].innerHTML="";
}
}
}
function remove(){
if (tbody.children.length>1){
tbody.removeChild(tbody.children[tbody.children.length-1]);
}
}
function hide(){
hiddencount+=1;
if (hiddencount%2==1){
table.hidden="hidden";
buttons[3].innerHTML="显示表格";
}
else{
table.hidden="";
buttons[3].innerHTML="隐藏表格";
}
}
</script>
效果：
表格操作.png
网友评论