JS实现520 表白简单代码


Posted in Javascript onMay 21, 2018

这两天不知道咋了,迷迷糊糊的,突然知道今天是520的我,急急忙忙赶出个程序(新手,代码有点乱),发出来大家一起研究下(参考百度的)。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>520</title>
  <style>
  html, body{padding:0px; margin:0px; background:#222; font-family: 'Karla', sans-serif; color:#FFF; height:100%; overflow:hidden;}
  canvas {width:100%; height:100%;}
  #text,#text_520{font-family:'楷体'; 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>
 </head>
 <body>
  <canvas id="c"></canvas>
  <div id="text"></div>
  <div id="text_520">5 2 0</div>
  <img src="./timg.jpg" class="img" />
  <div id="last">版权所有:李晓珂</div>
  <script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
   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('','_self'); 
     window.close();
    }
    var audio = document.createElement("audio");
     audio.setAttribute("src","./520-love.mp3");
     audio.setAttribute("autoplay","autoplay");
   }
   isIE();
  </script>
  <script type="text/javascript">
    var textArr = [
     'I love three things in this world,',
     'the sun ,the moon and you.',
     'The sun for the day,',
     'the moon for the night,',
     'and you forever!',
     '',
     'If you were a teardrop,',
     'in my eye,',
     'for fear of losing you,',
     'I would never cry.',
     'And if the golden sun,',
     'should cease to shine its light,',
     'just one smile from you,',
     'would make my whole world bright.'
    ];
    var text_520 = document.getElementById('text_520');
    var height = (window.innerHeight - text_520.offsetHeight) / 2;
    var width = (window.innerWidth - text_520.offsetWidth) / 2;
    text_520.style.top = height + 'px';
    text_520.style.left = width + 'px';
    $('#text_520').hide();
    $('.img').hide();
    var m = 0;
    var n = 0;
    var text = document.getElementById('text');
    function typing(){
     if(m <= textArr[n].length) {
      text.innerHTML = text.innerHTML.substring(0,text.innerHTML.length-1) + textArr[n].substr(m++,1) + '_';
      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);
       $('#text').fadeOut(5000);
       setTimeout(function(){$('#text_520').fadeIn(5000);},7000);
       setTimeout(function(){$('#text_520').fadeOut(5000); },7000);
       setTimeout(function(){$('.img').fadeIn(50000);},15000)
      }
     }
    }
    setTimeout(typing,5000);
   var ctx = document.querySelector('canvas').getContext('2d');
    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 = 'rgba(0, 0, 0, 0.2)';
    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('','_self').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 || '#FFF';
    ctx.fillStyle = color;
    ctx.fillRect(x-radius/2, y-radius/2, radius, radius);
   }
   function randomColor(){
    return ['#6ae5ab','#88e3b2','#36b89b','#7bd7ec','#66cbe1'][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>
 </body>
</html>

总结

以上所述是小编给大家介绍的JS实现520 简单表白代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
了解ESlint和其相关操作小结
May 21 #Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 #Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 #Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 #Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 #Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 #Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 #Javascript
You might like
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
房产公证书范本
2014/04/10 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
提拔干部考察材料
2014/05/26 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
材料员岗位职责范本
2015/04/11 职场文书