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