表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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>
</head>
<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><a>Item3</a></td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td><a>Item5</a></td>
</tr>
</table>
<div id="buttons">
<button id="pretty">美化表格</button>
<button id="clear">清除数据</button>
<button id="remove">删单元格</button>
<button id="hide">隐藏表格</button>
</div>
<script src="js/mylib.js"></script>
<script type="text/javascript">
var prettyBtn = document.getElementById("pretty");
var clearBtn = document.getElementById("clear");
var removeBtn = document.getElementById("remove");
var hideBtn = document.getElementById("hide");
prettyBtn.addEventListener("click",function(){
var trs = document.querySelectorAll("#data tr");
for(var i = 0;i<trs.length;i+=2){
trs[i].style.backgroundColor = randomColor();
}
})
clearBtn.addEventListener("click",function(){
var trs = document.querySelectorAll("#data tr");
for(var i = 1;i<trs.length;i++){
var children = trs[i].children;
for(var n = 0; n<children.length;n++){
children[n].textContent = "";
}
}
})
removeBtn.addEventListener("click",function(){
var trs = document.querySelectorAll("#data tr");
num = trs.length
if (num == 1)return;
table = trs[num-1].parentNode;
table.removeChild(trs[num-1]);
})
hideBtn.addEventListener("click",function(evt){
var trs = document.querySelectorAll("#data tr");
evtBtn = evt.target;
if (evtBtn.textContent == "隐藏表格"){
for(var i = 1;i<trs.length;i++){
trs[i].style.display = "none";
}
evtBtn.textContent = "打开表格";
return
}
for(var i = 0;i<trs.length;i++){
trs[i].style.display = "inline-block";
}
evtBtn.textContent = "隐藏表格";
})
</script>
</body>
</html>
闪烁图
<!--随机图片背景-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
height: 400px;
width: 800px;
border: 1px solid;
margin: 10px auto;
overflow: hidden;
}
#container div{
height: 80px;
width: 80px;
float: left;
margin: 0;
padding: 0;
border: none;
outline: none;
}
#button{
line-height: 50px;
width: 800px;
color: red;
text-align: center;
margin: 10px auto;
}
#button>button{
height: 50px;
background-color: red;
width: 80px;
outline: none;
border: none;
}
</style>
</head>
<body>
<div id="container">
</div>
<div id="button">
<button>添加</button>
<button>闪烁</button>
</div>
<script src="js/mylib.js"></script>
<script type="text/javascript">
var timerId = 0;
var div = document.getElementById("container");
var btns = document.getElementsByTagName("button");
function addDiv(){
div1 = document.createElement("div");
div1.style.backgroundColor = randomColor();
div.appendChild(div1);
return div1
}
function changeColor(){
var divs = document.querySelectorAll("#container>div");
for (var i=0;i<divs.length;i++){
divs[i].style.backgroundColor = randomColor();
}
}
btns[0].addEventListener("click",function(){
div1 = addDiv();
if (timerId !=0){
window.clearInterval(timerId)
timerId =setInterval(changeColor,200)
}
})
btns[1].addEventListener("click",function(evt){
var btnNow = evt.target||evt.srcElement;
if(timerId != 0) {
window.clearInterval(timerId)
timerId = 0;
btnNow.textContent = "闪烁";
return
}
timerId = window.setInterval(changeColor,200)
btnNow.textContent = "停止";
})
</script>
</body>
</html>
网友评论