节点控制的隔行换色
<button id="btn">按钮</button>
<ul id="uu">
<li>清蒸晓阳</li>
<li>红烧四个点</li>
<li>爆炒小金昂</li>
<li>水煮小安安</li>
<li>油炸小康康</li>
<li>炭烤刚子</li>
</ul>
<script type="text/javascript">
var btn = document.getElementById("btn")
btn.onclick = function(){
var uu = document.getElementById("uu")
var list = uu.childNodes;
console.log(list[0].nodeName)
console.log(list[1].nodeName)
console.log(list[0].nodeValue)
console.log(list[1].nodeValue)
console.log(list[0].nodeType)
console.log(list[1].nodeType)
console.log(list)
var count = 0;
for(var i = 0; i<list.length;i++){
if(list[i].nodeType == 1 && list[i].nodeName == "LI"){
list[i].style.backgroundColor=count%2 == 0?"pink":"cyan",
count++;
}
}
}
</script>
tab切换
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: purple;
}
.bd li {
height: 255px;
background-color: purple;
display: none;
}
.bd li.current {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span >体育</span>
<span>娱乐</span>
<span class="current">新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li>我是体育模块</li>
<li>我是娱乐模块</li>
<li class="current">我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script>
var box = document.getElementById("box")
var hd = box.getElementsByTagName("div")[0]
var bd = box.getElementsByTagName("div")[1]
var list = bd.getElementsByTagName("li")
var spans = hd.getElementsByTagName("span")
for(var i = 0; i < spans.length;i++){
spans[i].setAttribute("index",i)
spans[i].onclick = function(){
for(var j = 0; j < spans.length;j++){
spans[j].removeAttribute("class")
}
this.className = "current"
var num = this.getAttribute("index")
console.log(num)
for(var k = 0; k < list.length;k++){
list[k].removeAttribute("class")
}
list[num].className = "current"
}
}
</script>
鼠标拖动
拖动的元素:box
拖动的过程
1- 当鼠标在拖拽元素时按下,开始拖拽 onmousedown
2- 当鼠标拖拽元素时,元素跟着鼠标移动 onmousemove
3- 当鼠标松开时,元素固定到当前位置 onmouseup
<style type="text/css">
div{
width: 50px;
height: 50px;
background: blue;
position: absolute;
}
</style>
<div id="box">
</div>
<script type="text/javascript">
var box = document.getElementById("box")
box.onmousedown = function(event){
event = event || window.event
var x = event.clientX
var y = event.clientY
console.log(x,y)
var l = box.offsetLeft
var t = box.offsetTop
console.log(l,t)
var x1 = x - l
var y1 = y - t
document.onmousemove = function(event){
event = event || window.event
var x2 = event.clientX - x1
var y2 = event.clientY - y1
console.log(event.clientX)
box.style.left = x2+"px"
box.style.top = y2+"px"
}
document.onmouseup = function(){
document.onmousemove = null
document.onmouseup = null
}
}
拖动
拖拽box1元素
拖拽的流程
-
1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
-
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
-
3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.onmousedown = function(event){
box1.setCapture && box1.setCapture();
event = event || window.event;
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
document.onmousemove = function(event){
event = event || window.event;
var left = event.clientX - ol;
var top = event.clientY - ot;
box1.style.left = left+"px";
box1.style.top = top+"px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
box1.releaseCapture && box1.releaseCapture();
};
return false;
};
};
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
键盘事件
onkeydowm 键盘按下事件
onkeyup 键盘抬起事件
<script type="text/javascript">
window.onload = function(){
document.onkeydown = function(event){
event = event || window.event
console.log(event)
console.log(event.ctrlKey)
if(event.keyCode == 13){
alert("这是一个回车事件")
}
if(event.keyCode == 89 && event.ctrlKey){
alert("你按了ctrl")
}
}
}
</script>
<input type="text">