JS實作520表白代碼案例分析-js教程-PHP中文網

首頁

web前端

js教程

JS實作520表白代碼案例分析

php中世界最好的语言

May 23, 2018 am 09:40 AM

javascript程式碼案例分析

這次帶給大家JS實作520表白程式碼案例分析，JS實作520表白程式碼的注意事項有哪些，下面就是實戰案例，一起來看一下。

這兩天不知道咋了，迷迷糊糊的，突然知道今天是520的我，急急忙忙趕出個程式（新手，程式碼有點亂），發出來大家一起研究下（參考百度的）。

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="JS實作520表白代碼案例分析" >
  <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>

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JavaScript callback回呼函數使用案例詳解

react-navigation使用步驟詳解

以上是JS實作520表白代碼案例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn