一、添加删除标签
1.阻止a标签默认行为的方法
a标签有默认的跳转页面的行为，有两种方法可以阻止它的默认行为。
1.<a href="javascript:void(0);"> -> 去除a标签的默认行为
2.evt.preventDefault();
2.去除字符串两边的空白
trim()方法 -> 去除字符串两边的空白
3.动态创建新元素
ocument.createElement() -> 动态创建新元素
4.添加子节点
appendChild()->在末尾添加一个子节点
insertBefore(元素,位置) -> 在指定位置前加入元素
5.文本框中的焦点
input.focus() -> 光标成为文本框中的焦点
6.添加键盘事件
addEventListener('keypress',function(evt){}）-> 添加键盘按下弹起事件
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加删除标签</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
margin: 20px 50px;
}
#fruits li {
list-style: none;
width: 200px;
height: 50px;
font-size: 20px;
line-height: 50px;
background-color: cadetblue;
color: white;
text-align: center;
margin: 2px 0;
}
#fruits>li>a {
float: right;
text-decoration: none;
color: white;
position: relative;
right: 5px;
}
#fruits~input {
border: none;
outline: none;
font-size: 18px;
}
#fruits~input[type=text] {
border-bottom: 1px solid darkgray;
width: 200px;
height: 50px;
text-align: center;
}
/*~兄弟选择器*/
#fruits~input[type=button] {
width: 80px;
height: 30px;
background-color: coral;
color: white;
vertical-align: bottom;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<ul id="fruits">
<li>苹果<a href="">×</a></li>
<li>香蕉<a href="">×</a></li>
<li>火龙果<a href="">×</a></li>
<li>西瓜<a href="">×</a></li>
</ul>
<input type="text" name="fruit">
<input id="ok" type="button" value="确定">
</div>
<script type="text/javascript">
var ul = document.getElementById('fruits');
var input = document.querySelector('#container input[type=text]');
function addItem(){
//trim() -> 去除字符串两边的空白
var fruitName = input.value.trim();
if(fruitName.length > 0){
//ocument.createElement() -> 动态创建新元素
var li = document.createElement('li');
li.textContent = fruitName;
var a = document.createElement('a');
a.href = '';
a.textContent = '×';
a.addEventListener('click',removeItem);
li.appendChild(a);
//appendChild()->添加一个子节点
//ul.appendChild(li);
//insertBefore(元素,位置) -> 在指定位置前加入元素
ul.insertBefore(li,ul.firstChild);
}
input.value = '';
//input.focus() -> 光标成为文本框中的焦点
input.focus();
}
function removeItem(evt){
//阻止事件的默认行为
evt.preventDefault();
var a = evt.target || evt.srcElement;
var li = a.parentNode;
li.parentNode.removeChild(li);
}
var anchors = document.querySelectorAll('#fruits a');
for (var i=0; i<anchors.length; i+=1){
anchors[i].addEventListener('click',removeItem);
}
//添加键盘事件
input.addEventListener('keypress',function(evt){
var key = evt.keyCode || evt.which;
if(key == 13){
addItem();
}
});
var okButton = document.getElementById('ok');
okButton.addEventListener('click',addItem);
</script>
</body>
</html>
测试结果
1.PNG
二、闪烁效果
1.滚动条
overflow: scroll -> 添加滚动条
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闪烁效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 800px;
height: 400px;
margin: 0 auto;
margin-top: 50px;
border: solid black 2px;
/*滚动条*/
/*overflow: scroll;*/
overflow: hidden;
}
#btn{
width: 265px;
margin: 0 auto;
margin-top: 20px;
margin-left: 650px;
}
#btn button{
width: 100px;
height: 40px;
margin-right: 30px;
background-color: coral;
font:20px/20px arial;
color: white;
border: none;
outline: none;
}
.smallBox{
width: 80px;
height: 80px;
border: none;
float: left;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="btn">
<button id='add'>添加</button>
<button id='twinkle'>闪烁</button>
</div>
<script src="js/randomColor.js" type="text/javascript"></script>
<script type="text/javascript">
addButton = document.querySelector('#add');
addButton.addEventListener('click',function(evt){
var button = evt.target || evt.srcElement;
box = button.parentNode.previousElementSibling;
var div = document.createElement('div');
div.className = 'smallBox';
div.style.backgroundColor = randomColor();
box.appendChild(div);
});
twinkleButton = document.querySelector('#twinkle');
twinkleButton.addEventListener('click',function(evt){
if(twinkleButton.textContent == '闪烁'){
twinkleButton.textContent = '暂停';
var buttons = document.querySelectorAll('#box div');
timerId = window.setInterval(function(){
for (var i=0; i<buttons.length; i++){
buttons[i].style.backgroundColor = randomColor();
}
},100)
}
else{
twinkleButton.textContent = '闪烁';
window.clearInterval(timerId);
}
});
</script>
</body>
</html>
测试结果
2.PNG
三、作业1
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>闪烁效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 800px;
height: 400px;
margin: 0 auto;
margin-top: 50px;
border: solid black 2px;
/*滚动条*/
/*overflow: scroll;*/
overflow: hidden;
}
#btn{
width: 265px;
margin: 0 auto;
margin-top: 20px;
margin-left: 650px;
}
#btn button{
width: 100px;
height: 40px;
margin-right: 30px;
background-color: coral;
font:20px/20px arial;
color: white;
border: none;
outline: none;
}
.smallBox{
width: 80px;
height: 80px;
border: none;
float: left;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="btn">
<button id='add'>添加</button>
<button id='twinkle'>闪烁</button>
</div>
<script src="js/randomColor.js" type="text/javascript"></script>
<script type="text/javascript">
addButton = document.querySelector('#add');
addButton.addEventListener('click',function(evt){
var button = evt.target || evt.srcElement;
box = button.parentNode.previousElementSibling;
var div = document.createElement('div');
div.className = 'smallBox';
div.style.backgroundColor = randomColor();
box.appendChild(div);
});
twinkleButton = document.querySelector('#twinkle');
twinkleButton.addEventListener('click',function(evt){
if(twinkleButton.textContent == '闪烁'){
twinkleButton.textContent = '暂停';
var buttons = document.querySelectorAll('#box div');
timerId = window.setInterval(function(){
for (var i=0; i<buttons.length; i++){
buttons[i].style.backgroundColor = randomColor();
}
},100)
}
else{
twinkleButton.textContent = '闪烁';
window.clearInterval(timerId);
}
});
</script>
</body>
</html>
测试结果
3.PNG
作业2
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业2</title>
<style>
#data {
border-collapse: collapse;
margin: 0 auto;
position: relative;
margin-left: 410px;
margin-top: 50px;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
position: relative;
margin-left: 480px;
margin-top: 30px;
}
#buttons button{
width: 100px;
height: 40px;
margin-right: 20px;
border: none;
outline: none;
background-color: antiquewhite;
font: 18px/18px arial;
}
</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 type="text/javascript">
//美化表格
var pretty = document.querySelector('#pretty');
var lines = document.querySelectorAll('#data tr');
console.log(lines.length)
pretty.addEventListener('click',function(){
for (var i=1;i<lines.length; i+=2){
lines[i].style.backgroundColor = 'lightseagreen';
}
});
//清除数据
clear = document.querySelector('#clear');
var cells = document.querySelectorAll('#data td');
clear.addEventListener('click',function(){
for (var i=0; i<cells.length; i++){
cells[i].textContent = '';
}
});
//删除单元格
var remove = document.querySelector('#remove');
remove.addEventListener('click',function(){
var lines = document.querySelectorAll('#data tr');
if(lines.length > 1){
var tr = lines[lines.length-1];
tr.parentNode.removeChild(tr)
}
})
//隐藏表格
var hide = document.querySelector('#hide');
var table = document.querySelector('#data');
hide.addEventListener('click',function(){
table.style.display = 'none';
})
</script>
</body>
</html>
测试结果
4.PNG
