阻止事件的默认行为:evt.preventDefault();
删除元素(删除子节点):parentNode.removeChild();
创建新元素:document.createElement();
添加子节点:appendChild();
在指定位置加入节点:insertBefore();
<script type="text/javascript">
var ul = document.getElementById('fruits');
var input = document.querySelector('#container input[type=text]');
function removeItem(evt){
// 阻止事件的默认行为
evt.preventDefault();
var a = evt.target || evt.srcElement;
var li = a.parentNode;
// 删除元素(删除子节点)
li.parentNode.removeChild(li);
}
function addItem(){
var friuitName = input.value.trim();
if (friuitName.length > 0){
// 创建新元素
var li = document.createElement('li');
li.textContent = friuitName;
var a = document.createElement('a');
a.href = '';
a.textContent = '×';
a.addEventListener('click', removeItem);
li.appendChild(a)
// 添加子节点
// ul.appendChild(li);
// 在指定位置加入节点
ul.insertBefore(li, ul.firstChild);
}
input.value = '';
input.focus();
}
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.querySelector('#ok');
okButton.addEventListener('click', addItem);
</script>
<script type="text/javascript">
function randomColor(){
r = parseInt(Math.random() * 256);
g = parseInt(Math.random() * 256);
b = parseInt(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
var bigBox = document.querySelector('#big')
var createButton = document.getElementById('button1');
var flaButton = document.getElementById('button2');
var span = document.querySelector('#button2>span');
function create(){
var div = document.createElement('div');
div.style.backgroundColor = randomColor();
bigBox.appendChild(div);
}
function fla(){
if(flag){
timerId = window.setInterval(function(){
var div = document.querySelectorAll('#big>div');
// console.log(div[1]);
changeColor(div);
span.textContent = '暂停';
flag = false;
},10);
}else{
window.clearInterval(timerId);
span.textContent = '闪烁';
flag = true;
}
}
function changeColor(div){
// console.log(div[1]);
// console.log(div.length);
// div[1].style.backgroundColor = 'red';
for(var i = 0; i < div.length; i += 1){
div[i].style.backgroundColor = randomColor();
}
}
createButton.addEventListener('click', create);
var flag = true;
flaButton.addEventListener('click', fla);
</script>
网友评论