<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表白</title>
<style type="text/css">
*{margin:0;padding: 0;}
body,html{height: 100%;width: 100%;background: #000;font-family: "宋体";overflow: hidden;}
#msg{position: absolute;left: 50px;top:45%;width: 500px;}
#msgshow{color: #fff;line-height: 25px;}
#heart{font-size: 1000px;color: #fff;position: absolute;left: 34.8%;top: 50px;line-height: 1000px;}
#_end{color: #fff;}
.item{overflow:hidden;position: absolute;border-radius: 50%;}
#timego{color:#fff;font-size:20px;opacity:0;position: absolute;left:750px;top:300px;width: 600px;}
</style>
<script>
οnlοad=function(){
var msg = document.getElementById("msg");
var msgshow = document.getElementById("msgshow");
var _end = document.getElementById("_end");
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s3 = document.getElementById("s3");
var s4 = document.getElementById("s4");
var timego = document.getElementById("timego");
var Mytext = "我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你"; //这里写打字效果的文字
var index = 0;
var t = setInterval(function(){
msgshow.innerHTML += Mytext[index];
index++;
if(index == Mytext.length){
clearInterval(t);
heartShape(150,950,150,"#f00");
}
},100);
var _state = 1;
setInterval(function(){
_state = _state * -1;
if(_state==1){
_end.style.display="none";
}else{
_end.style.display="inline";
}
},300);
function dateBetween(){
var DateStart = new Date("2016-8-9");//设置爱情开始的日期
function getTT(){
var DateNow = new Date().getTime();
var cha = DateNow - DateStart;
var _day = parseInt(cha/(1000*3600*24));
var _hour = parseInt((cha%(1000*3600*24))/(3600*1000));
var _min = parseInt(((cha%(1000*3600*24))%(3600*1000))/(1000*60));
var _sec = parseInt(((cha%(1000*3600*24))%(3600*1000))%(1000*60)/1000);
s1.innerText = formatnum(_day);
s2.innerText = formatnum(_hour);
s3.innerText = formatnum(_min);
s4.innerText = formatnum(_sec);
}
getTT();
setInterval(getTT,1000);
}
function createPoint(x,y,c){
var div = document.createElement("div");
div.className = "item";
var Rx = Math.round(Math.random()*20 - 10);
var Ry = Math.round(Math.random()*20 -10);
div.style.left = x + Rx + "px";
div.style.top = y + Ry + "px";
var Rh = Math.round(Math.random()*20+20);
div.style.width = Rh + "px";
div.style.height = Rh + "px";
div.style.backgroundColor = "#" + randomcolor();
var Ro = Math.random().toFixed(1);
div.style.opacity = Ro;
document.body.appendChild(div);
}
function heartShape(r,dx,dy,c){//r:大小;dx:水平偏移;dy:垂直偏移;c:颜色
var m,n,x,y,i;
var i = 0;
var t1 = setInterval(function(){
i += 0.04;
m = i;
n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2);
x = n * Math.cos(m) + dx;
y = n * Math.sin(m) + dy;
createPoint(x,y,c);
if(i>6.5){
clearInterval(t1);
dateBetween();
var op = 0;
var opTimer = setInterval(function(){
op+=1;
timego.style.opacity = op/10;
if(op==10){
clearInterval(opTimer);
return;
}
},100);
}
},50);
}
document.body.οnclick=function(e){
e = e || event;
var x = e.clientX;
var y = e.clientY;
var star = document.createElement("div");
star.innerText = "❤";
var RandomSize = parseInt(Math.random()*50+50);
star.style.height = star.style.width = RandomSize + "px";
star.style.color = "#" + randomcolor();
star.style.fontSize = RandomSize + "px";
star.style.position = "absolute";
star.style.left = x + "px";
star.style.top = y + "px";
document.body.appendChild(star);
var op = 100;
var deg = 0;
var RandomX = Math.round(Math.random()*13+2);
var t = setInterval(function(){
op--;
deg +=5;
star.style.top = (star.offsetTop-=RandomX) + "px";
star.style.left = 50*Math.sin(deg*Math.PI/180) + x + "px";
star.style.opacity = op/100;
if(star.style.opacity == 0){
clearInterval(t);
star.remove();
}
},20);
}
function formatnum(n) {
return n < 10 ? "0" + n : n;
}
function randomcolor() {
var r = Math.round(Math.random() * 255).toString(16);
var g = Math.round(Math.random() * 255).toString(16);
var b = Math.round(Math.random() * 255).toString(16);
return(r.length < 2 ? "0" + r : r) + (g.length < 2 ? "0" + g : g) + (b.length < 2 ? "0" + b : b)
}
}
</script>
</head>
<body>
<div id = "msg">
<a id = "msgshow"> </a>
<i id = "_end">_</i>
</div>
<div id="timego">
我们已经相爱:<span id="s1"></span> 天 <span id="s2"></span> 小时 <span id="s3"></span> 分钟 <span id="s4"></span> 秒
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>表白</title>
<style type="text/css">
*{margin:0;padding: 0;}
body,html{height: 100%;width: 100%;background: #000;font-family: "宋体";overflow: hidden;}
#msg{position: absolute;left: 50px;top:45%;width: 500px;}
#msgshow{color: #fff;line-height: 25px;}
#heart{font-size: 1000px;color: #fff;position: absolute;left: 34.8%;top: 50px;line-height: 1000px;}
#_end{color: #fff;}
.item{overflow:hidden;position: absolute;border-radius: 50%;}
#timego{color:#fff;font-size:20px;opacity:0;position: absolute;left:750px;top:300px;width: 600px;}
</style>
<script>
οnlοad=function(){
var msg = document.getElementById("msg");
var msgshow = document.getElementById("msgshow");
var _end = document.getElementById("_end");
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s3 = document.getElementById("s3");
var s4 = document.getElementById("s4");
var timego = document.getElementById("timego");
var Mytext = "我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你"; //这里写打字效果的文字
var index = 0;
var t = setInterval(function(){
msgshow.innerHTML += Mytext[index];
index++;
if(index == Mytext.length){
clearInterval(t);
heartShape(150,950,150,"#f00");
}
},100);
var _state = 1;
setInterval(function(){
_state = _state * -1;
if(_state==1){
_end.style.display="none";
}else{
_end.style.display="inline";
}
},300);
function dateBetween(){
var DateStart = new Date("2016-8-9");//设置爱情开始的日期
function getTT(){
var DateNow = new Date().getTime();
var cha = DateNow - DateStart;
var _day = parseInt(cha/(1000*3600*24));
var _hour = parseInt((cha%(1000*3600*24))/(3600*1000));
var _min = parseInt(((cha%(1000*3600*24))%(3600*1000))/(1000*60));
var _sec = parseInt(((cha%(1000*3600*24))%(3600*1000))%(1000*60)/1000);
s1.innerText = formatnum(_day);
s2.innerText = formatnum(_hour);
s3.innerText = formatnum(_min);
s4.innerText = formatnum(_sec);
}
getTT();
setInterval(getTT,1000);
}
function createPoint(x,y,c){
var div = document.createElement("div");
div.className = "item";
var Rx = Math.round(Math.random()*20 - 10);
var Ry = Math.round(Math.random()*20 -10);
div.style.left = x + Rx + "px";
div.style.top = y + Ry + "px";
var Rh = Math.round(Math.random()*20+20);
div.style.width = Rh + "px";
div.style.height = Rh + "px";
div.style.backgroundColor = "#" + randomcolor();
var Ro = Math.random().toFixed(1);
div.style.opacity = Ro;
document.body.appendChild(div);
}
function heartShape(r,dx,dy,c){//r:大小;dx:水平偏移;dy:垂直偏移;c:颜色
var m,n,x,y,i;
var i = 0;
var t1 = setInterval(function(){
i += 0.04;
m = i;
n = -r * (((Math.sin(i) * Math.sqrt(Math.abs(Math.cos(i)))) / (Math.sin(i) + 1.4)) - 2 * Math.sin(i) + 2);
x = n * Math.cos(m) + dx;
y = n * Math.sin(m) + dy;
createPoint(x,y,c);
if(i>6.5){
clearInterval(t1);
dateBetween();
var op = 0;
var opTimer = setInterval(function(){
op+=1;
timego.style.opacity = op/10;
if(op==10){
clearInterval(opTimer);
return;
}
},100);
}
},50);
}
document.body.οnclick=function(e){
e = e || event;
var x = e.clientX;
var y = e.clientY;
var star = document.createElement("div");
star.innerText = "❤";
var RandomSize = parseInt(Math.random()*50+50);
star.style.height = star.style.width = RandomSize + "px";
star.style.color = "#" + randomcolor();
star.style.fontSize = RandomSize + "px";
star.style.position = "absolute";
star.style.left = x + "px";
star.style.top = y + "px";
document.body.appendChild(star);
var op = 100;
var deg = 0;
var RandomX = Math.round(Math.random()*13+2);
var t = setInterval(function(){
op--;
deg +=5;
star.style.top = (star.offsetTop-=RandomX) + "px";
star.style.left = 50*Math.sin(deg*Math.PI/180) + x + "px";
star.style.opacity = op/100;
if(star.style.opacity == 0){
clearInterval(t);
star.remove();
}
},20);
}
function formatnum(n) {
return n < 10 ? "0" + n : n;
}
function randomcolor() {
var r = Math.round(Math.random() * 255).toString(16);
var g = Math.round(Math.random() * 255).toString(16);
var b = Math.round(Math.random() * 255).toString(16);
return(r.length < 2 ? "0" + r : r) + (g.length < 2 ? "0" + g : g) + (b.length < 2 ? "0" + b : b)
}
}
</script>
</head>
<body>
<div id = "msg">
<a id = "msgshow"> </a>
<i id = "_end">_</i>
</div>
<div id="timego">
我们已经相爱:<span id="s1"></span> 天 <span id="s2"></span> 小时 <span id="s3"></span> 分钟 <span id="s4"></span> 秒
</div>
</body>
</html>