留言板
*{
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;
}*/
QQ:
留言:
显示留言
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);
}
}
