<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
opacity: 0.3;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
var box = document.getElementById("box");
btn200.onclick = function() {
animate(box,200);
}
btn400.onclick = function() {
animate(box,400);
}
function animate(obj,target){ // 第一个参数 动谁 第二个参数 动多少
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 计算步长 动画的原理 盒子本身的位置 + 步长
var step = (target - obj.offsetLeft) / 10; // 步长
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 取整步长
// obj.style.left = 盒子本身的位置 + 步长
obj.style.left = obj.offsetLeft + step + "px";
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
},30)
}
</script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var div1 = document.getElementById("div1").innerHTML;
var div2 = document.getElementById("div2").innerHTML;
function onBtnClick(id,txt) {
document.getElementById(id).onclick = function() {
this.nextSibling.innerHTML = txt;
}
}
onBtnClick("btn1",div1.concat(div2));
}
</script>
</head>
<body>
<div id="div1">my name is andy!</div>
<div id="div2">what's your name?</div>
<button id="btn1">concat()</button><span></span> <br />
</body>
</html>