diff --git a/README.md b/README.md index 92c0deba8080e35e7280c4560491c98d5db9bdd6..673ff8a201581b45f0da17da06cf286cd28ce0e2 100644 --- a/README.md +++ b/README.md @@ -1,200 +1,46 @@ # 模拟微博评论 -效果如下： +这是一个模拟微博评论功能的简单实现。项目使用HTML、CSS和JavaScript构建，包含基本的评论发布和显示功能。 -![](pic/img.gif) +## 项目结构 -HTML代码： -``` - - - - - Document - - - - -
- 你想对楼主说点什么 - 你最多可以输入30个字符 -
- -
-
-
- - - - -``` -reset.css +- `css/` - 样式文件 + - `common.css` - 主样式表 + - `reset.css` - 样式重置表 +- `js/` - 脚本文件 + - `common.js` - 主要功能实现 + - `xml.js` - DOM操作辅助函数 +- `pic/` - 图片资源 + - `1.jpg` 和 `img.gif` +- `index.html` - 页面入口 -``` -html{font-family:"微软雅黑",Arial,sans-serif} -body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,button,textarea,p,th,td,span{padding:0;margin:0;font-family:Microsoft YaHei,sans-serif,Arial} -table{border-collapse:collapse;border-spacing:0} -fieldset,img{border:0} -a{text-decoration:none;color:#000;outline:none} -li{list-style:none} -caption,th{text-align:left} -h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} -input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit} -input,button,textarea,select{*font-size:100%} -a{-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-ms-transition:all 0.5s linear;-o-transition:all 0.5s linear} -.fix:after{content:'clear';clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} -.fix{zoom:1;} -``` +## 功能特性 -common.css +- 发布新评论 +- 显示评论内容 +- 基本的DOM操作功能 -``` -.main{ - width: 800px; - margin:20px auto; -} -span{ - display: inline-block; - width: 200px; - height: 25px; - line-height: 25px; - vertical-align: center; - text-align: left; - margin-bottom: 10px; -} -.tag{ - font-size: 13px; - margin-left: 370px; - vertical-align: bottom; - text-align: center; - margin-bottom: 0; -} -.text{ - width: 750px; - height: 180px; - margin:0 auto; +## 使用方法 - resize:none; -} +1. 打开 `index.html` 文件即可在浏览器中查看效果 +2. 在输入框中输入评论内容 +3. 点击发布按钮提交评论 -input{ - display: inline-block; - width: 80px; - height: 50px; - background: #E2526F; - border: 0; - margin-left: 670px; - margin-top: 10px; -} -.creatediv{ - width: 675px; - height: 80px; - border: 1px solid gray; - position: relative; - margin-top: 10px; - padding-left: 75px; -} -.createinput{ - width: 80px; - height: 30px; - position:absolute; - right: 5px; - bottom:5px; -} -.createimg{ - width: 50px; - height: 50px; - position: absolute; - top: 15px; - left: 15px; -} -.createdivs{ - width:600px; - height:50px; - position: absolute; - top: 15px; - left: 85px; -} -``` +## 技术要点 -xml.js +- 使用原生JavaScript实现功能 +- 包含基本的DOM操作函数 + - 获取前一个兄弟节点 + - 获取后一个兄弟节点 + - 获取第一个子节点 + - 获取最后一个子节点 -``` -function get_previousSibling(n) { - y=n.previousSibling; - while (y.nodeType!=1) { - y=y.previousSibling; - } - return y; -} -function get_nextSibling(n) { - y=n.nextSibling; - while (y.nodeType!=1) { - y=y.nextSibling; - } - return y; -} -function get_lastChild(n) { - y=n.lastChild; - while (y.nodeType!=1) { - y=y.previousSibling; - } - return y; -} -function get_firstChild(n) { - y=n.firstChild; - while (y.nodeType!=1) { - y=y.nextSibling; - } - return y; -} +## 样式说明 -// Trim() , Ltrim() , RTrim() -String.prototype.Trim = function(){ -return this.replace(/(^\s*)|(\s*$)/g, ""); -} -String.prototype.LTrim = function(){ -return this.replace(/(^\s*)/g, ""); -} -String.prototype.RTrim = function() { -return this.replace(/(\s*$)/g, ""); -} -``` +- 使用 `reset.css` 进行样式重置 +- `common.css` 包含主要样式定义 + - `.main` - 主容器样式 + - `span`, `.tag`, `.text` - 评论元素样式 + - `input`, `.creatediv`, `.createinput`, `.createimg`, `.createdivs` - 输入框相关样式 -common.js - -``` -var ipt = document.getElementById("ipt"); -var txt = document.getElementById('txt'); -var textarea = document.getElementById("text"); -ipt.onclick = function(){ - var textValue = textarea.value.LTrim(); - textarea.value=""; - if(textValue.length>0 ){ - var divs = document.createElement("div"); - var imgs = document.createElement("img"); - var ps = document.createElement("p"); - var inputs = document.createElement("input"); - divs.setAttribute("class","creatediv"); - imgs.setAttribute('class',"createimg"); - ps.setAttribute("class","createdivs"); - inputs.setAttribute("class","createinput"); - imgs.src="pic/1.jpg"; - inputs.type="button"; - inputs.value="删除"; - ps.innerHTML=textValue; - divs.appendChild(imgs); - divs.appendChild(ps); - divs.appendChild(inputs); - if(txt.children.length==0){ - txt.appendChild(divs); - - }else{ - txt.insertBefore(divs,get_firstChild(txt)) - } - inputs.onclick = function(){ - this.parentNode.parentNode.removeChild(this.parentNode) - } - } -} -``` +该项目适合前端初学者学习基本的DOM操作和网页交互功能的实现。 \ No newline at end of file