网页表白神器，画爱心，相爱天数，打字效果

最新推荐文章于 2024-05-15 23:32:12 发布

_小白白

最新推荐文章于 2024-05-15 23:32:12 发布

阅读量3.1k

点赞数 7

分类专栏： js特效文章标签：特效网页表白 js特效打字效果心形曲线

本文链接：https://blog.csdn.net/qq_31043525/article/details/52604332

版权

js特效专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>