留言板

*{

margin: 0;

padding: 0;

}

#warp{

background: url(img/14.jpg) no-repeat center fixed;

margin: 0 auto;

width: 500px;

/*height: 350px;*/

padding: 30px;

position: relative;

}

#text,#word{

display: flex;

}

#text p,#word p{

width: 50px;

height: 40px;

font-size: 20px;

line-height: 40px;

}

#text input{

width: 450px;

height: 40px;

font-size: 20px;

outline-style:none;

opacity: 0.5;

}

#word{

margin-top: 20px;

}

#word textarea{

width: 450px;

height: 200px;

font-size: 20px;

outline-style:none;

opacity: 0.5;

color: black;

}

#btn{

margin: 20px 0px 20px 50px;

width: 70px;

height: 30px;

border-radius: 50%;

font-size: 15px;

box-shadow: 5px 5px 2px 2px cadetblue;

/*border: 1px solid black;*/

background: lightblue;

text-align: center;

}

#btn2{

width: 50px;

height: 50px;

border-radius: 50%;

font-size: 15px;

background: black;

color: white;

border: 1px solid black;

}

#deleteall{

width: 100px;

height: 50px;

border-radius: 50%;

background: burlywood;

border: 1px solid royalblue;

/*opacity: 0.7;*/

font-size: 15px;

color: cadetblue;

box-shadow: 5px 5px 5px 5px cadetblue;

}

.active{

/*width: 400px;*/

/*height: 400px;*/

background: linear-gradient(to right bottom,

blue 10%,green 30%,red 50%,yellow 60%,pink 80%,purple 90%);

border-radius: 10px;

color: white;

}

.active2{

border-radius: 100px;

background: linear-gradient(to bottom,

red 10%,wheat 30%,green 50%,yellow 60%,orange 80%,pink 90%);

}

/*设置的删除按键*/

.active3{

background: white;

color: darkred;

width: 90px;

height: 30px;

border-radius: 50%;

border: 1px solid darkgreen;

/*float:right;*/

margin-top: 60px;

position:absolute;

right:0;

font-size: 15px;

}

/*#content{

width: 500px;

background: url(img/7.jpg) no-repeat center scroll;

}*/

var warp=document.getElementById('warp')

var qq=document.getElementById('inp');

var wo=document.getElementById('wo');

var btn=document.getElementById('btn');

var btn2=document.getElementById('btn2');

// var ul=document.getElementById('ul1');

var content=document.getElementById('content');

var deleteall=document.getElementById('deleteall');

var index=0;

var ind=0;

var arr=[];

var x=0;

btn2.style.float="right";

//点击开始变身模式

btn2.οnclick=function () {

wo.className='active';

qq.className='active2';

// btn.className='active3';

}

//提交的点击操作

btn.οnclick=function () {

if (qq.value==""wo.value=="") {

alert('笨');

return;

}

//获取删除按钮的下标

for(i=0;i<=ind;i++){

if (ind<=index) {

arr[i]=ind;

var x=0;

x=arr[i];

ind++;

}

}

//获取系统时间

var now = new Date ();

// alert(now);

var year=now.getFullYear();//只获取年份

var month=now.getMonth();//获取月份 月份是0-11来代表1-12月

var today=now.getDate();//获取当天,例如30号

var day=now.getDay();//获取星期几 1代表星期一

var hour=now.getHours();//获取小时

var minute=now.getMinutes();//获取分钟

var secounds=now.getSeconds();//获取秒

// alert(hour+':'+minute+':'+secounds);

var nowTime=now.getTime();//时间戳 以毫秒为单位,1970.1.1距离现在的毫秒数字

index++;

var top1=document.createElement('div');

var bottom1=document.createElement('div');

var deleteBtn=document.createElement('button');

bottom1.appendChild(deleteBtn);

wo.style.color="palevioletred";

qq.style.color="cornflowerblue"

deleteBtn.innerHTML='第'+index+"个删除"

deleteBtn.className="active3";

deleteBtn.style.zIndex='10000';

top1.style.padding='10px';

top1.style.backgroundColor='antiquewhite';

top1.style.opacity="0.8";

top1.style.transition="all"+' '+"2s";

top1.className="animated fadeInDownBig" ;

bottom1.style.padding='10px';

bottom1.style.backgroundColor='wheat';

bottom1.style.opacity="0.8";

bottom1.style.transition="all"+' '+"2s";

bottom1.className="animated fadeInUpBig" ;

top1.style.marginTop='5px';

if (index>1) {

content.insertBefore(top1,content.children[0]);

content.insertBefore(bottom1,content.children[1]);

content.insertBefore(deleteBtn,content.children[0]);

top1.innerHTML='留言对象:'+qq.value;

bottom1.innerHTML='第'+index+'条留言:'+wo.value+'
'

+year+'年'+month+'月'+today+'日'+hour+'点'+minute+'分'+secounds+'秒'

+'留下来过的脚印'+'

---

';

}else{

content.insertBefore(deleteBtn,content.children[0]);

top1.innerHTML='留言对象:'+qq.value;

bottom1.innerHTML='第'+index+'条留言:'+wo.value+'
'

+year+'年'+month+'月'+today+'日'+hour+'点'+minute+'分'+secounds+'秒'

+'留下来过的痕迹'+'

---

';

content.appendChild(top1);

content.appendChild(bottom1);

}

wo.value="";

qq.value=""

//全部删除的点击事件

deleteall.οnclick=function () {

content.remove(content);

}

//删除按钮的点击事件

deleteBtn.οnclick=function () {

this.remove();

bottom1.className="animated rotateInDownLeft" ;

top1.className="animated rotateInDownRight" ;

top1.style.opacity="0";

bottom1.style.opacity="0";

// alert('恭喜你成功删除第'+(x+1)+'个留言');

setInterval(function(){

top1.remove();

bottom1.remove();

},1000);

}

}