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 相关文章推荐
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
js性能优化技巧
Nov 29 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
微信小程序实现可长按移动控件
Nov 01 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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下读取文本文件的代码
2008/07/02 PHP
PHP中的Memcache详解
2014/04/05 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
Javascript alert消息换行的方法
2013/08/07 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
jquery中each循环的简单回滚操作
2017/05/05 jQuery
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python实现的双色球生成功能示例
2017/12/18 Python
python决策树之CART分类回归树详解
2017/12/20 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
python 实用工具状态机transitions
2020/11/21 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
css3隔行变换色实现示例
2014/02/19 HTML / CSS
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang