用js定时器怎么设置文字一个个移动到另一个框
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var toogle = true;
function move(obj, target){
if(toogle){
var tar = document.getElementById(target);
var str = obj.innerHTML.constructor==String&&obj.innerHTML!=' '&&obj.innerHTML?obj.innerHTML:'';
var arr = str.split('');
var timer;
var i = 0;
run(i);
toogle = false;
}
function run(i){
if(i==arr.length)return;
obj.innerHTML = str.slice(i+1)+' ';
var newNode = document.createElement('span');
obj.appendChild(newNode);
newNode.style.position = 'absolute';
newNode.style.left = obj.offsetLeft+10+'px';
newNode.innerHTML = arr[i];
timer = setInterval(function(){
newNode.style.left = parseInt(newNode.style.left)+5+'px';
if(parseInt(newNode.style.left)+37>=tar.offsetLeft){
clearInterval(timer);
obj.removeChild(newNode);
if(i==0)
tar.innerHTML = arr[i];
else
tar.innerHTML += arr[i];
i++;
run(i);
}
},10);
}
}
</script>
<style>
body { margin:0; padding:0}
div { margin:50px;display:inline-block; width:300px; height:200px; border:solid 1px #000; font-size:20px; line-height:20px; padding:10px; position:relative}
</style>
</head>
<body>
<div id="left" onClick="move(this,'right')">我只往右边走</div>
<div id="right"> </div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<body onload="init()">
<div id="content">
</div>
</body>
.boxa {
float:left;
width:120px;
height:100px;
border:solid 1px red;
}
.boxb {
float:left;
margin:0 0 0 10px;
width:120px;
height:100px;
border:solid 1px green;
}
var text = "用js定时器怎么设置文字一个个移动到另一个框",
index = text.length;
function init(){
var c = document.getElementById("content");
setInterval(function(){
index = (index+1) % text.length;
c.innerHTML = "<div class='boxa'>"+text.substring(0,index)
+ "</div><div class='boxb'>" + text.substring(index,text.length) + "</div>";
},1000);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你也没说怎么移啊，随便写了一个，丑就丑点吧。
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<title></title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
var leftTxt = document.getElementById("left");
var rightTxt = document.getElementById("right");
var btnTrans = document.getElementById("btn1");
var rightArr = new Array();
function txtTrans(){
var leftVal = leftTxt.value;
if(leftVal !=null || leftVal !=""){
var regExp = /\b|\B/g;
var leftArr = leftVal.split(regExp);
rightArr.push(leftArr[leftArr.length -1]);
leftArr = leftArr.slice(0,leftArr.length - 1);
leftTxt.value = leftArr.join("");
rightTxt.value = arrayReverse(rightArr).join("");
} else {
clearInterval(interID);
}
}
function arrayReverse(arr){
var reversedArray = new Array();
for (var i = arr.length - 1;i >= 0;i--){
reversedArray.push(arr[i]);
}
return reversedArray;
}
btnTrans.onclick = function(){
interID = setInterval(txtTrans,100);
}
},false);
</script>
<style type="text/css">
</style>
</head>
<body>
<textarea id="left" rows="5" cols="20"></textarea>
<button id="btn1">transfer</button>
<textarea id="right" rows="5" cols="20"></textarea>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
