效果图：
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/script.js"></script> </head> <body> <div class="body"> <div class="box"> <form method="" action=""> <div class="pl"><div>评论 <span>7</span></div></div> <div class="wbk"> <div class="tx"></div> <div class="srk"> <div class="srknr"><textarea class="area" id="txtarea">你的评论可以一针见血</textarea></div> <div class="s-button"> <input type="button" class="jc btn" onclick="bold()" /> //使用ul li标签一样可行 <input type="button" class="qx btn" onclick="italic()"/> <input type="button" class="syh btn" onclick="Quotes()"/> <input type="button" class="scx btn" onclick="linetrough()"/> <input type="button" class="xhx btn" onclick="underline()"/> </div> <div class="button"><input type="button" class="tj-button" name="" id="" value="提交评论" /></div> </div> </div> <div class="add"> <div class="text"><input type="text" name="name" class="texts" id="name" value="昵称" onclick = "change('name')"/></div> <div class="text"><input type="text" name="email" class="texts" id="email" value="邮箱" onclick = "change('email')"/></div> <div class="text"><input type="text" name="site" class="texts" id="site" value="网址" onclick = "change('site')"/></div> <div class="label"><div class="lab">昵称(必填)</div><div class="lab">邮箱(必填)</div><div class="lab">网址</div></div> </div> </form> </div> </div> </body> </html>
布局CSS:
*{padding:0;margin:0;} .body{ border:1px solid #dddddd; width:1200px; height:1000px; margin:0 auto; box-shadow:0px 0px 50px gainsboro;} .box{width:818px; height:408px; border:1px solid #dddddd; margin:100px auto; box-shadow:0px 0px 50px -2px gainsboro;} .box .pl{width:776px; height:40px; border:1px solid #eaeaea; margin:25px 0 0 20px;} .box .pl div{font:18px/40px "微软雅黑"; margin-left:10px;} .box .pl span{color:red;} .box .wbk{width:778px; height:116px; margin:15px 0 0 20px; position:relative;} .box .wbk .tx{width:46px; height:114px; background: url(../img/header.gif) no-repeat;} .box .wbk .srk{width:728px; height:112px; border:2px solid #ccd4d9; position:absolute; top:0; right:0;} .box .wbk .srk .srknr{width:728px; height:76px; } .box .wbk .srk .area{width:728px; height:76px; border:none; font:12px/24px "微软雅黑"; color:#c6b1a9; text-indent:6px;} .box .wbk .srk .s-button{width:630px; height:35px; border-top:1px solid #f2f2f2; float:left; padding-top:8px; padding-left:10px;} .box .wbk .srk .s-button .btn{margin-right:12px; width:12px; height:12px; border:none;} .box .wbk .srk .s-button .wx{background:url(../img/wx.gif) no-repeat;} //使用图片整合技术会更好 .box .wbk .srk .s-button .jc{background:url(../img/bold.gif) no-repeat;} .box .wbk .srk .s-button .qx{background:url(../img/italic.gif) no-repeat;} .box .wbk .srk .s-button .syh{background:url(../img/syh.gif) no-repeat;} .box .wbk .srk .s-button .scx{background:url(../img/font.gif) no-repeat;} .box .wbk .srk .s-button .xhx{background:url(../img/u.gif) no-repeat;} .box .wbk .srk .s-button .dm{background:url(../img/file.gif) no-repeat; width:12px; height:14px;} .box .wbk .srk .s-button .tp{background:url(../img/p.gif) no-repeat; width:15px; height:14px;} .box .wbk .srk .button{width:100px; height:38px; text-align:center; float:right; position:relative; right:-2px; top:-44px;} .box .wbk .srk .button input{cursor: pointer;} .box .wbk .srk .button .tj-button{width:100px; height:38px; font:15px/38px "微软雅黑"; color:#ffffff; border:none; background:#48b913;} .box .add{width:300px; height:112px; position:relative; margin:30px 0 0 282px;} .box .add .text{width:216px; height:30px; border:2px solid #ccd4d9; margin-bottom:5px; font:13px/30px "微软雅黑"; color:#bba9bb;} .box .add .texts{width:216px; height:30px; border:none; background:none; font:13px/30px "微软雅黑"; color:#bba9a9; text-indent:6px;} .box .add .label{width:79px; height:112px; position:absolute; top:0; right:0; font:13px/37px "微软雅黑"; color:#777777;} .box .add .label .lab{text-indent:10px;}
JS：
function change(x){document.getElementById(x).value = '';}
function bold(){
var obj = document.getElementById('txtarea');
if(obj.style.fontWeight == ''|| obj.style.fontWeight == 'normal'){obj.style.fontWeight = 'bold';}
else{obj.style.fontWeight = 'normal';}
}
function italic(){
var obj = document.getElementById('txtarea');
if(obj.style.fontStyle == '' || obj.style.fontStyle == 'normal'){obj.style.fontStyle = 'italic';}
else{obj.style.fontStyle = 'normal';}
}
function linetrough(){
var obj = document.getElementById('txtarea');
var value = obj.style.textDecoration;
if(value == '' || value == 'none' || value == 'underline'){if(value == 'underline'){obj.style.textDecoration = 'line-through underline'}else{obj.style.textDecoration = 'line-through'};}
else{obj.style.textDecoration = 'none';}
}
function underline(){
var obj = document.getElementById('txtarea');
var value = obj.style.textDecoration;
if(value == '' || value == 'none' || value == 'line-through'){if(value == 'line-through'){obj.style.textDecoration = 'line-through underline'}else{obj.style.textDecoration = 'underline'};}
else{obj.style.textDecoration = 'none';}
}
function Quotes(){
var total = Handletext('txtarea').slice();
if(total.length == 1){total[0].innerHTML = total[0].innerHTML + '"' + '"' ;return;}
if(total.length > 1){total[0].innerHTML = total[1] + '"' + total[2] + """ + total[3]}
}
function Handletext(x){
var obj = document.getElementById(x);
var selecttext = obj.innerHTML.substring(obj.selectionStart,obj.selectionEnd);
if(selecttext.length == 0){ var total = [obj];return total;}
var start = obj.innerHTML.indexOf(selecttext);
var end = start + selecttext.length;
var textlength = obj.innerHTML.length;
var starttext;
var endtext;
if(start > 0){starttext = obj.innerHTML.substring(0,start);}
else{starttext = '';}
if(textlength > end){endtext = obj.innerHTML.substring(end,obj.innerHTML.length);}
else{endtext = '';}
var total = [obj,starttext,selecttext,endtext];
return (total);
}
很多地方都可以优化得更好，这里由于是之前的代码，就不进行优化了，代码质量随着学习的深入会越来越精简。