一货邓、方塊閃爍
添加：點(diǎn)擊添加按鈕雏门，實(shí)現(xiàn)在容器中添加方塊的效果（超過(guò)容量后不能添加）
刪除：點(diǎn)擊刪除按鈕，實(shí)現(xiàn)在容器中刪除方塊的效果（刪除完最后一塊方塊后不能刪除）
閃爍：點(diǎn)擊后開(kāi)始隨機(jī)變色冲茸，再次點(diǎn)擊后停止
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("帥哥奠涌，超過(guò)限制了喲");
}
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、刪除內(nèi)容
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 >數(shù)據(jù)統(tǒng)計(jì)表</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">清除數(shù)據(jù)</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
