显示/隐藏发言栏效果
此文章为本人原创，转载请注明出处
在左边框输入文本后按添加后文本会添加到右边框中，同时左边框同时被清空，也可以隐藏右边框。。。。
代码组成：HTML-->textarea,button两个标签
CSS-->id选择器，width, height,border,position,display.
JS-->document.getElementById,event，布尔值等。。。话不多说代码如下：
/***********************CSS部分代码****************************************************************************/@charset "utf-8";
/* CSS Document */
body {margin: 0; padding: 0;}
#tet2 {
width: 300px;
height: 300px;
border: 1px solid blue;
display: none;
position: absolute;
left: 389px;
top: 0;
}
#tet {
width: 300px;
height: 300px;
}
#btn2 {
position: absolute;
left: 320px;
top: 100px;
}
// JavaScript Document
var oBtn = document.getElementById('btn'); //显示/隐藏
var oBtn2 = document.getElementById('btn2'); //添加
var oTet = document.getElementById('tet');
var oTet2 = document.getElementById('tet2');
var b = 1; //初始值为1
oBtn2.onclick = function () //点击btn2时会把textarea1的文本添加到textarea2中，同时清空textarea1的文本
{
oTet2.value += oTet.value;
oTet.value = '';
};
oBtn.onclick = function (ev) //系统传进来的事件对象
{
var eve = ev || event; //兼容FF浏览器
switch(true) //true是真，则不继地执行
{
case b % 2 != 0: //如果取余不为0，则显示
tet2.style.display = 'block'; //显示
eve.cancelBubble = true; //阻止冒泡
b++; //取余不为0,b++
break;
case b % 2 == 0: //如果取余为0，则隐藏
tet2.style.display = 'none'; //隐藏
eve.cancelBubble = true; //阻止冒泡
b--; //取余为0，b--
break;
};
};
/********************************HTML*************************************************************/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏显示发言栏</title>
<link rel="stylesheet" href="显示隐藏发言栏.css" />
</head>
<body>
<textarea id = "tet"></textarea>
<button id = "btn2">添加</button>
<button id = "btn">显示/隐藏</button>
<textarea id = "tet2"></textarea>
<script src="显示隐藏发言栏.js"></script>
</body>
</html>