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 经过 ...

随机推荐

java.lang.SuppressWarnings的注解简介
简介:java.lang.SuppressWarnings是J2SE 5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上.作用:告诉编译器忽略指定的警告, ...
819. Most Common Word
static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...
shell 常见面试
1.求100以内的质数 #!/bin/bash n= ;i<=n;i++)) do ;x<=i;x++)) do b=$(( $i%$x )) ]]; then a=$a+ fi done ...
jq页面加载分割截图
<script> $(document).ready(function() { if (!Array.prototype.forEach) { Array.prototype.forEac ...
zk可视化工具
也是无意中接触到zk,搞得有点头大,之前都是通过crt连通服务后,在服务上通过命令去查看节点下的数据的,十分的不方便,后来发现了可视化工具这玩意儿还真的是好用,看节啊点下的数据啥的一目了然,我用过的有 ...
微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
工作中的小tips（持续更新）
1.在工作的时候一定要留下痕迹,这样即使乙方抵赖,或者说领导认为你没干活的时候留下证据(电话没有微信,邮件之类的文字类有效果) 2.每天晚上下班之前将一天的工作总结一下,把第二天的工作给罗列出来,以方 ...
Android: Custom View和include标签的区别
Custom View, 使用的时候是这样的: <com.example.home.alltest.view.MyCustomView android:id="@+id/customV ...
MySQL性能优化之延迟关联
[背景] 某业务数据库load 报警异常,cpu usr 达到30-40 ,居高不下.使用工具查看数据库正在执行的sql ,排在前面的大部分是: SELECT id, cu_id, name, in ...
android sqlite 模糊查询
正确的做法Cursor cursor = sd.rawQuery("select * from contect where QT_CUSTOM like ?", new Strin ...

520 简单表白代码(JS)

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

随机推荐

热门专题