11.24 js点击倒计时 / 鼠标拖动
DOM节点查找
children 子节点，不包含空节点
childNodes 子节点，包含空节点
firstChild 第一个子节点，包含空节点
fristElementChild 第一个子节点,不包含空节点
lastChild 最后一个子节点，包含空节点
lastElementChild 最后一个子节点，不包含空节点
parentNode 父节点
offsetParent 根据position去定位，如果没有 body
nextSibling 下一个兄弟节点，包含空节点
nextElementSibling 下一个兄弟节点，不包含空节点
previousSibling 前一个兄弟节点，包含空节点
previousElementSibling 前一个兄弟节点，不包含空节点
事件
onload 图片或加载完成
onerror 图片加载失败
onfocus 获得焦点
onblur 失去焦点
onchange 表达内容 发送改变
onclick 点击
ondblclick 点击两次
onkeydown 键盘按下
onkeyup 键盘抬起
兼容处理 var event =event||window.event
键盘event对象属性 keyCode
onmousedown 鼠标按下
onmouseup 鼠标抬起
onmousemove 鼠标移动
onmouseover 移到对象上
onmouseout 鼠标离开
鼠标event对象属性 clientX clientY
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
#box{
width: 100px;
height: 100px;
background: red;
cursor: move;
position: fixed;
top: 100px;
left: 100px;
color: #fff;
}
</style>
<script>
window.onload=function () {
//js鼠标拖动
var box =document.getElementById('box');
box.onmousedown=function(event){
var event = event || window.event;
var left = event.clientX -50;
var top = event.clientY -50;
box.style.left= left+'px';
box.style.top= top+'px';
box.onmousemove = function (event) {
var event = event || window.event;
var left = event.clientX -50;
var top = event.clientY -50;
box.style.left= left+'px';
box.style.top= top+'px';
}
};
box.onmouseout = function () {
box.onmousemove =function () {
return;
}
};
box.onmouseup = function () {
box.onmousemove =function () {
return;
}
};
var ipt = document.getElementById('ipt');
ipt.onfocus=function () {
console.log('focus:'+ipt.value);
};
ipt.onblur = function(){
console.log('blur:'+ipt.value)
};
ipt.onchange = function () {
console.log('change：'+ipt.value)
};
//d倒计时
var btn = document.getElementById('btn');
var num = ipt.value;
btn.onclick = function(){
function count1(num) {
count=setInterval(function () {
ipt.value=num;
num--;
if(num == -1){
clearInterval(count)
}
},1000);
}
count1(num)
};
var btn2=document.getElementById('btn2');
var ipt2 = document.getElementById('ipt2');
btn2.onclick = function() {
if(ipt2.value > 0){
ipt2.value--;
}else{
ipt2.value=10;
}
}
}
</script>
</head>
<body>
<div id="box">
xxxx
</div>
<input type="text" value="10" id="ipt">
<button id="btn">刷新</button>
<br/>
<input type="text" value="10" id="ipt2">
<button id="btn2">点击</button>
</body>
</html>
