JavaScript留言板效果代码实例

最新推荐文章于 2024-06-15 17:55:19 发布
Return_KB
最新推荐文章于 2024-06-15 17:55:19 发布
阅读量4.1k
点赞数 1
分类专栏：前端js 效果
前端js 同时被 2 个专栏收录
39 篇文章 0 订阅
订阅专栏
效果
13 篇文章 0 订阅
订阅专栏
分享一段代码实例，它实现了简单的留言板效果。
这里主要演练的是对于dom元素的相关操作技巧，代码实例如下:
     
     
      
      
       
       
        
         
            
              001 
             
            
              002 
             
            
              003 
             
            
              004 
             
            
              005 
             
            
              006 
             
            
              007 
             
            
              008 
             
            
              009 
             
            
              010 
             
            
              011 
             
            
              012 
             
            
              013 
             
            
              014 
             
            
              015 
             
            
              016 
             
            
              017 
             
            
              018 
             
            
              019 
             
            
              020 
             
            
              021 
             
            
              022 
             
            
              023 
             
            
              024 
             
            
              025 
             
            
              026 
             
            
              027 
             
            
              028 
             
            
              029 
             
            
              030 
             
            
              031 
             
            
              032 
             
            
              033 
             
            
              034 
             
            
              035 
             
            
              036 
             
            
              037 
             
            
              038 
             
            
              039 
             
            
              040 
             
            
              041 
             
            
              042 
             
            
              043 
             
            
              044 
             
            
              045 
             
            
              046 
             
            
              047 
             
            
              048 
             
            
              049 
             
            
              050 
             
            
              051 
             
            
              052 
             
            
              053 
             
            
              054 
             
            
              055 
             
            
              056 
             
            
              057 
             
            
              058 
             
            
              059 
             
            
              060 
             
            
              061 
             
            
              062 
             
            
              063 
             
            
              064 
             
            
              065 
             
            
              066 
             
            
              067 
             
            
              068 
             
            
              069 
             
            
              070 
             
            
              071 
             
            
              072 
             
            
              073 
             
            
              074 
             
            
              075 
             
            
              076 
             
            
              077 
             
            
              078 
             
            
              079 
             
            
              080 
             
            
              081 
             
            
              082 
             
            
              083 
             
            
              084 
             
            
              085 
             
            
              086 
             
            
              087 
             
            
              088 
             
            
              089 
             
            
              090 
             
            
              091 
             
            
              092 
             
            
              093 
             
            
              094 
             
            
              095 
             
            
              096 
             
            
              097 
             
            
              098 
             
            
              099 
             
            
              100 
             
            
              101 
             
            
              102 
             
            
              103 
             
            
              104 
             
            
              105 
             
            
              106 
             
            
              107 
             
            
              108 
             
            
              109 
             
            
              110 
             
            
              111 
             
            
              112 
             
            
              113 
             
            
              114 
             
            
              115 
             
            
              116 
             
            
              117 
             
            
              118 
             
            
              119 
             
            
              120 
             
            
              121 
             
            
              122 
             
            
              123 
             
            
              124 
             
            
              125 
             
            
              126 
             
            
              127 
             
            
              128 
             
            
              129 
             
            
              130 
             
            
              131 
             
            
              132 
             
            
              133 
             
            
              134 
             
            
              135 
             
            
              136 
             
            
              137 
             
            
              138 
             
            
              139 
             
            
              140 
             
            
              141 
             
            
              142 
             
            
              143 
             
            
              144 
             
            
              145 
             
            
              146 
             
            
              147 
             
            
              148 
             
            
              149 
             
            
              150 
             
            
              151 
             
            
              152 
             
            
              153 
             
            
              154 
             
            
              155 
             
            
              156 
             
            
              157 
             
            
              158 
             
            
              159 
             
            
              160 
             
            
              161 
             
            
              162 
             
            
              163 
             
            
              164 
             
            
              165 
             
            
              166 
             
             
              
              <!doctype html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              "utf-8" 
              > 
              
              
              < 
              title 
              >留言板效果</ 
              title 
              > 
              
              
              < 
              style  
              type 
              = 
              "text/css" 
              > 
              
              
              * { 
              
              
                 
              margin: 0; 
              
              
                 
              padding: 0; 
              
              
              } 
              
              
              body, html { 
              
              
                 
              height: 100%; 
              
              
                 
              width: 100%; 
              
              
              } 
              
              
              #wrap { 
              
              
                 
              width: 600px; 
              
              
                 
              background: rgb(200,200,200); 
              
              
                 
              margin: 20px auto; 
              
              
                 
              padding: 10px; 
              
              
              } 
              
              
              li { 
              
              
                 
              list-style: none; 
              
              
              } 
              
              
              #content_view { 
              
              
                 
              padding: 10px; 
              
              
              } 
              
              
              #content_view li { 
              
              
                 
              padding: 10px 0; 
              
              
                 
              line-height: 22px; 
              
              
              } 
              
              
              #content_view #userName { 
              
              
                 
              height: 30px; 
              
              
                 
              width: 520px; 
              
              
                 
              font-size: 16px; 
              
              
                 
              vertical-align: top; 
              
              
              } 
              
              
              #content_view #content { 
              
              
                 
              width: 520px; 
              
              
                 
              height: 100px; 
              
              
                 
              font-size: 16px; 
              
              
                 
              vertical-align: top; 
              
              
              } 
              
              
              #content_view #submit { 
              
              
                 
              width: 100px; 
              
              
                 
              height: 30px; 
              
              
                 
              border: 1px solid gray; 
              
              
                 
              background: white; 
              
              
                 
              position: relative; 
              
              
                 
              left: 48px; 
              
              
                 
              font-size: 16px; 
              
              
              } 
              
              
              #comment_list h2 { 
              
              
                 
              margin-top: 10px; 
              
              
              } 
              
              
              #comment_list h3 { 
              
              
                 
              padding: 10px; 
              
              
                 
              background: mistyrose; 
              
              
              } 
              
              
              #comment_list p { 
              
              
                 
              padding: 10px; 
              
              
                 
              font-size: 14px; 
              
              
                 
              text-indent: 2em; 
              
              
              } 
              
              
              #comment_list a { 
              
              
                 
              text-decoration: none; 
              
              
                 
              float: right; 
              
              
                 
              top: 20px; 
              
              
              } 
              
              
              </ 
              style 
              > 
              
              
              < 
              script  
              type 
              = 
              "text/javascript" 
              > 
              
              
              window.onload = function() { 
              
              
                 
              var userName = document.getElementById("userName"); 
              
              
                 
              var content = document.getElementById("content"); 
              
              
                 
              var submitBtn = document.getElementById("submit"); 
              
              
                 
              var ul = document.getElementById("comment_ul"); 
              
              
                 
              var timer = null; 
              
              
                 
              submitBtn.onclick = function() { 
              
              
                   
              var name = userName.value; 
              
              
                   
              var comment_P = content.value; 
              
              
                 
              
              
                   
              if (name == "" || comment_P == "") { 
              
              
                     
              alert("留言者的姓名和留言内容不能为空！"); 
              
              
                     
              return; 
              
              
                   
              } 
              
              
                 
              
              
                   
              userName.value = ""; 
              
              
                   
              content.value = ""; 
              
              
                   
              var li = document.createElement('li'); 
              
              
                   
              li.innerHTML = '< 
              h3 
              >' + name + '</ 
              h3 
              >< 
              p 
              >' + comment_P + '< 
              a  
              href 
              = 
              "###" 
              >删除</ 
              a 
              ></ 
              p 
              >'; 
              
              
                   
              if (ul.children.length > 0) { 
              
              
                     
              ul.insertBefore(li, ul.children[0]); 
              
              
                   
              } else { 
              
              
                     
              ul.appendChild(li); 
              
              
                   
              } 
              
              
                 
              
              
                   
              var start = 0; 
              
              
                   
              var end = li.offsetHeight; 
              
              
                 
              
              
                   
              li.style.height = 0; 
              
              
                   
              var change = end - start; 
              
              
                   
              var t = 0; 
              
              
                   
              var endT = 20; 
              
              
                 
              
              
                   
              clearInterval(timer); 
              
              
                   
              timer = setInterval(function() { 
              
              
                     
              t++; 
              
              
                     
              if (t == endT) { 
              
              
                       
              clearInterval(timer); 
              
              
                     
              } 
              
              
                 
              
              
                     
              li.style.height = Tween.Bounce.easeOut(t, start, change, endT) + 'px'; 
              
              
                   
              }, 30); 
              
              
                 
              
              
                 
              
              
                   
              var deleteAObj = li.getElementsByTagName('a')[0]; 
              
              
                 
              
              
                   
              deleteAObj.onclick = function() { 
              
              
                 
              
              
                     
              var deleteLi = this.parentNode.parentNode; 
              
              
                     
              var start = li.offsetHeight; 
              
              
                     
              var end = 0; 
              
              
                     
              var change = end - start; 
              
              
                     
              var t = 0; 
              
              
                     
              var endT = 20; 
              
              
                     
              clearInterval(timer); 
              
              
                     
              timer = setInterval(function() { 
              
              
                       
              t++; 
              
              
                       
              if (t == endT) { 
              
              
                 
              
              
                         
              ul.removeChild(deleteLi); 
              
              
                         
              clearInterval(timer); 
              
              
                       
              } 
              
              
                       
              li.style.height = Tween.Quart.easeIn(t, start, change, endT) + 'px'; 
              
              
                     
              }, 30); 
              
              
                   
              } 
              
              
                 
              } 
              
              
              } 
              
              
              </ 
              script 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
                 
              < 
              div  
              id 
              = 
              "wrap" 
              > 
              
              
                 
              
              
                   
              < 
              div  
              id 
              = 
              "content_view" 
              > 
              
              
                     
              < 
              ul 
              > 
              
              
                       
              < 
              li 
              > 
              
              
                         
              QQ：< 
              input  
              type 
              = 
              "text"  
              id 
              = 
              "userName"  
              /> 
              
              
                       
              </ 
              li 
              > 
              
              
                       
              < 
              li 
              > 
              
              
                         
              留言：< 
              textarea  
              name 
              = 
              ""  
              id 
              = 
              "content"  
              cols 
              = 
              "30"  
              rows 
              = 
              "10" 
              ></ 
              textarea 
              > 
              
              
                       
              </ 
              li 
              > 
              
              
                       
              < 
              li 
              > 
              
              
                         
              < 
              input  
              type 
              = 
              "button"  
              value 
              = 
              "提交"  
              id 
              = 
              "submit"  
              /> 
              
              
                       
              </ 
              li 
              > 
              
              
                     
              </ 
              ul 
              > 
              
              
                   
              </ 
              div 
              > 
              
              
                 
              
              
                   
              < 
              div  
              id 
              = 
              "comment_list" 
              > 
              
              
                     
              < 
              h2 
              >显示留言</ 
              h2 
              > 
              
              
                     
              < 
              ul  
              id 
              = 
              "comment_ul" 
              > 
              
              
                     
              </ 
              ul 
              > 
              
              
                   
              </ 
              div 
              > 
              
              
                 
              
              
                 
              </ 
              div 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >
Return_KB
关注
1
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
JavaScript留言板效果代码实例

分享一段代码实例，它实现了简单的留言板效果。这里主要演练的是对于dom元素的相关操作技巧，代码实例如下:001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044045046047048
复制链接

扫一扫
专栏目录