Chinaunix首页 | 论坛 | 博客

zhanfeng0102的ChinaUnix博客zhanfeng.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

zhanfeng0102

  • 博客访问： 47107
  • 博文数量： 34
  • 博客积分： 831
  • 博客等级： 军士长
  • 技术积分： 310
  • 用 户 组： 普通用户
  • 注册时间： 2012-10-08 11:15
文章分类

全部博文（34）

文章存档

2012年（34）

我的朋友
最近访客
推荐博文
相关博文
留言板

分类： 系统运维

2012-10-08 18:05:52

MicrosoftInternetExplorer402DocumentNotSpecified7.8Normal0

留言板主要是通过DOM里的方法来实现的，用的知识点有document.createElement(‘li’),创建标签；获取标签里的内容有两种方法：var text=document.createTextNode(text.value),

var text=text.value；设置标签inpt.setAttribute(‘type’,’button’);插入标签dad.appendChild(child);

给新建的标签赋值：li.appendChild(text); li.innerHTML=text;。总的来说留言板只是把DOM里的知识点熟练运用。

部分代码如下：


点击(此处)折叠或打开

  1. 　　<style>
  2. 　　        body,div,ul,li,input{margin:0;padding:0;}
  3. 　　        div{width:200px;margin:100px auto;}
  4. 　　        ul{width:200px;margin-bottom:50px;}
  5. 　　        li{width:90%;list-style-type:none;font-weight:16px;text-indent:12px;float:left;}
  6. 　　        textarea{height:50px;width:100%;font-size:16px;}
  7. 　　</style>
  8. 　　
  9. 　　<body>
  10. 　　    <div>
  11. 　　        <ul id='ly'>
  12. 　　            <li style="width:100%;">留言的问题</li>
  13. 　　            
  14. 　　        </ul>
  15. 　　        <textarea id="tta">AAA</textarea>
  16. 　　        <input type='button' style="margin-top:10px;height:30px;width:50px;" id='fb' value='发布'>
  17. 　　    </div>
  18. 　　    <script>
  19. 　　        var tta=document.getElementById('tta');
  20. 　　        var ly=document.getElementById('ly');
  21. 　　        var fb=document.getElementById('fb');
  22. 　　        var inpts=[];
  23. 　　        var lis=[];
  24. 　　        var ii=0;
  25. 　　        fb.onclick=fbff;
  26. 　　        function fbff(){
  27. 　　        x1=0;x2=0;
  28. 　　            var li=document.createElement('li');
  29. 　　            //alert(tta.value)
  30. 　　            //var text=document.createTextNode(tta.value);
  31. 　　            var text=tta.value;
  32. 　　            //var aa=tta.value;
  33. 　　            //console.log(aa);
  34. 　　            alert(text)
  35. 　　        //    var aa=text.indexOf(' ');alert(aa);
  36. 　　            if(text.length==0||tta.value.indexOf(" ")==0){
  37. 　　                alert('留言不能为空！！请输入留言！！！')
  38. 　　                return;
  39. 　　            }
  40. 　　            else{
  41. 　　                tta.value='';
  42. 　　                var inpt1=document.createElement('input');
  43. 　　                inpt1.setAttribute('type','button');
  44. 　　                inpt1.setAttribute('value','x');
  45. 　　                inpt1.style.opacity=0;
  46. 　　                li.style.opacity=0;
  47. 　　                ly.appendChild(li);
  48. 　　                //li.appendChild(text);    
  49. 　　                li.innerHTML=text;
  50. 　　                
  51. 　　                ly.appendChild(inpt1);
  52. 　　                lis[ii]=li;
  53. 　　                inpts[ii]=inpt1;
  54. 　　                ii++;
  55. 　　                move(li,inpt1);
  56. 　　                
  57. 　　                for(var i=0;i<inpts.length;i++){
  58. 　　                    inpts[i].onclick=del;
  59. 　　                }
  60. 　　            }
  61. 　　            
  62. 　　        }
  63. 　　        function del(){
  64. 　　            for(var i=0;i<inpts.length;i++){
  65. 　　                if(this==inpts[i]){
  66. 　　                    ly.removeChild(inpts[i]);
  67. 　　                    ly.removeChild(lis[i]);
  68. 　　                    
  69. 　　                }
  70. 　　            }
  71. 　　        }
  72. 　　        var t1;var x1=0;var x2=0;
  73. 　　        function move(a,b){
  74. 　　        //console.log(a);
  75. 　　        //alert(a)
  76. 　　        var aa=a;
  77. 　　        var bb=b;
  78. 　　        
  79. 　　        if(a.style.opacity==1){
  80. 　　            clearTimeout(t1);
  81. 　　            return;
  82. 　　        }
  83. 　　        x1=x1+0.008;
  84. 　　        x2=x2+0.008;
  85. 　　        aa.style.opacity=x1;
  86. 　　        bb.style.opacity=x2;console.log(x1,x2);
  87. 　　        t1=setTimeout(function (a,b){move(aa,bb);},17);
  88. 　　        }
  89. 　　    </script>
  90. 　　</body>
  91. 　　</html>
文件代码： 留言板.rar  


阅读(262) | 评论(0) | 转发(0) |
0

上一篇：innerHTML用法

下一篇：This用法和闭包

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6