这两天不知道咋了，迷迷糊糊的，突然知道今天是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. 利用HBuilder开发基于MUI的H5+ app中使用百度地图定位功能

    定位功能有两种方法: 首先要初始化内置地图: var map = new plus.maps.Map("map"); 这里黄色的map是html里面的id: <div id= ...

  2. PHP字符串大小写转换函数

    string strtolower(string $str) 将字符串转换为小写 string strtoupper(string $str) 将字符串转换为大写 $str1 = 'html'; $s ...

  3. h5常用标签语义

    <article>定义页面独立的内容区域.例如外部来的文章. <aside>定义页面的侧边栏内容.<aside> 标签定义 <article> 标签外的 ...

  4. 2019.02.09 bzoj2560: 串珠子（状压dp+简单容斥）

    传送门 题意简述:nnn个点的带边权无向图,定义一个图的权值是所有边的积,问所有nnn个点都连通的子图的权值之和. 思路: fif_ifi​表示保证集合iii中所有点都连通其余点随意的方案数. gig ...

  5. lambda表达式，变量作用域

    # lambda表达式 def filter_lt(predidcate,lt): result=[] for elem in lt: if predidcate(elem): result.appe ...

  6. 查阅Springboot官方文档方式----------------Springboot2.0.2最新稳定版

    1.登录官方网址: https://spring.io/ 如图所示: 2.选择PROJECTS,就可以看到spring所有的相关项目了. 点开后:其中就包括了Spingboot 3.版本选择,红圈部分 ...

  7. SpringBoot中用Fastjson替换默认的Jackson

    一:前言 经过测试,Jackson有很多不合人意的地方,因此建议用Fastjson来替换: 二:Jackson的坑 先定义实体类: @Data @AllArgsConstructor @NoArgsC ...

  8. 如何使用vs进行代码比较

    当我们在进行团队合作开始项目时,有时候不仅自己要写代码还需要修改bug,当我们修改代码以后,为了保持代码库中代码的整洁美观和一直性,有些误操作,比如多一个或多个空格,多一行,少一行,格式对齐等,这样的 ...

  9. pyppeteer使用笔记

    pyppeteer -- python版本的puppeteer,一个强大的chronium headless浏览器API 最近搞天猫用了一波儿,记录一下. 先上文档: https://miyakogi ...

  10. eclipse选中某个字段没法高亮其他相同字段

    eclipse选中某个字段无法高亮其他相同字段解决办法: window >> preference >> java >> Editor >> Mark ...