这两天不知道咋了，迷迷糊糊的，突然知道今天是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>

520 简单表白代码(JS)的更多相关文章

  1. JS Map 和 List 的简单实现代码

    javascript中是没有map和list 结构的. 本篇文章是对在JS中Map和List的简单实现代码进行了详细的分析介绍,需要的朋友参考下 代码如下: /* * MAP对象,实现MAP功能 *  ...

  2. LayaAir引擎开发HTML5最简单教程(面向JS开发者)

    LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...

  3. 用简单的 Node.js 后台程序浅析 HTTP 请求与响应

    用简单的 Node.js 后台程序浅析 HTTP 请求与响应 本文写于 2020 年 1 月 18 日 我们来看两种方式发送 HTTP 请求,一种呢,是命令行的 curl 命令:一种呢是直接在浏览器的 ...

  4. Lucene.net站内搜索—3、最简单搜索引擎代码

    目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...

  5. python网页请求urllib2模块简单封装代码

    这篇文章主要分享一个python网页请求模块urllib2模块的简单封装代码. 原文转自:http://www.jbxue.com/article/16585.html 对python网页请求模块ur ...

  6. tensorflow rnn 最简单实现代码

    tensorflow rnn 最简单实现代码 #!/usr/bin/env python # -*- coding: utf-8 -*- import tensorflow as tf from te ...

  7. 简单 php 代码跟踪调试实现

    简单 php 代码跟踪调试实现 debug_backtrace:生成回溯 debug_print_backtrace:打印回溯 1. debug_backtrace ($options = DEBUG ...

  8. opencart3属性attribute实现换行等简单html代码

    opencart3属性attribute在前台页面默认是没有解析html代码功能的,比如想实现换行,后台这样写:line 1<br>line 2,但前台产品页也是line 1<br& ...

  9. 依然是关于我空间那篇申请的日志《JavaScript axError：Unexpected token ILLEGAL 很简单的代码……》

    接下来要讲的日志现在的标题已经更改为<很简单的代码,但是无法--> 这篇日志地址:http://www.cnblogs.com/herbertchina/p/4475092.html 经过 ...

随机推荐

  1. python里的字典和集合

    一.字典 1.字典的定义 字典是不可变的,是用hash值来存储的.字典的key必须是不可变的(可哈希) dict = {key1:value1 , key2:value2} 2.字典的增删改查 增 直 ...

  2. centos 7 禁止root登录及更改ssh端口号

    vim /etc/ssh/sshd_config PermitRootLogin yes => PermitRootLogin no systemctl restart sshd.service ...

  3. matlab 设定坐标比例

    figure() u=-0.1:0.005:0.1; v=-0.1:0.005:0.1; [x,y]=meshgrid(u,v); z=sin(x-y)./abs(x)+abs(y); surf(x, ...

  4. mysql学习之路_sql

    查看数据库: Show databases; 查看指定部分数据库:模糊查询 Show databases like ‘patten’;--paatten是匹配模式 %:表示是匹配模式 _:表示匹配单个 ...

  5. C# 编码标准(一)

    一直想写一个自己用的代码标准,经过一段时间的优秀开源源码的观察和看其他人写的标准,感觉好的代码给人感觉就是舒服,也非常重要.所以把它们记录归纳总结,以备以后忘记,另外平时写代码的时候可以拿来参考下.下 ...

  6. Hadoop Hbase理论及实操

    Hbase特点 HBase是一个构建在HDFS上的分布式列存储系统:HBase是基于Google BigTable模型开发的,典型的key/value系统:HBase是Apache Hadoop生态系 ...

  7. .net 根据网址生成静态页

    生成HTML页面代码 public int Htmls(int id) { ; string strHtmlContent = ""; HttpWebRequest request ...

  8. 解决编译错误：cc: Internal error: Killed (program cc1)

    错误现象: cc: Internal error: Killed (program cc1) ... 大体上是因为内存不足,临时使用交换分区来解决吧 sudo mkswap /swapfile sud ...

  9. Word图片上传控件-eWebEditor9x整合教程-Xproer.WordPaster

    示例下载(JSP):eWebEditor9x, 示例下载(.NET):eWebEditor9x,   1.1. 集成到eWebEditor9x 主要步骤如下: 1.增加WordPaster文件夹   ...

  10. Scala界面事件处理编程实战详解.

    今天学习了一个Scala界面事件处理编程,让我们从代码出发. import scala.swing._import scala.swing.event._ object GUI_Panel exten ...