主要是flag这类的变量用的太多了.用来解决setTimeout或者setInterval队列卡位的现象.
谁还有比较方便的办法啊?
哪位高手可以美化一下这个功能??或者代码优化一下?
<!DOCTYPE html>
<html>
        <head>
                <title>txtScrolling</title>
                <style type="text/css">
*{padding: 0;margin: 0;}
ul,li{list-style:none;}
.wrap{ width:400px;border:1px solid #fff;margin:60px auto 0;clear:both }
li{ height:50px;background:#eee;line-height:50px;text-indent:30px;border:1px dashed #aaa }
#textEdit{ width:400px;margin:0 auto }
#textEdit textarea{ width:400px;height:100px; }
.btn{ float:right }
#warning{ position:absolute;top:222px;left:50%;margin:-25px 0 0 -110px; width:220px;height:50px;background:red;line-height:50px;text-align:center;font-size:14px;color:#fff }
                </style>
        </head>
        <body><div id="textEdit">
<textarea id="textuser"></textarea>
<input type="button" value="发送" class="btn" id="btn" />
</div>
<div class="wrap" id="wrap">
<ul id="list">
<li>hello world!</li>
</ul>
</div>
<div id="warning" style="display:none">
你发表频率太大,请5秒后在操作!
</div>
                <script type="text/javascript">
function $(id){ return typeof id == "string"?document.getElementById(id):id }
var flag = true;
var flag1 = true;
var flag2 = true;
$("btn").onclick = function(){
if(flag){
flag = false;
var createLI = document.createElement("li");
var createText = document.createTextNode($("textuser").value);
createLI.appendChild(createText);
$("list").insertBefore(createLI,$("list").getElementsByTagName("li")[0]);
createLI.index= true;
opacityElem(createLI);
}else{
if(flag1){
flag1 = false;
$("warning").style.display = "block";
if(flag2){
flag2 = false;
opacityElem($("warning"))
}
warning($("warning"),"top",95);
}
}
}
function warning(obj,attr,iTarget){
$("warning").timer = setInterval(function(){
move(obj,attr,iTarget);
},60)
}
function move(obj,attr,iTarget){
var iCur = getStyle(obj,attr);
var iSpeed = (iTarget - iCur) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
obj.style[attr] = iSpeed + iCur + "px";
if(iCur == iTarget){
flag1 = true;
$("warning").style.display = "none";
$("warning").style.top = "222px";
clearInterval(obj.timer);
}
}
function getStyle(obj,attr){
return parseInt(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr]);
}
function opacityElem(createLI){
var n =0;
var timer = null;
;(function(){
if(n >= 1){
flag2 = true;
clearTimeout(timer);
if(createLI.index){
setTimeout(function(){
console.log("5秒到了!")
flag = true;
},5000)
}
}else{
n+=0.1231539420;
createLI.style.opacity = n;
timer = setTimeout(arguments.callee,200);
}
})();
}

</script>

        </body>
</html>