js实现的留言本效果代码实例（js留言板代码）

本文目录一览：

• 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