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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
Javascript实现信息滚动效果
May 18 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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框架Phpbean说明
2008/01/10 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
php文件缓存方法总结
2016/03/16 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
node.js基础知识小结
2018/02/26 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
python用700行代码实现http客户端
2021/01/14 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
extern在函数声明中是什么意思
2014/01/19 面试题
自动化毕业生专业自荐书范文
2014/02/04 职场文书
抽样调查项目计划书
2014/04/24 职场文书
高中学生自我评价范文
2014/09/23 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
学前教育见习总结
2015/06/23 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
Python实现视频中添加音频工具详解
2021/12/06 Python