*{
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);
}
}