520 简单表白代码(JS)

这两天不知道咋了，迷迷糊糊的，突然知道今天是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)的更多相关文章

JS Map 和 List 的简单实现代码
javascript中是没有map和list 结构的. 本篇文章是对在JS中Map和List的简单实现代码进行了详细的分析介绍,需要的朋友参考下代码如下: /* * MAP对象,实现MAP功能 * ...
LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
用简单的 Node.js 后台程序浅析 HTTP 请求与响应
用简单的 Node.js 后台程序浅析 HTTP 请求与响应本文写于 2020 年 1 月 18 日我们来看两种方式发送 HTTP 请求,一种呢,是命令行的 curl 命令:一种呢是直接在浏览器的 ...
Lucene.net站内搜索—3、最简单搜索引擎代码
目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...
python网页请求urllib2模块简单封装代码
这篇文章主要分享一个python网页请求模块urllib2模块的简单封装代码. 原文转自:http://www.jbxue.com/article/16585.html 对python网页请求模块ur ...
tensorflow rnn 最简单实现代码
tensorflow rnn 最简单实现代码 #!/usr/bin/env python # -*- coding: utf-8 -*- import tensorflow as tf from te ...
简单 php 代码跟踪调试实现
简单 php 代码跟踪调试实现 debug_backtrace:生成回溯 debug_print_backtrace:打印回溯 1. debug_backtrace ($options = DEBUG ...
opencart3属性attribute实现换行等简单html代码
opencart3属性attribute在前台页面默认是没有解析html代码功能的,比如想实现换行,后台这样写:line 1<br>line 2,但前台产品页也是line 1<br& ...
依然是关于我空间那篇申请的日志《JavaScript axError：Unexpected token ILLEGAL 很简单的代码……》
接下来要讲的日志现在的标题已经更改为<很简单的代码,但是无法--> 这篇日志地址:http://www.cnblogs.com/herbertchina/p/4475092.html 经过 ...

随机推荐

【Web】Nginx 反向代理与负载均衡
反向代理反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...
ssh定义、操作
Secure Shell(縮寫为SSH)SSH為一项建立在应用层和传输层基础上的安全协议,为计算机上的Shell(壳层)提供安全的传输和使用环境. 传统的网络服务程序,如rsh.FTP.POP和Tel ...
JAVA折腾微信公众平台（Token验证）[转]
JAVA折腾微信公众平台(Token验证) BAE的JAVA还在内测的时候,抱着好奇的态度发邮件申请了内测权限,当时折腾了一天,然后就没折腾了.现在BAE的JAVA都已经正式开放使用了,我又蛋疼的想写 ...
Oracle常用命令-用户、表空间、赋权限、导入导出
1.1 删除表空间 drop tablespace QBKJ including contents and datafiles; 1.2 删除用户 drop user admin cascad ...
WebSocket的原理与优缺点
websocket 是长连接,受网络限制比较大,需要处理好重连,比如用户进电梯或电信用户打个电话网断了,这时候就需要重连,如果 ws 一直重连不上,有些较复杂的业务方会不愿意的,是不是还要搞个 htt ...
Tomcat入门
1.JavaWeb概念 Java web,是用java技术来解决相关web互联网领域的技术的总称.web包括:web服务器和web客户端两部分.java在最早web客户端的应用有java applet ...
SpringBoot2.0.2 Application调用的三种方式
一.注解 @SpringBootApplication 点开查看源码是由多个注解合成的注解,其中主要的注解有: @SpringBootConfigurati ...
Hdu1083 Courses
Courses Problem Description Consider a group of N students and P courses. Each student visits zero, ...
hdu 1443 Joseph【约瑟夫环】
题目题意:一共有2k个人,分别为k个好人和k个坏人,现在我们需要每隔m个人把坏人挑出来,但是条件是最后一个坏人挑出来前不能有好人被挑出来..问最小的m是多少约瑟夫环问题,通常解决这类问题时我们把编 ...
The writing on the wall
题意:一个n*m的方格矩阵,有的格子被涂成了黑色,问该矩阵中有多少个子矩阵,子矩阵不包含黑色格子; 思路:对于一个长为L, 高为H的无黑点矩阵中包含的高为H的子矩阵个数为L+(L- ...

520 简单表白代码(JS)

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

随机推荐

热门专题