Case analysis of JS implementation of 520 confession code

This time I will bring you a case analysis of JS implementation of 520 confession code. What are the precautions for JS implementation of 520 confession code. The following is a practical case, let’s take a look.

I don’t know what happened these two days. I was confused and suddenly realized that today was 520. I hurriedly ran out a program (newbie, the code is a bit messy) and sent it out for everyone to study together (reference Baidu’s).

nbsp;html>

 
  <meta>
  <title>520</title>
  <style>
  html, body{padding:0px; margin:0px; background:#222; font-family: &#39;Karla&#39;, sans-serif; color:#FFF; height:100%; overflow:hidden;}
  canvas {width:100%; height:100%;}
  #text,#text_520{font-family:&#39;楷体&#39;; color:rgb(255,255,3); font-size:20px; position:fixed; left:10%; top:10%;}
  #text_520{font-size:100px; top:50%; left:50%;}
  img{position:fixed; top:0; left:0; width:100%;}
  #last{font-size:12px; bottom:10px; left:50%; position:fixed;}
  /*
  @keyframes drop {
   0% { 
    transform: translateY(-100px);
    opacity: 0;
   }
   90% {
    opacity: 1;
    transform:translateY(10px);
   }
   100% {
    transform:translateY(0px;)
   }
  }
  */
  </style>
 
 
  <canvas></canvas>
  <p></p>
  <p>5 2 0</p>
  <img  class="img lazy" src="/static/imghwm/default1.png" data-src="./timg.jpg" alt="Case analysis of JS implementation of 520 confession code" >
  <p>版权所有：李晓珂</p>
  <script></script>
  <script>
   function isIE(){
    var u = navigator.userAgent;
    if((u.indexOf("compatible") > -1 && u.indexOf("MSIE") > -1) || (u.indexOf("Trident") > -1 && u.indexOf("rv:11.0") > -1)){
     alert("该浏览器暂不支持，请更换浏览器");
     window.open(&#39;&#39;,&#39;_self&#39;); 
     window.close();
    }
    var audio = document.createElement("audio");
     audio.setAttribute("src","./520-love.mp3");
     audio.setAttribute("autoplay","autoplay");
   }
   isIE();
  </script>
  <script>
    var textArr = [
     &#39;I love three things in this world,&#39;,
     &#39;the sun ,the moon and you.&#39;,
     &#39;The sun for the day,&#39;,
     &#39;the moon for the night,&#39;,
     &#39;and you forever!&#39;,
     &#39;&#39;,
     &#39;If you were a teardrop,&#39;,
     &#39;in my eye,&#39;,
     &#39;for fear of losing you,&#39;,
     &#39;I would never cry.&#39;,
     &#39;And if the golden sun,&#39;,
     &#39;should cease to shine its light,&#39;,
     &#39;just one smile from you,&#39;,
     &#39;would make my whole world bright.&#39;
    ];
    var text_520 = document.getElementById(&#39;text_520&#39;);
    var height = (window.innerHeight - text_520.offsetHeight) / 2;
    var width = (window.innerWidth - text_520.offsetWidth) / 2;
    text_520.style.top = height + &#39;px&#39;;
    text_520.style.left = width + &#39;px&#39;;
    $(&#39;#text_520&#39;).hide();
    $(&#39;.img&#39;).hide();
    var m = 0;
    var n = 0;
    var text = document.getElementById(&#39;text&#39;);
    function typing(){
     if(m <= textArr[n].length) {
      text.innerHTML = text.innerHTML.substring(0,text.innerHTML.length-1) + textArr[n].substr(m++,1) + &#39;_&#39;;
      setTimeout(typing,250);
     }else {
      if(n < textArr.length-1){
       text.innerHTML = text.innerHTML.substring(0,text.innerHTML.length-1) + "<br />_";
       n++;
       m = 0;
       typing();
      }else {
       text.innerHTML = text.innerHTML.substring(0,text.innerHTML.length-1);
       $(&#39;#text&#39;).fadeOut(5000);
       setTimeout(function(){$(&#39;#text_520&#39;).fadeIn(5000);},7000);
       setTimeout(function(){$(&#39;#text_520&#39;).fadeOut(5000); },7000);
       setTimeout(function(){$(&#39;.img&#39;).fadeIn(50000);},15000)
      }
     }
    }
    setTimeout(typing,5000);
   var ctx = document.querySelector(&#39;canvas&#39;).getContext(&#39;2d&#39;);
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
   var sparks = [];
   var fireworks = [];
   var walker;
   fireworks.pop();
   var i = 10;
   while(i--) fireworks.push(new Firework(Math.random()*window.innerWidth, window.innerHeight*Math.random()));
   // setInterval(render, 1000/50);
   render();
   function render() {
    setTimeout(render, 1000/50);
    ctx.fillStyle = &#39;rgba(0, 0, 0, 0.2)&#39;;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    // 上升效果
    for(var firework of fireworks) {
     if(firework.dead) continue;
     firework.move();
     firework.draw();
    }
    // 绽放效果
    for(var spark of sparks) {
     if(spark.dead) continue;
     spark.move();
     spark.draw();
    }
    if(Math.random() < 0.1) fireworks.push(new Firework());
    //ctx.height = ctx.height;
   }
   function Spark(x, y, color) {
    this.x = x;
    this.y = y;
    this.dir = Math.random() * (Math.PI*2);
    this.dead = false;
    this.color = color;
    this.speed = Math.random() * 3 + 3;
    walker = new Walker({ radius: 20, speed: 0.25 });
    this.gravity = 0.25;
    this.dur = this.speed / 0.15;
    this.move = function() {
     this.dur--;
     if(this.dur < 0) this.dead = true;
     if(this.speed < 0) return;
     if(this.speed > 0) this.speed -= 0.15;
     walk = walker.step();
     this.x += Math.cos(this.dir + walk) * this.speed;
     this.y += Math.sin(this.dir + walk) * this.speed;
     this.y += this.gravity;
     this.gravity += 0.05;
    }
    this.draw = function() {
     drawCircle(this.x, this.y, 2, this.color);
    }
   }
   function Firework(x, y) {
    this.xmove = Math.random()*2 - 1;
    this.x = x || Math.random() * ctx.canvas.width;
    this.y = y || ctx.canvas.height;
    this.height = Math.random()*ctx.canvas.height/2;
    this.dead = false;
    this.color = randomColor();
    this.move = function() {
     this.x += this.xmove;
     if(this.y > this.height) this.y -= 4; 
     else this.burst();
    }
    this.draw = function() {
     drawCircle(this.x, this.y, 3, this.color)
    }
    this.burst = function() {
     this.dead = true
     i = 100; while(i--) sparks.push(new Spark(this.x, this.y, this.color));
     sparks.pop();
    }
   }
   setTimeout(function (){window.open(&#39;&#39;,&#39;_self&#39;).close();},175000);
/*
   // 清除两个数组
   function clear(){
    if(sparks!=null || fireworks!=null){
     sparks.pop();
     fireworks.pop();
    }
    var sparks = [];
    var fireworks = [];
   }
   setInterval(clear,100);
    */
   function drawCircle(x, y, radius, color) {
    color = color || &#39;#FFF&#39;;
    ctx.fillStyle = color;
    ctx.fillRect(x-radius/2, y-radius/2, radius, radius);
   }
   function randomColor(){
    return [&#39;#6ae5ab&#39;,&#39;#88e3b2&#39;,&#39;#36b89b&#39;,&#39;#7bd7ec&#39;,&#39;#66cbe1&#39;][Math.floor(Math.random() * 5)];
   }
   function Walker(options){
    this.step = function(){
     this.direction = Math.sign(this.target) * this.speed
     this.value += this.direction
     this.target
      ? this.target -= this.direction
      : (this.value)
      ? (this.wander) 
       ? this.target = this.newTarget() 
       : this.target = -this.value
      : this.target = this.newTarget() 
     return this.direction
    }
    this.newTarget = function() {
     return Math.round(Math.random()*(this.radius*2)-this.radius)
    }
    this.start = 0
    this.value = 0
    this.radius = options.radius
    this.target = this.newTarget()
    this.direction = Math.sign(this.target)
    this.wander = options.wander
    this.speed = options.speed || 1
   }
  </script>
 

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of JavaScript callback function usage cases

Detailed explanation of the steps to use react-navigation

The above is the detailed content of Case analysis of JS implementation of 520 confession code. For more information, please follow other related articles on the PHP Chinese website!