这两天不知道咋了，迷迷糊糊的，突然知道今天是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. response输出随机图片、定时刷新网页

    第一招:利用response向浏览器输出图片: //获取验证码 在<img />标签内的src属性设为请求路径/verifyCode?goodsId=xxx&token=xxxxx ...

  2. Navicat for MySQL连接出错：1251

    平台:window10 x64+mysql-8.0.15-winx64+navicat_trial_11.1.20.0(PatchNavicat破解) 错误提示:1251-Client does no ...

  3. Our Future

    The world is betting on how to win the football game: But I'm betting on how to win your heart: Mayb ...

  4. 2018.12.21 bzoj3238: [Ahoi2013]差异（后缀自动机）

    传送门 后缀自动机好题. 题意: 做法:samsamsam 废话 考虑翻转字串,这样后缀的最长公共前缀等于前缀的最长公共后缀. 然后想到parentparentparent树上面两个串的最长公共后缀跟 ...

  5. 2018.10.23 hdu2476String painter（区间dp）

    传送门 一道挺妙的区间dp. 我们先用区间dp求出第一个串为空串时的最小代价. 然后再加入原本的字符更新答案就行了. 代码: #include<bits/stdc++.h> using n ...

  6. i2c_client 几种实例化方法

    http://blog.csdn.net/lugandong/article/details/48092397

  7. Keras分类问题

    #-*- coding: utf-8 -*- #使用神经网络算法预测销量高低 import pandas as pd #参数初始化 inputfile = 'data/sales_data.xls' ...

  8. PHP发起POST DELETE GET POST 请求

    原文链接:http://blog.csdn.net/lengxue789/article/details/8254667 关于POST,DELETE,GET,POST请求 get:是用来取得数据.其要 ...

  9. python_day1_python第一个程序 hello world

    Python 第一个程序 1)安装好python后,cmd进入DOS下,直接输入python Python 3.6.0 (v3.6.0:41df79263a11, Dec 23 2016, 08:06 ...

  10. 1114 Family Property

    This time, you are supposed to help us collect the data for family-owned property. Given each person ...