请问这个发表功能代码写的怎么样??各位评论一下

悬赏园豆：10 [待解决问题]

主要是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>

ASP.NET js 前端 javascript 新手问题

深蓝色梦想 | 初学一级 | 园豆：6
提问于：2012-07-21 02:37

< >

所有回答(4)

首先，javascript代码我认为不应和html代码放在一起。

要把javascript代码放入另一个文件中：

 1   <script type="text/javascript">
 2                     function $(id){ return typeof id == "string"?document.getElementById(id):id }
 3                     var flag = true;
 4                     var flag1 = true;
 5                     var flag2 = true;
 6                     $("btn").onclick = function(){
 7                         if(flag){
 8                             flag = false;
 9                             var createLI = document.createElement("li");
10                             var createText = document.createTextNode($("textuser").value);
11                             createLI.appendChild(createText);
12                             $("list").insertBefore(createLI,$("list").getElementsByTagName("li")[0]);
13                             createLI.index= true;
14                             opacityElem(createLI);
15                         }else{
16                             if(flag1){
17                                 flag1 = false;
18                                 $("warning").style.display = "block";
19                                     if(flag2){
20                                         flag2 = false;
21                                         opacityElem($("warning"))
22                                     }
23                                     warning($("warning"),"top",95);
24                             }
25                         }
26                     }
27                     function warning(obj,attr,iTarget){
28                         $("warning").timer = setInterval(function(){
29                                 move(obj,attr,iTarget);
30                         },60)
31                     }
32                     function move(obj,attr,iTarget){
33                         var iCur = getStyle(obj,attr);
34                         var iSpeed = (iTarget - iCur) / 5;
35                         iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
36                         obj.style[attr] = iSpeed + iCur + "px";
37                         if(iCur == iTarget){
38                             flag1 = true;
39                             $("warning").style.display = "none";
40                             $("warning").style.top = "222px";
41                             clearInterval(obj.timer);
42                         }
43                     }
44                     function getStyle(obj,attr){
45                         return parseInt(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr]);
46                     }
47                     function opacityElem(createLI){
48                         var n =0;
49                         var timer = null;
50                         ;(function(){
51                             if(n >= 1){
52                                 flag2 = true;
53                                 clearTimeout(timer);
54                                 if(createLI.index){
55                                     setTimeout(function(){
56                                         console.log("5秒到了!")
57                                         flag = true;
58                                     },5000)
59                                 }
60                             }else{
61                                 n+=0.1231539420;
62                                 createLI.style.opacity = n;
63                                 timer = setTimeout(arguments.callee,200);
64                             }
65                         })();
66                     }
67                     
68                 </script>

还有就是缺少注释....我没太看懂》。。。hehe

Hongten | 园豆：1768 (小虾三级) | 2012-07-21 09:46

代码看起来比较乱，

隔壁王叔 | 园豆：4 (初学一级) | 2012-07-22 22:17

CSS可以放在外面文件里的，还有写代码时注意注释，不管是你看还是阅读都有好处，不注释的话，你现在记得怎么写，下次（过了很长一段时间）如果再看的话又要去理一遍思路的

Learning hard | 园豆：362 (菜鸟二级) | 2012-07-25 23:19

给你把javascript格式化了一遍，css格式化了一遍，html也格式化了一遍，引入了Bootstrap，样子好看多了，看这里的演示。。。。

Bluishoul | 园豆：212 (菜鸟二级) | 2012-08-13 16:22

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

请问这个发表功能代码写的怎么样??各位评论一下

欢迎，请先登录或者注册。