520 简单表白代码(JS)

最新推荐文章于 2024-07-06 15:18:11 发布
最新推荐文章于 2024-07-06 15:18:11 发布
阅读量2.8k 收藏 16
点赞数 1
文章标签： javascript 前端 matlab ViewUI
原文链接：http://www.cnblogs.com/Super-Lee/p/9064206.html
版权

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

 

转载于:https://www.cnblogs.com/Super-Lee/p/9064206.html

weixin_30458043
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现520 表白简单代码
10-18
本文是小编基于js实现的520表白代码，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
简约代码表白_520 简单表白代码(JS)
weixin_42358791的博客
12-24 767
520html, 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(2...
分享8个Python表白代码，祝你脱单成功
最新发布
2301_78095909的博客
07-06 1057
Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。（全套教程文末领取哈）如果你也想自学Python，可以关注我。我会把踩过的坑分享给你，让你不要踩坑，提高学习速度，还整理出了一套系统的学习路线，这套资料涵盖了诸多学习内容：开发工具，基础视频教程，项目实战源码，51本电子书籍，100道练习题等。相信可以帮助大家在最短的时间内，能达到事半功倍效果，用来复习也是非常不错的。
520-js弹出框表白程序代码
05-20
js弹出框形式，查看地址：http://www.wqa520.com/specialDay.php
六一儿童节到了，超炫酷的烟花（网页特效）
weixin_46039719的博客
05-30 1261
目录 💝 浮世万千 💝 炫酷展现 💝代码实现 💝 浮世万千 先手写一遍，然后键盘敲出来，最后代码敲出来，超级炫酷的那种...... 飞鸟集中的一句话，改编的一首诗是过样的: 浮世万千，吾爱有三，日月与卿: 日为朝，月为暮，卿为朝朝暮暮。 'I love three things in this world,', 'the sun ,the moon and you.', 'The sun for the day,', 'the moon for the night,', '
Python 应该怎么学？_python应该
m0_58269070的博客
04-26 430
fn() #执行传入的fn参数@timinglst=[]@timing[i for i in range(0,100000)] #列表生成式。
520节日表白代码资源.zip
05-20
这个名为"520节日表白代码资源.zip"的压缩包文件，显然包含了帮助程序员们在520这一天通过代码来向心爱的人表达情感的资源。"520"在中国网络文化中象征着“我爱你”，因此，这个压缩包可能包含了一系列精心设计的...
520，七夕节，爱情表白代码
05-19
首先，让我们了解“520，七夕节，爱情表白代码”这个主题。520在中国网络文化中代表着“我爱你”，因为520的发音与“我爱你”相似。而七夕节，又称为中国情人节，源自牛郎织女的美丽传说，是情侣们表达爱意的重要...
这是一份关于520表白html5的爱心代码
05-20
### 520表白HTML5爱心代码解析 #### 一、引言 随着HTML5的广泛应用，越来越多的创意可以通过简单的代码实现。今天我们要探讨的就是如何用HTML5制作一个简单而温馨的情人节礼物——爱心表白网页。通过分析提供的...
十几款拿来就能用的炫酷表白代码
热门推荐
wangyuxiang946的博客
08-27 4万+
「作者主页」：士别三日wyx 「作者简介」：CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」：小白零基础《Python入门到精通》 表白代码1、坐我女朋友好吗，不同意就关机.vbs2、坐我女朋友好吗，不同意关不掉.vbs3、动态粒子效果.html4、爱心动态.html5、爱心跳动.html6、弹窗表白.py7、一行代码实现心形.py8、一箭穿心.py9、爱心.py10、爱心代码.py11、爱心发射.py12、玫瑰花.py粉丝福利 1、坐我女朋友好吗，不同意就关机
520最深情的表白信（代码实现）
weixin_46039719的博客
05-15 3286
目录 1 视觉化 2 520最深情的表白信（代码展现） 2.1 准备 2.2 深情的信展现 2.3 代码 1 视觉化 想想那些发明家和他们发明的东西:莱特兄弟和飞机、伊斯曼和电影、爱迪生和灯泡、贝尔和电话。任何被发明或创造出来的东西,都是先源于发明者在心中见到一个景象，这是唯一的方法。他清楚地看见它，然后借由他在内心持续保有那个“成品”的画面，宇宙的力量就通过他，把这成品带来这个世界。这些人都知道这个秘密，他们对无形的事物具有完全的信心，他们明白自己具有撑起宇宙的力量，能把所要发.
html5 canvas全屏的520爱心表白网页代码
12-24
使用html做了一个 canvas全屏的520爱心表白网页代码，有兴趣的小伙伴 来看看
520情人节表白jQuery特效.zip
07-04
520情人节表白jQuery特效是一款情人节表白动画，520表白背景动画。 520情人节表白jQuery特效 截图
浪漫页面表白（附代码）
05-21
此代码支持修改，页面的浪漫性极高，是表白的不二之选。
520表白网站
08-17
11款表白网站的压缩包文件，有一定编程基础的可以进行大改，没有的可以简单的改一下网页中的文字
程序员的520表白代码,你给你对象整过几个？
一名很普通的互联网打工人
05-20 2964
说起格子衫、地中海、厚重的黑眼镜框、不懂浪漫且油腻的直男，想必大家的脑海里浮现出来的就是程序员的形象了。 但事实上，程序员也可以是可以很浪漫的哦！以下就是w3cschool编程狮小师妹搜集整理程序员520表白代码 Java public class DREAM { public static void main(String[] args) { while(true) { String Mylover = ""; for (i
HTML生日快乐代码 HTML5七夕情人节表白【告白模板】 HTML5七夕情人节表白网页源码 html css javascript
HTML网页设计 专注大学生网页设计
08-27 1609
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 精彩专栏 看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。...
520之表白代码
qq_42680327的博客
05-20 3万+
版权声明：本文为博主原创文章，未经博主允许不得转载。https://blog.csdn.net/qq_42680327 今天是一个好日子，2019年5月20日，表白的最佳时机，今天突然之间闲来无事，写了个告白程序，或许是内心的躁动吧，自己虽然是用不上了，但是还是希望与众多的单身族分享一下。废话不多，下面跟着我一起做来送给心爱的女生吧！页面中的图片可以换成你们自己心爱女生的图片，在此小编就附上效果...
520表白html5爱心代码
05-31
以下是一个简单的520表白HTML5爱心代码实现： ```html <!DOCTYPE html> <title>520表白HTML5爱心代码 canvas { position: absolute; top: 0; left: 0; z-index: -1; } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值