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和jquery判断浏览器版本等信息
Jul 04 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 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中使用Oracle数据库(6)
2006/10/09 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
深入浅析python继承问题
2016/05/29 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
网络管理专业求职信
2014/03/15 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
关于召开会议的通知
2015/04/15 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
python库sklearn常用操作
2021/08/23 Python