快捷導(dǎo)航

JavaScript實(shí)現(xiàn)簡(jiǎn)單評(píng)論功能

更新時(shí)間：2017年08月17日 08:37:37 作者：wwj18368915379

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單評(píng)論功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)單評(píng)論功能的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
/*background-image: url(../img/91R58PIC3n2_1024.jpg);*/
}
#div1{
margin: auto;
border: 1px beige solid;
width: 512px;
text-align: right;
}
ul{
list-style-type: none;
list-style-image: url(../img/touxiang.png);

}
.box{
width: 400px;
height: 150px;
/*background-color: yellow;*/
border: 1px darkgray solid;
border-radius: 30px;
position: relative;
}
.box .touxiang{
width: 80px;
height: 80px;
background-image: url(../img/touxiang.png);
background-size: 100% 100%;
position: absolute;
left: 10px;
top: 10px;
}
.box .nicheng{
width: 80px;
height:25px ;
/*background-color: red;*/
position: absolute;
left: 10px;
top: 100px;
font-size: 12px;
text-align: center;
line-height: 25px;
}
.box .pinglun{
width: 290px;
height: 80px;
/*background-color: cyan;*/
position: absolute;
top: 10px; 
right: 10px; 
}
.box .shijian{
width: 200px;
height: 25px;
/*background-color: green;*/
position: absolute;
top: 100px;
left:100px;
}


</style>

<script>
window.onload=function(){
var oTxt = document.getElementById("txt");
var oBtn = document.getElementById("btn1");
var oUl1 = document.getElementById("ul1");


oBtn.onclick=function(){
var oBox = document.createElement("div");
oBox.className = "box";

//創(chuàng)建頭像
var oDiv = document.createElement("div");
oDiv.className = "touxiang";
oBox.appendChild(oDiv);

var oDiv = document.createElement("div");
oDiv.className = "nicheng";
oDiv.innerHTML = "指尖微涼*";
oBox.appendChild(oDiv);

var oDiv = document.createElement("div");
oDiv.className = "pinglun";
oDiv.innerHTML = oTxt.value;
oBox.appendChild(oDiv);

var oDiv = document.createElement("div");
oDiv.className = "shijian";
var oDate = new Date();
//oDate.getFullYear

oDiv.innerHTML ="評(píng)論時(shí)間&nbsp;&nbsp;"+ oDate.getFullYear()+"年"+(oDate.getMonth()+1)+"月"+oDate.getDate()+"日"+"<a href='javascript:;'>刪除</a>";




oBox.appendChild(oDiv);

oUl1.appendChild(oBox);

/*oBox.insertBefore(oUl1,oDiv[0]);*/

var aA = oDiv.getElementsByTagName("a");

for(var i = 0;i<aA.length;i++)
{
aA[i].onclick=function(){
oDiv.removeChild(this.parentNode);
}
}

}
}

</script>



</script>
</head>
<body>
<h2 align="center">網(wǎng)易云熱評(píng)</h2>
<div id="div1" >
<textarea cols="70" rows="8" id="txt"></textarea><br />
<input type="button" value="評(píng)論" id="btn1" />

<ul id="ul1">

</ul>
</div> 
</body>
</html>

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript跨平臺(tái)的開(kāi)源框架NativeScript
本文給大家分享的是一款使用javascript來(lái)構(gòu)建跨平臺(tái)原生移動(dòng)應(yīng)用的開(kāi)源框架--NativeScript，可以使用JavaScript開(kāi)發(fā)跨平臺(tái)、真正原生的iOS, Android 和 Windows 移動(dòng)App。開(kāi)發(fā)人員使用NativeScript提供的庫(kù)來(lái)構(gòu)建應(yīng)用UI，其抽象了各種原生平臺(tái)之間的不同。
2015-03-03
下載站控制介紹字?jǐn)?shù)顯示的腳本顯示全部隱藏介紹等功能
有一些下載網(wǎng)站為了整體的統(tǒng)一，盡量的控制軟件介紹的字?jǐn)?shù)顯示，要不因?yàn)樽謹(jǐn)?shù)介紹太多導(dǎo)致用戶(hù)看到下載鏈接比較靠后等原因而一個(gè)小功能的實(shí)現(xiàn)。
2009-09-09
javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的代碼
下面小編就為大家?guī)?lái)一篇javascript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器的代碼小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
原生js實(shí)現(xiàn)的金山打字小游戲（實(shí)例代碼詳解）
這篇文章主要介紹了原生js實(shí)現(xiàn)的金山打字小游戲，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03
js實(shí)現(xiàn)圖片旋轉(zhuǎn) js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片旋轉(zhuǎn),滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小等效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
JavaScript es6中var、let以及const三者區(qū)別案例詳解
這篇文章主要介紹了JavaScript es6中var、let以及const三者區(qū)別案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-08-08
Ajax::prototype 源碼解讀
Ajax::prototype 源碼解讀...
2007-01-01
微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
IE6圖片加載的一個(gè)BUG解決方法
小圖整合在一張大圖里，然后在不同的CSS里調(diào)用同一張圖片，以此來(lái)減少請(qǐng)求數(shù)，這是頁(yè)面優(yōu)化最常用的手段，但I(xiàn)E6會(huì)對(duì)頁(yè)面里同一個(gè)圖片，只要在不同的地方有引用到就會(huì)重新請(qǐng)求一次，需要加JS代碼解決。
2010-07-07
div移動(dòng) 輸入框不能輸入的問(wèn)題
使用了移動(dòng)層，可里面的輸入框卻不能使用了，下面是解決方法需要的朋友可以參考下。
2009-11-11