本文目录一览：
- 1、怎么用js实现静态留言板效果？
- 2、用javascript中的dom节点，编一个留言板？求代码？
- 3、我要提交留言，然后一提交，就能把新留言显示在当前页面，求这个效果的javascript代码
- 4、如何用javascript写一个留言
- 5、写个简单的留言板，用js实现
怎么用js实现静态留言板效果？
!DOCTYPE html
html
head
title/title
/head
body
input type="text" id="lyk"
input type="button" value="提交" id="but"
div id="content"/div
/body
/html
script type="text/javascript"
let lyk = document.getElementById('lyk')
let but = document.getElementById('but')
let content = document.getElementById('content')
but.onclick = ()={
content.innerHTML += lyk.value +'/BR'
}
/script
用javascript中的dom节点，编一个留言板？求代码？
html
body
ul id="ul"li我要留言/li/ul
input type="text" id="txt"/input type="button" value="add" onclick="add()"/
/body
/html
script
function add(){
var ul = document.getElementById("ul");
var li = ul.firstChild.cloneNode(true);
var txt = document.getElementById("txt");
li.innerHTML = txt.value;
ul.appendChild(li);
txt.value = "";
}
/script
如上代码所示，这是一个最简单的留言板。这是一个前台的示例，如果需要可用，还要加上后台的代码，使用JAVA或者C#或是php，将留言内容保存到数据库中，然后每次浏览的时候，再从数据库中提取出来，这样就是一个完善的留言板
我要提交留言，然后一提交，就能把新留言显示在当前页面，求这个效果的javascript代码
html
body
script type="text/javascript"
function validate(){
account = document.loginForm.account.value;
//document.loginForm.submit();
window.alert("确认提交");
var content=document.getElementById("contenttable");
var newRow=content.insertRow(content.rows.length);
newRow.insertCell(0).innerText="您的留言";
newRow.insertCell(1).innerText=account;
}
/script
form name="loginForm"
输入账号:input name="account" type="text"BR
input type="button" onclick="validate()" value="登录"
/form
table id="contenttable"/table
/body
/html
改成上面那样就可以了
但是你要把
document.loginForm.submit();
注释掉 不然的话 结果只是一闪而过
因为document.loginForm.submit();
相当于把屏幕又刷新了一遍 那样是没有意义的
我这样实现 是属于无刷新更新
如何用javascript写一个留言
!doctype html
html
head
meta charset="UTF-8"
title简单的留言板/title
style type="text/css"
* {
padding: 0;
margin: 0;
}
textarea {
width: 320px;
height: 80px;
background: whitesmoke;
font-size: 16px;
}
span:hover {
cursor: pointer;
}
/style
/head
body
h1简单留言板/h1
div id="box"
!--通过js实现根据用户的输入动态创建一个存放用户留言的li，并且允许用户删除留言--
/div
label
textarea id="msg" rows="5" cols="42"/textarea
/label
input type="button" id="btn" value="留言"
button id="calc" onclick="calc()"统计/button
/body
script type="text/javascript"
var box = document.getElementById("box"); var ul = document.createElement("ul"); box.appendChild(ul); var btn = document.getElementById("btn"); var msg = document.getElementById("msg"); var n = 0; btn.onclick = function(){ if(msg.value === ""){ alert("请输入内容") } else{ n++; var li = document.createElement("li"); li.innerHTML = msg.value + " "+"spanX/span"; var lis = document.getElementsByTagName("li"); if(n === 1){ ul.appendChild(li);// 如果是第一条留言则用appendChild }else{ ul.insertBefore(li,lis[0]);// 最新的留言总在第一条显示 } msg.value = "";// 重置文本框 var span = document.getElementsByTagName("span"); for(var i = 0;ispan.length;i++){ span[i].onclick = function(){ ul.removeChild(this.parentNode); n--; } } } }; function calc(){ alert("一共有"+n+"条留言") }
/script
/html
写个简单的留言板，用js实现
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
style type="text/css"
*{ margin:0; padding:0;}
#div1{ width:200px; height:300px; overflow:hidden; border:#009 1px solid;}
#div1 div{ list-style:none; border-bottom:1px dashed #666666;
margin:10px; overflow:hidden; filter:alpha(opacity:0); opacity:0;}
/style
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
script type="text/javascript" src="perfactMove.js"/script
script type="text/javascript"
window.onload=function()
{
var oBt=document.getElementById('bt1');
var oTxt=document.getElementById('txt1');
var oDiv=document.getElementById('div1');
oBt.onclick=function()
{ var aDiv=oDiv.getElementsByTagName('div');
//创建li节点
var aDivChildren=document.createElement('div');
//将创建好的li插入ul中
if(aDiv.length==0)
{
oDiv.appendChild(aDivChildren);
}
else
{
oDiv.insertBefore(aDivChildren,aDiv[0]);//插入在第一个元素之前
}
//给插入的li赋值
aDivChildren.innerHTML=oTxt.value;
oTxt.value='';
//保存新加入的li的宽度
var oHeight=aDivChildren.offsetHeight;
//将oli的宽度变为0，然后利用运动来实现，慢慢出现
aDivChildren.style.height=0;
startMove(aDivChildren,{height:oHeight},function()
{
startMove(aDivChildren,{opacity:100});
});
}
}
/script
/head
body
textarea id="txt1" rows="10" cols="50"/textarea
input id="bt1" type="button" value="提交留言" /
div id="div1"/div
/body
/html