div隨鼠標(biāo)移動(dòng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body style="height: 500000px;width: 50000px;">
<div id="box1"></div>
<script>
var box1 = document.getElementById("box1");
document.onmousemove=function(){
box1.style.left=event.clientX+"px";
box1.style.top=event.clientY+"px";
}
</script>
</body>
</html>
更改li內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>第1列</li>
<li>第2列</li>
<li>第3列</li>
<li>第4列</li>
<li>第5列</li>
<li>第6列</li>
<li>第7列</li>
<li>第8列</li>
<li>第9列</li>
<li>第10列</li>
</ul>
<script>
var lilist = document.getElementsByTagName("li");
for(var i=0;i<lilist.length;i++)
{
if(i%2==0) lilist[i].innerHTML="奇數(shù)行";
else lilist[i].innerHTML="偶數(shù)行";
}
</script>
</body>
</html>
圖片切換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="image/a.jpg" />
<br/>
<button>上一張</button>
<button>下一張</button>
</body>
<script>
var prebtn = document.getElementsByTagName("button")[0];
var nextbtn = document.getElementsByTagName("button")[1];
var img = document.getElementsByTagName("img")[0];
imglist = ["image/a.jpg","image/b.jpg","image/c.jpg","image/d.jpg","image/e.png","image/f.jpg"]
var index=0;
prebtn.onclick = function(){
index--;
if(index<0) index=imglist.length-1;
img.src=imglist[index];
}
nextbtn.onclick = function(){
index++;
if(index>=imglist.length) index=0;
img.src=imglist[index];
}
</script>
</html>
移動(dòng)div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<button id="btn">單擊開始</button>
<div id="box1"></div>
<script>
var btn=document.getElementById("btn");
var box=document.getElementById("box1");
btn.onclick=function(){
var move = function(){
var nv=box.offsetLeft+10;
box.style.left = nv+"px";
}
setInterval(move,30);
}
</script>
</body>
</html>
