精华内容
下载资源
问答
  • HTML生日快乐祝福网页模板,该模板有多种动态效果图,全局采用蓝色装饰,适用于给兄弟、男生的生日祝福,只需简单修改,即可用网页生成打开。
  • 生日快乐网页

    2020-12-13 20:00:42
    送给同学的生日快乐网页,有个简单的flash,主要用的html和css,比较简单,适合新手参考或者送人(自己改下名字吧)
  • HTML生日快乐祝福网页模板,该模板有蛋糕动态效果图,全局采用粉色装饰,适用于给爱人、女生的生日祝福,只需简单修改,即可用网页生成打开。
  • 送给要祝福他(她)生日的一个礼物吧,程序员追女神必备,女屌追男神神奇哦 送给要祝福他(她)生日的一个礼物吧,程序员追女神必备,女屌追男神神奇哦
  • 生日快乐网页(用HTML和JavaScript)

    千次阅读 2020-12-17 15:51:31
    目录概述代码主页功能快捷键合理的创建标题,有助于目录的生成如何改变...最近姐姐的生日快到了,想着也没有什么礼物送给她,恰好因为CTF的原因学了点HTML和JavaScript,就做了两个网页,当然因为网页(wo)很(ye)简(bu

    概述

    最近姐姐的生日快到了,想着也没有什么礼物送给她,恰好因为CTF的原因学了点HTML和JavaScript,就做了两个网页,当然因为网页(wo)很(ye)简(bu)单(hui),没有带后端,所以送的时候要将资源文件一并打包发送,下面进入正文。

    代码

    主页

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--有中文的要像上面这样写否则会出现乱码-->
    
    <!--css样式表,设置背景、字体的样式-->
    <style type= "text/css" >
    body
    {
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-size: 100% 100%;
        /*将body标签的背景设置为平铺满正个浏览器窗口*/
    }
    div
    {
      /*为了让多行字符一起居中先将字符放在块里,再将块居中*/
      position:absolute;
      top:50%;
      left:50%;
      width:400px;
      height:300px;
      margin-top: -150px;
      margin-left: -200px;
      overflow:hidden;
      display:block;
      text-align:center;
      vertical-align:middle;
    }
    </style>
    
    <title>祝姐姐生日快乐</title>
    <!--上面的文字显示在标题栏里-->
    </head>
    
    <body id = "bc" background="photo/green.jpg">
    <!--标题默认背景是green.jpg-->
    <button onclick  = "bac()">换个颜色</button>
    <!--上面这个按钮是更换背景及文字的-->
    
    <!--下面是几组文字,一开始时显示的是green那组-->
    <div id = "green">
    <p>看得透 放得下<br />拈花一朵<br /><br />生日快乐</p>
    <a href="music.html" target="_blank" style="text-decoration:none">点一下</a>
    </div>
    
    <!--下面几组文字默认是隐藏的-->
    <div id = "yellow" style="display:none">
    <p>所谓的那快乐<br />赤脚在田里追蜻蜓追到累了<br />偷摘水果被蜜蜂给叮到怕了<br /><br />生日快乐</p>
    <a href="music.html" target="_blank" style="text-decoration:none">点一下</a>
    </div>
    
    <div id = "red" style="display:none">
    <p>庐州月光<br />洒在心上<br />月下的你仍是当年模样<br /><br />生日快乐</p>
    <a href="music.html" target="_blank" style="text-decoration:none">点一下</a>
    </div>
    
    <div id = "purple" style="display:none">
    <p>愿你的快乐纯粹简单<br /><br />生日快乐</p>
    <a href="music.html" target="_blank" style="text-decoration:none">点一下</a>
    </div>
    
    <div id = "black" style="color:#FFFFFF;display:none">
    <p>小烦恼没什么大不了<br /><br />生日快乐</p>
    <a href="music.html" target="_blank" style="text-decoration:none">点一下</a>
    </div>
    
    <!--下面是更换背景和文字的核心JavaScript代码-->
    <script>
    function bac()
    {
        var max  = 5;
        var min = 1;
        var n = Math.floor(Math.random() * (max - min + 1)) + min;
        if(n == 1)
        {
            document.getElementById("bc").setAttribute("background","photo/green.jpg");
    
            document.getElementById("green").style.display="block";
            document.getElementById("yellow").style.display="none";
            document.getElementById("red").style.display="none";
            document.getElementById("purple").style.display="none";
            document.getElementById("black").style.display="none";
        }
        else if(n == 2)
        {
            document.getElementById("bc").setAttribute("background","photo/yellow.jpg");
    
            document.getElementById("green").style.display="none";
            document.getElementById("yellow").style.display="block";
            document.getElementById("red").style.display="none";
            document.getElementById("purple").style.display="none";
            document.getElementById("black").style.display="none";
        }
        else if(n == 3)
        {
            document.getElementById("bc").setAttribute("background","photo/black.jpg");
    
            document.getElementById("green").style.display="none";
            document.getElementById("yellow").style.display="none";
            document.getElementById("red").style.display="none";
            document.getElementById("purple").style.display="none";
            document.getElementById("black").style.display="block";
        }
        else if(n == 4)
        {
            document.getElementById("bc").setAttribute("background","photo/red.jpg");
    
            document.getElementById("green").style.display="none";
            document.getElementById("yellow").style.display="none";
            document.getElementById("red").style.display="block";
            document.getElementById("purple").style.display="none";
            document.getElementById("black").style.display="none";
        }
        else
        {
            document.getElementById("bc").setAttribute("background","photo/purple.jpg");
    
            document.getElementById("green").style.display="none";
            document.getElementById("yellow").style.display="none";
            document.getElementById("red").style.display="none";
            document.getElementById("purple").style.display="block";
            document.getElementById("black").style.display="none";
        }
    }
    </script>
    
    </body>
    
    </html>

    播放音乐的页面

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type= "text/css" >
    body
    {
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-size: 100% 100%;
        /*设置好背景填充方式*/
    }
    div
    {
      /*依旧使用将块居中的方式将文字等元素居中*/
      position:absolute;
      top:50%;
      left:50%;
      width:500px;
      height:300px;
      margin-top: -150px;
      margin-left: -200px;
      overflow:hidden;
      display:block;
      text-align:center;
      vertical-align:middle;
    }
    </style>
    
    <title>Happy Birthday to You!</title>
    
    </head>
    
    <body id = "bc" background="photo/cake.jpg">
    
    <div style="color:#CCFF33">
    <p>为你唱这首歌<br />没有什么风格<br />它仅仅代表着<br />我希望你快乐
    <!-- <embed height="100" width="500" src="music/song.mp3" /> -->
    <br />
    <!--下面是插入的音频文件-->
    <audio controls autoplay="autoplay">
        <source src="music/song.mp3" />
        <source src="music/song.oga" />
        <source src="music/song.wav" />
    </audio>
    <br /></p>
    <b>Happy Birthday to You!</b>
    </div>
    
    </body>
    
    </html>

    分析

    思路分析

    先分析一下主页整体的思路,对于背景就是先用css设置好body(网页的主体)的样式,使背景图片平铺满整个窗口,换背景的时候只需更改body的background属性就能更换背景,对于文字我想居中显示,但是因为有多行,我不知道将它们一并居中会不会出现问题(感觉应该会出问题,要是都居中的话怎么分先后顺序,读者要是有兴趣可以试一试)就想到了div,先将块内文本设置为居中,然后将块居中就实现了整体居中的功能,事实证明这还有第二个好处下面会提到。
    然后就是更换背景和文字,更改背景要更改body的background属性,然而直接更改的话你会发现背景不变,这时要用到一个另外的函数setAttribute()具体原因可以看代码分析,更换文字时使用块的第二个好处就显现出来了就是更换文字时不用一个标签一个标签的去隐藏或显示,只需要隐藏或显示相应的块即可。
    然后就是通过链接链接到播放音乐的页面。
    对于播放音乐的页面除去前面提到的知识外,我要提的是浏览器对不同音乐文件的兼容性问题,没有一种音乐格式是所有浏览器都兼容的,因此要插入多种格式的音乐,这样才能确保你的音乐能被播放出来,具体细节参见代码分析。

    代码分析

    先看最核心的更换背景的代码
    首先是准备工作,为了方便地更改body的属性先为它设置一个id方便找到它:

    <body id = "bc" background="photo/green.jpg">

    下一步是创建一个点一下就会更换背景及文字的按钮,可以看出更换背景的函数是bac()

    <button onclick  = "bac()">换个颜色</button>

    最后是bac()函数,这里截取前半段来分析

    <script>
    function bac()
    {
        var max  = 5;
        var min = 1;
        var n = Math.floor(Math.random() * (max - min + 1)) + min;
        if(n == 1)
        {
            document.getElementById("bc").setAttribute("background","photo/green.jpg");
    
            document.getElementById("green").style.display="block";
            document.getElementById("yellow").style.display="none";
            document.getElementById("red").style.display="none";
            document.getElementById("purple").style.display="none";
            document.getElementById("black").style.display="none";
        }
        else if(n == 2)
        ......
    }
    </script>

    变量n经过运算后是1-5之间的一个值,然后根据不同的值决定某些标签的隐现,对于文字,显示一个块,隐藏其余四个块,控制相应块的.style.display即可实现,block是显示,none是隐藏。对于背景更改即可,但是要特别注意,若写成下面这样:

    document.getElementById("bc").style.background="photo/green.jpg";

    你会发现更改了背景后没有反应,这可能是因为更改body属性后body没有重新载入所以背景不变,一开始想的解决办法是改背景后立即刷新,但是刷新会使页面一闪然后回到一开始的green页面(背景图有五张分别是green、yellow、red、black、purple)实现不了换背景的功能,最后找到了setAttribute()函数,使用这个可以实现重新载入body从而使背景更换。
    另外要说的一句是,因为n的值是随机的,因此点击产生的n的值有可能会和上一次相同,就会出现按钮“失灵”的问题,出现这个问题的概率也不小,但是因为解决方案比(wo)较(pa)简(ma)单(fan),就留给读者一些改进的空间吧。

    下面是分析一个文字块

    <div id = "green">
    <p>看得透 放得下<br />拈花一朵<br /><br />生日快乐</p>
    <a href="music.html" target="_blank" style="text-decoration:none">点一下</a>
    </div>

    很简单,一些文字和一个链接,注意将链接的target属性设置为_blank,可以使新页面在新窗口中打开,这样不会丢失原来的页面

    最后分析一下播放音乐的页面的核心代码

    <!-- <embed height="100" width="500" src="music/song.mp3" /> -->
    <br />
    <audio controls autoplay="autoplay">
        <source src="music/song.mp3" />
        <source src="music/song.oga" />
        <source src="music/song.wav" />
    </audio>

    可以看到注释里有个embed,它的作用是定义外部(非 HTML)内容的容器,因此可以使用这个来引入音频文件,但是它有一个弊端:引入的文件格式可能是浏览器所不支持的,这样就会不显示,如果写多个这个标签,就会出现多个播放器,使页面不美观。于是我便看了看qq音乐官网的源码,找到了audio,这个标签可以引入多个文件,浏览器可以从多个文件中选择一个自己支持的进行播放,还可以设置自动播放,又一个问题被解决了。

    部分效果展示

    默认起始页
    red页面
    播放音乐页面

    资源

    图片均来自小鸟壁纸(原360壁纸)仅供学习和交流使用(不是打广告)在搜索引擎上找的图片清晰度太低,让人看起来很不舒服,不推荐。(如果有需要的话可以私信我要资源文件,因为版权原因就不公开发了,有什么其他好的找资源的平台也欢迎私信我,找不到资源的感觉太痛苦了)。
    音乐可以找一找各大播放器,下载了之后利用格式工厂(不懂问度娘)转换成多种格式,再放到某个路径下使用即可。
    下一个问题是相对路径,一定要用相对路径,不然换了电脑之后你的网页大概率找不到你的图片和音乐。这里附上我的目录树图:目录树
    网页文件放在生日快乐文件夹下,这个文件夹下还有music和photo文件夹分别放音乐和图片,如果你仔细阅读了我的代码那你应该已经理解了相对路径是什么。
    资源文件和html文件都放到指定的目录后就可以打包发出了。
    还有一个问题就是你写的文字,因为我姐姐比较喜欢许嵩的歌所以我就将许嵩的歌词(当然还有我喜欢的周董的歌词)稍加润色写了进去。你写的文字虽然很少,但这正是你的礼物中最需要推敲的部分,一定要用心去写。

    展开全文
  • JavaScript网页生日快乐

    2020-12-20 19:58:04
    JavaScript网页生日快乐 最近考试周,没怎么学JS,朋友过生日就顺手写了一个憨憨网页,假装它是一篇新闻。 哈哈哈哈有一个算是粉嫩的封面吧,深得pink老师真传…点击生日快乐四个大字的话会变成新闻页 有一个祝福...

    JavaScript网页生日快乐

    最近考试周,没怎么学JS,朋友过生日就顺手写了一个憨憨网页,假装它是一篇新闻。

    哈哈哈哈有一个算是粉嫩的封面吧,深得pink老师真传…点击生日快乐四个大字的话会变成新闻页

    在这里插入图片描述

    有一个祝福视频,有一个背景音乐,还有一个小视频。下面有留言部分,默认三条生日快乐留言,可以删除留言,也可以留言!

    在这里插入图片描述

    程序源代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>摆毛21岁生日快乐</title>
        <embed src="happybirthday.mp3" autostart="true" loop="true" hidden="true">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body {
                background-color: pink;
            }
            .happy_birthday {
                position: absolute;
                font-size: 50px;
                font-family: '楷体';
                font-weight: 900;
                top: 50%;
                left: 50%;
                margin-top: -25px;
                margin-left: -50px;
            }
            .body1 {
                display: none;
                position: absolute;
                width: 1200px;
                left: 50%;
                margin-left: -600px;
                background-color: silver;
            }
    
            h1 {
                margin-top: 20px;
                text-align: center;
            }
            .a{
                height: 180px;
            }
            .line {
                width: 100%;
                height: 0px;
                border: 1px solid red;
            }
            .logo{
                float: left;
            }
            .tim{
                float: left;
                height: 100px;
                margin-top: 50px;
                margin-left: 500px;
                font-size: 25px;
                text-align: center;
                line-height: 50px;          
            }
    
    
            h2 {
                text-align: center;
                line-height: 100px;
            }
            
            .text {
                margin-left: 100px;
                width: 1000px;
                font-size: 18px;
                text-indent: 36px;
            }
            .text2 {
                margin-left: 100px;
                width: 1000px;
                font-size: 18px;
                text-indent: 36px;
            }
            .text3 {
                margin-left: 1000px;
                font-size: 12px;
            }
            video {
                margin-left: 280px;
            }
           
            textarea {
                margin-top: 10px;
                width: 600px;
                height: 100px;
                font-size: 30px;
                font-weight: 900;
                margin-left: 300px;
            }
            button{
                width: 80px;
                height: 30px;
                margin-top: 50px;
            }
            a{
                float: right;
                color: black;
                text-decoration: none;
            }
            li {
                list-style: none;
                width: 680px;
                height: 30px;
                font-size: 25px;
                color: green;
                margin-top: 5px;
                font-weight: 900;
                margin-left: 300px;
                border: 1px solid black;
    
            }
        
        </style>
    </head>
    
    <body>
        
        <div class="happy_birthday">生日快乐</div>
    
        <div class="body1">
            <div class="title">
                <h1>航仔新闻网</h1>
                <div class="a">
                    <img class ="logo" src="logo.png">
                    <div class="tim">2020年12月20日<br>星期日</div>
                </div>
                
                
            </div>
            <div class="line"></div>
            <div>
                <div>
                    <h2>陶宇轩先生21岁生日,众星齐送祝福</h2>
                    <div class="text">
                        今天是2020年12月20日,星期日,农历十一月初六,今天是陶宇轩先生的21岁生日,陶先生在青年一辈中可谓是一表人才,他博学多才、才思敏捷、才高八斗、学富五车、出口成章、出类拔萃、文武双全、谈吐不凡、十全十美、完美无缺。在此美好的日子,娱乐圈众多明星也给陶先生送来了祝福。
                    </div>
                    <video width="600" height="600" controls>
                        <source src="birthday.mp4" type="video/mp4">
                    </video>
                    <div class ="text2">
                       随着一句句生日祝福的响起,我们相信,此刻的陶先生是无比的幸福的。
                       <p>迎春花在风里为你摇曳着春的烂漫,百鸟站在枝头为你,唱着悦耳的赞歌,天空中幻化出最美的色彩,让你醉入天涯,大地捧出最灿的鲜花,装扮着你美丽的发卡,流水曲殇,伴着唯美的环佩妙音;高山仰止,却为你顶礼膜拜。</p>
                       <p>青春的树越长越葱茏,生命的花就越开越艳丽。在陶先生生日的这一天,我谨代表航仔新闻网给陶先生送来深深的祝福,愿陶先生充满活力,青春常在,心想事成,生日快乐!</p>
                       
                    </div>
                    <div class="text3">
                        记者:GYH<br>
                        编辑:GYH
                    </div>
                    <div class="line"></div>
                    <textarea name="" id=""></textarea>
                    <button>发布</button>
                    <ul>
                        <li>生日快乐<a href='javaScript:;'>删除</a></li>
                        <li>生日快乐<a href='javaScript:;'>删除</a></li>
                        <li>生日快乐<a href='javaScript:;'>删除</a></li>
                    </ul>
                </div>
            </div>
    
            <div class='history'>
               
            </div>
        </div>
        <script>
            var happy_birthday = document.querySelector('.happy_birthday');
            var body = document.querySelector('body');
            var body1 = document.querySelector('.body1');
            var btn = document.querySelector('button');
            var text = document.querySelector('textarea');
            var ul = document.querySelector('ul');
            happy_birthday.addEventListener('mouseover',function(){
                this.style.cursor = 'pointer';
            })
            happy_birthday.addEventListener('click',function(){
                this.style.display = 'none';
                body.style.backgroundColor = 'white';
                body1.style.display = 'block';
            })
    
            btn.onclick = function(){
                if(text.value == ''){
                    alert("您没有输入内容。")
                    return false;
                }else{
                    var li = document.createElement('li');
                    li.innerHTML = text.value+"<a href='javaScript:;'>删除</a>";
                    //ul.appendChild(li);
                    //添加元素
                    ul.insertBefore(li,ul.children[0])
                    //删除元素
                    var as = document.querySelectorAll('a');
                    for (var i =0;i<as.length;i++){
                        as[i].onclick = function(){
                            ul.removeChild(this.parentNode);
                        }
                    }
                }
                text.value='';
               var as = document.querySelectorAll('a');
                    for (var i =0;i<as.length;i++){
                        as[i].onclick = function(){
                            ul.removeChild(this.parentNode);
                        }
                    } 
            }
            var as = document.querySelectorAll('a');
                    for (var i =0;i<as.length;i++){
                        as[i].onclick = function(){
                            ul.removeChild(this.parentNode);
                        }
                    }
        </script>
    </body>
    </html>
    

    点击此处链接下载文件

    展开全文
  • HTML生日快乐祝福网页模板,该模板有多种动态效果图,全局采用蓝色装饰,适用于给女朋友的生日祝福,只需简单修改,即可用网页生成打开。html+css+js实现生日快乐代码????超炫酷效果????(含生日背景音乐)❤520/表白/...

    html+css+js实现生日快乐代码🎂超炫酷效果🎂(含生日背景音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码

    程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板
    HTML生日快乐祝福网页模板,该模板有多种动态效果图,全局采用蓝色装饰,适用于给女朋友的生日祝福,只需简单修改,即可用网页生成打开。html+css+js实现生日快乐代码🎂超炫酷效果🎂(含生日背景音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码

    戳下方链接↓查看线上演示地址

    1.生日快乐🎂(多页面html模板)★在线演示地址:https://ruanjiafeng2013.gitee.io/happy-birthday-template

    2.生日蛋糕🎂★在线演示地址:https://ruanjiafeng2013.gitee.io/birthday-cake

    3.(生日快乐)蛋糕烟花+蓝色梦幻海洋3D相册🎂★在线演示地址: https://ruanjiafeng2013.gitee.io/birthday-cake520/

    动态效果演示

    在这里插入图片描述

    html代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>制作一个程序员的生日快乐代码</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/style11.css">
        <link rel="stylesheet" href="css/yanhua.css">
        <link rel="stylesheet" href="css/style2D.css">
    </head>
    
    <body>
        <marquee style="position: fixed; top: 10px; color: #fff" scrollamount="10">Happy birthday!           生日快乐!</marquee>
        <marquee style="position: fixed; top: 20px; color: #ffd800" scrollamount="3">祝你生日快乐,天天开心!</marquee>
        <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
        <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
        <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
        <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
        <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
        <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee>
        <main style="text-align:center;position:absolute;">
    
            <ul class="star" style="--v: 1; --t: 1;">
                <li style="--i: 0"></li>
            </ul>
            <ul style="--v: 2; --t: 8; --direction:reverse">
                <li style="--i: 0"></li>
                <li style="--i: 1"></li>
                <li style="--i: 2"></li>
                <li style="--i: 3"></li>
                <li style="--i: 4"></li>
                <li style="--i: 5"></li>
                <li style="--i: 6"></li>
                <li style="--i: 7"></li>
            </ul>
            <ul style="--v: 3; --t: 12">
                <li style="--i: 0"></li>
                <li style="--i: 1"></li>
                <li style="--i: 2"></li>
                <li style="--i: 3"></li>
                <li style="--i: 4"></li>
                <li style="--i: 5"></li>
                <li style="--i: 6"></li>
                <li style="--i: 7"></li>
                <li style="--i: 8"></li>
                <li style="--i: 9"></li>
                <li style="--i: 10"></li>
                <li style="--i: 11"></li>
            </ul>
            <ul style="--v: 4; --t: 18; --direction:reverse">
                <li style="--i: 0"></li>
                <li style="--i: 1"></li>
                <li style="--i: 2"></li>
                <li style="--i: 3"></li>
                <li style="--i: 4"></li>
                <li style="--i: 5"></li>
                <li style="--i: 6"></li>
                <li style="--i: 7"></li>
                <li style="--i: 8"></li>
                <li style="--i: 9"></li>
                <li style="--i: 10"></li>
                <li style="--i: 11"></li>
                <li style="--i: 12"></li>
                <li style="--i: 13"></li>
                <li style="--i: 14"></li>
                <li style="--i: 15"></li>
                <li style="--i: 16"></li>
                <li style="--i: 17"></li>
            </ul>
    
            </ul>
            <p id="message" style="position:relative;margin-top:-40px;z-index:99999">
                <img src="img/birthday.png" alt="Alternate Text" />
                <br />
            </p>
        </main> 
        <div class="block-audio" style="z-index:10000;">
        </div>
        <canvas id="canvas"></canvas>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/index1.js"></script>
        <script src="js/script.js"></script>
    
    </body>
    ...关注下方公众号获取源码↓↓↓↓
    
    </html>
    
    

    js代码

    console.clear();
    
    /* Play with these values! */
    const PARTICLE_COUNT = 100;
    const SAFE_DISTANCE = 130;
    const INFECTED_DISTANCE = 15;
    const INFECTION_RATE = 0.25;
    const RECOVERY_TIME = 14000;
    const STAY_AT_HOME = 0.1;
    
    /* ---------------------------------- */
    
    let particles = [];
    
    const STATUSES = {
      HEALTHY: "HEALTHY",
      INFECTED: "INFECTED",
      RECOVERED: "RECOVERED"
    };
    
    const elBody = document.body;
    const elCanvas = document.querySelector("#canvas");
    const ctx = elCanvas.getContext("2d");
    
    let width, height;
    
    function resize() {
      width = elCanvas.width = elBody.clientWidth;
      height = elCanvas.height = elBody.clientHeight;
    }
    resize();
    window.addEventListener("resize", resize);
    
    /* ---------------------------------- */
    
    class Particle {
      constructor() {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.radius = 3;
        this.color = "white";
        this.speed = Math.random() < STAY_AT_HOME ? 0 : 1;
        this.directionAngle = Math.floor(Math.random() * 360);
        this.vector = {
          x: Math.cos(this.directionAngle) * this.speed,
          y: Math.sin(this.directionAngle) * this.speed
        };
        this.status = STATUSES.HEALTHY;
    
        if (Math.random() < INFECTION_RATE) {
          this.infect();
        }
      }
      infect() {
        if (
          this.status === STATUSES.INFECTED ||
          this.status === STATUSES.RECOVERED
        ) {
          return;
        }
    
        this.color = "green";
        this.status = STATUSES.INFECTED;
    
        setTimeout(() => {
          this.recover();
        }, RECOVERY_TIME);
      }
      recover() {
        this.status = STATUSES.RECOVERED;
        this.color = "hotpink";
      }
      draw(drawCtx) {
        drawCtx.beginPath();
        drawCtx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        drawCtx.closePath();
        drawCtx.fillStyle = this.color;
        drawCtx.fill();
      }
      update() {
        this.checkBoundaries();
        this.x += this.vector.x;
        this.y += this.vector.y;
      }
      checkBoundaries() {
        if (this.x > width || this.x < 0) {
          this.vector.x *= -1;
          /* Ensure the dots are pushed inside */
          this.x = Math.max(0, Math.min(width, this.x));
        }
        if (this.y > height || this.y < 0) {
          this.vector.y *= -1;
          /* Ensure the dots are pushed inside */
          this.y = Math.max(0, Math.min(height, this.y));
        }
      }
    }
    
    /* ---------------------------------- */
    
    function distance(x1, y1, x2, y2) {
      var dx = x1 - x2;
      var dy = y1 - y2;
      return Math.sqrt(dx * dx + dy * dy);
    }
    
    function linkParticles(particle, otherParticles, drawCtx) {
      for (const p of otherParticles) {
        const d = distance(particle.x, particle.y, p.x, p.y);
    
        if (d > SAFE_DISTANCE) {
          continue;
        }
    
        // Infect other particle!
        if (particle.status === STATUSES.INFECTED && d < INFECTED_DISTANCE) {
          p.infect();
        }
    
        const opacity = 0.8 - (d / SAFE_DISTANCE) * 0.8;
        drawCtx.lineWidth = 1;
        drawCtx.strokeStyle = particle.color; //rgba(255,255,255,${opacity})`;
        drawCtx.globalAlpha = opacity;
        drawCtx.beginPath();
        drawCtx.moveTo(particle.x, particle.y);
        drawCtx.lineTo(p.x, p.y);
        drawCtx.closePath();
        drawCtx.stroke();
        drawCtx.globalAlpha = 1;
      }
    }
    
    /* ---------------------------------- */
    ...关注下方公众号获取源码↓↓↓↓
    
    

    ❤重点:如何通过发链接给别人看 ↓↓↓

    ❤解决上线问题> (不需要服务器就能免费部署上线)部署上线工具(永久可用)

    不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备软件 , **需要可在文章 ↓ 下方公众号获取 **
    插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器

    原文教程链接

    1.部署流程在这里插入图片描述

    2.连接成功

    将你写好的页面部署上线后, 全世界的人都可以愉快的访问到你的网页了(永久免费使用哦)

    在这里插入图片描述

    前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套

    在这里插入图片描述

    ~ 关注我,点赞博文~ 每天带你涨知识!

    1.看到这里了就 [点赞+好评+收藏] 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

    2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业设计模板 等! 「在这里有好多 前端 开发者,会讨论 前端 Node 知识,互相学习」!

    3.以上内容技术相关问题可以留言/私信交流,也可以关注↓下方公众号 获取更多源码 !

    在这里插入图片描述

    更多源码

    ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备

    ❤炫酷烟花表白❤ html+css+js 放一场浪漫烟花秀(含音乐) 程序员表白

    Html+Js+Css+Canvas 实现炫酷烟花表白❤ (云雾状粒子文字3D动画自动切换,支持自定义文字动画切换特效)/ 程序员表白必备

    100套❤vue/react+echarts❤ 大屏可视化数据平台实战项目分享 (附源码)

    ❤七夕情人节❤html+css+js 漫天飞雪3D相册(含音乐自定义文字) 程序员表白必备

    ❤唯美满天星❤ html+css+js炫酷3D相册(含音乐可自定义文字)程序员表白必备

    ❤html+css+js❤ 白云飘动3D相册(含音乐)程序员表白必备

    ❤[前端永久免费部署上线工具] 解决不需要服务器就能将项目部署上线问题!

    这个冬天, 我是这样表白的 ❉html+css+js❉ 绘制冬季下雪3D相册 (521程序员表白代码大公开)

    ❤程序猿的我向女友求婚❤, 我用代码给女朋友送了一个礼物「可以拿去送给自己喜欢的人」

    抖音❤超火| html+css+js 流星雨3D相册(表白必备)制作教程来啦!

    ❤爱情墙❤html5+css3+js 实现全屏七夕表白页面 (可自定义文字相片)

    html+css+js 幻化3D相册 (含背景音乐)程序员表白必备 /520/七夕情人节

    新年祝福❤雪花飘落❤ html+css3+js 实现3D相册开关闭合旋转(情人节生日表白)必备

    前端❤ html+css+js 实现1000个超炫酷特效(附源码)

    web前端❤基于html+css+js 仿JD天猫电商平台功能齐全(免费附源码)

    抖音超火❤ html+css+js 实现炫酷3D立方图像库(免费附源码)

    抖音超火❤ html+css+js 实现炫酷3D魔方(免费附源码)

    抖音超火❤流动爱心 html+css+js (免费附源码)

    抖音超火❤罗盘时钟html+css+js (免费附源码)

    亲测有效❤抖音视频去水印 ( 附源码| 仅供学习参考)

    css3 实现3D旋转立方体(免费附源码)

    css3 实现3D立体时钟(免费附源码)

    ❤雪花飘落❤ html+css+js实现2021新年倒计时特效(附源码)

    七夕情人节 ❤html+css+j❤实现满屏爱心特效(程序员表白)

    一款乾坤八卦风水罗盘旋转CSS3动画,给人一种玄机重重的感觉(附源码)

    520表白/七夕/情人节/求婚/脱单 Html+Js+Css 实现雪花爱心❤ (可自定义文字/音乐)/ 程序员表白必备

    520程序员求婚 Html+Js+Css花瓣相册❤ (爱心3D动画,自定义文字)/ 程序员表白必备

    520撩妹必备❤手摸手教你撸一个,相册代码

    html+css+js 实现(3D梦幻浮心) 超炫特效

    微信公众号开发 ❤一篇就够 [推荐收藏]

    微信小程序入门教学❤ 手摸手撸小程序,一篇就够!

    ❤100款程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 炫酷动画网页的源代码(建议收藏)

    展开全文
  • html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板 HTML...

    html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS)

    程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板
    HTML生日快乐祝福网页模板,该模板有多种动态效果图,全局采用蓝色装饰,适用于给女朋友的生日祝福,只需简单修改,即可用网页生成打开。

    戳下方链接↓查看线上演示地址

    1.生日快乐🎂(多页面html模板)★在线演示地址:https://ruanjiafeng2013.gitee.io/happy-birthday-template

    2.生日蛋糕🎂★在线演示地址:https://ruanjiafeng2013.gitee.io/birthday-cake

    3.(生日快乐)蛋糕烟花+蓝色梦幻海洋3D相册🎂★在线演示地址: https://ruanjiafeng2013.gitee.io/birthday-cake520/

    H5 手机端

    一,登录页面 : 账号/密码都是 123 (可自定义文字图片+音乐)

    在这里插入图片描述

    二,生日蛋糕页面(可自定义文字+音乐)

    在这里插入图片描述

    三.浪漫表白页面 (可自定义图片+文字+音乐)

    在这里插入图片描述

    PC 电脑端

    登录页

    在这里插入图片描述

    生日蛋糕页面

    在这里插入图片描述

    浪漫表白页面

    在这里插入图片描述

    修改密码

    在当前目录下,有js/index.js文件:

    //修改此处的123,123即可修改登录的用户名和密码
    if(userName=="123" &&  pwd=="123"){
      event.preventDefault();
      $('form').fadeOut(500);
      $('.wrapper').addClass('form-success');
      setTimeout(function(){location.href="BirthdayCake.html";},2000);
    }
    

    替换memories页面文字和图片

    以第三屏为例:

    <!--第三屏-->
    
    <div class="section">
        <!-- 下面两个div分别实现的左边那条轴和那个小球 -->
        <div class="timeline"></div>
        <div class="timepoint21"></div>
        <div class="ly-box21">
            <div class="ly-txt21">
                <!-- 这里更改日期 -->
                201X-1X-2X
            </div>
            <div class="ly-txt22">
              <!-- 这里更改内容,段落、换行用<p></p>包裹起来 -->
               <p> XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
               <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            </div>
            <div class="ly-imgbox21">
              <!-- 这里更改图片,图片请先改好对应的名字并且放到img文件夹下面
                  如果你不懂css,那么最好就裁剪图片至合适大小为止
                  如果你会css,那么可以根据class名字去修改对应css的宽度设置-->
              <img class="ly-img21" src="img/2014.11.26-1.png">
            </div>
        </div>
        <div class="ly-triangle21"></div>
    
        <div class="ly-box22">
            <div class="ly-txt23">
              <!-- 与上面类似,不再多说 -->
                201X-1X-1X
            </div>
            <div class="ly-txt24">
                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            </div>
            <div class="ly-imgbox22">
              <img class="ly-img22" src="img/2014.12.19-1.png">
            </div>
        </div>
        <div class="ly-triangle22"></div>
    
         <div class="ly-box23">
            <div class="ly-txt25">
                201X-1X-2X
            </div>
            <div class="ly-txt26">
                XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
            </div>
            <div class="ly-imgbox23">
              <img class="ly-img23" src="img/2014.12.20-1.jpg">
            </div>
        </div>
        <div class="ly-triangle23"></div>
    </div>
    

    文案

    在这里插入图片描述
    宝贝,你的生日就在今天,祝你可爱依旧,快乐多多!也许你并不是为我而生,可我却有幸与你相伴。愿我在有生之年,年年为你点燃生日的烛焰。一支蜡烛,一颗心愿,一份真情,祝你生日快乐!花朝月夕,如诗如画。祝你生日快乐、温馨、幸福……愿你的生日充满无穷的快乐,愿你今天的回忆温馨,愿你所有的梦想甜美,愿你这一年称心如意!在你生日的这一天,我没有跟你在一起,只希望你能快乐、健康、美丽,生命需要奋斗、创造和把握!生日快乐!世上若有诤友,那就是如你对我那样关怀的朋友。我的挚友,祝生日快乐,新的一年中好运、健康、快乐!在这特殊的日子里,我想说我真高兴,时光没有改变我们的友谊,祝你生日其乐无穷愿祝福萦绕着你,在你缤纷的人生之旅,在你永远与春天接壤的梦幻里。祝你:心想事成、幸福快乐!年年岁岁花相似,岁岁年年人不同。醒来惊觉不是梦,眉间皱纹又一重。在你生日的这一天,只希望你快乐!生日快乐!永远健康!美丽动人!愿所有的快乐、所有的幸福、所有的温馨、所有的好运围在你身边。生日快乐!生日快乐!愿这特殊的日子里,你的每时每刻都充满欢乐。时光飞逝,今天又是你的生日,愿今天你拥有一切美丽,来年生日更美好,一年更胜一年。生日快乐!一句问候,一声祝福,一切如愿,一生幸福,一世平安。祝生日快乐!你我相识许久!难忘是你我纯洁的友情!可贵是永远不变的真情!高兴是能认识你!献上我最爱的康乃馨,祝福你的生日。生命和爱是人类最高的意义。在试着把握生命的同时,愿你早日找到爱!生日快乐!今天是你的是生日,我的爱人,感谢你的辛苦劳碌,感谢你给予我的关心、理解和支持。给你我全部的爱!送上我诚挚的生日祝福,情深意重,祝你在未来的一年里,心想事成!生日快乐,亲爱的朋友,愿你天天快乐,年年好运,一生幸福!

    如何通过发链接给别人看 ↓↓↓

    ❤解决上线问题> (不需要服务器就能免费部署上线)部署上线工具(永久可用)

    不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备软件 , **需要可在文章 ↓ 下方公众号获取 **
    插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器

    原文教程链接

    1.部署流程在这里插入图片描述

    2.连接成功

    将你写好的页面部署上线后, 全世界的人都可以愉快的访问到你的网页了(永久免费使用哦)

    在这里插入图片描述

    前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套

    在这里插入图片描述

    ~ 关注我,点赞博文~ 每天带你涨知识!

    1.看到这里了就 [点赞+好评+收藏] 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

    2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业设计模板 等! 「在这里有好多 前端 开发者,会讨论 前端 Node 知识,互相学习」!

    3.以上内容技术相关问题可以留言/私信交流,也可以关注↓下方公众号 获取更多源码 !

    在这里插入图片描述

    更多源码

    ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备

    ❤炫酷烟花表白❤ html+css+js 放一场浪漫烟花秀(含音乐) 程序员表白

    Html+Js+Css+Canvas 实现炫酷烟花表白❤ (云雾状粒子文字3D动画自动切换,支持自定义文字动画切换特效)/ 程序员表白必备

    100套❤vue/react+echarts❤ 大屏可视化数据平台实战项目分享 (附源码)

    ❤七夕情人节❤html+css+js 漫天飞雪3D相册(含音乐自定义文字) 程序员表白必备

    ❤唯美满天星❤ html+css+js炫酷3D相册(含音乐可自定义文字)程序员表白必备

    ❤html+css+js❤ 白云飘动3D相册(含音乐)程序员表白必备

    ❤[前端永久免费部署上线工具] 解决不需要服务器就能将项目部署上线问题!

    这个冬天, 我是这样表白的 ❉html+css+js❉ 绘制冬季下雪3D相册 (521程序员表白代码大公开)

    ❤程序猿的我向女友求婚❤, 我用代码给女朋友送了一个礼物「可以拿去送给自己喜欢的人」

    抖音❤超火| html+css+js 流星雨3D相册(表白必备)制作教程来啦!

    ❤爱情墙❤html5+css3+js 实现全屏七夕表白页面 (可自定义文字相片)

    html+css+js 幻化3D相册 (含背景音乐)程序员表白必备 /520/七夕情人节

    新年祝福❤雪花飘落❤ html+css3+js 实现3D相册开关闭合旋转(情人节生日表白)必备

    前端❤ html+css+js 实现1000个超炫酷特效(附源码)

    web前端❤基于html+css+js 仿JD天猫电商平台功能齐全(免费附源码)

    抖音超火❤ html+css+js 实现炫酷3D立方图像库(免费附源码)

    抖音超火❤ html+css+js 实现炫酷3D魔方(免费附源码)

    抖音超火❤流动爱心 html+css+js (免费附源码)

    抖音超火❤罗盘时钟html+css+js (免费附源码)

    亲测有效❤抖音视频去水印 ( 附源码| 仅供学习参考)

    css3 实现3D旋转立方体(免费附源码)

    css3 实现3D立体时钟(免费附源码)

    ❤雪花飘落❤ html+css+js实现2021新年倒计时特效(附源码)

    七夕情人节 ❤html+css+j❤实现满屏爱心特效(程序员表白)

    一款乾坤八卦风水罗盘旋转CSS3动画,给人一种玄机重重的感觉(附源码)

    520表白/七夕/情人节/求婚/脱单 Html+Js+Css 实现雪花爱心❤ (可自定义文字/音乐)/ 程序员表白必备

    520程序员求婚 Html+Js+Css花瓣相册❤ (爱心3D动画,自定义文字)/ 程序员表白必备

    520撩妹必备❤手摸手教你撸一个,相册代码

    html+css+js 实现(3D梦幻浮心) 超炫特效

    微信公众号开发 ❤一篇就够 [推荐收藏]

    微信小程序入门教学❤ 手摸手撸小程序,一篇就够!

    ❤100款程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 炫酷动画网页的源代码(建议收藏)

    展开全文
  • HTML生日快乐祝福网页模板,该模板有多种动态效果图,全局采用蓝色装饰,适用于给女朋友的生日祝福,只需简单修改,即可用网页生成打开。 演示地址: https://ruanjiafeng2013.gitee.io/happy-birthday-template
  • 无聊写了个网页,进去点红心 http://106.13.230.187/xin/happybirthday.html
  • 生日祝福js,html源码

    2018-05-24 15:46:02
    生日祝福网页,送给我想念的那个...背景为一个粒子系统,页面包含打字机效果,连续点击鼠标即可弹奏《生日快乐》的钢琴曲。附加了生日倒计时,祝福用文本打字机效果逐字展现。其他功能可以自由发挥,愿有情人终成眷属。
  • 权威网站W3C(http://www.w3.org/)发布报告说,世界上第一个WWW网页的网址是http://nxoc01.cern.ch/hypertext/WWW/TheProject.html,这个页面今天已经打不开了。这个页面创建于1990年11月13号,到昨天正好16年。...
  • happy-birthday-master-源码

    2021-03-28 22:22:11
    因此,我Swift整理了这个动画网页,说“生日快乐”。 随意使用它来祝福您的朋友。 您可以通过几个简单的步骤使其运行: 分叉存储库 打开customize.json并将名称/愿望消息/图像替换为您自己的名称/愿望消息/图像 ...
  • BGR-源码

    2021-03-09 00:54:12
    因此,我Swift整理了这个动画网页,说“生日快乐”。 随意使用它来祝福您的朋友。 您可以通过几个简单的步骤使其运行: 分叉存储库 打开customize.json并将名称/愿望消息/图像替换为您自己的名称/愿望消息/图像 ...
  • 人力资源管理软件(完全免费)

    热门讨论 2011-03-08 11:36:20
    日期提醒,可对生日、合同期、证件期限等自动提醒 保险管理(人力资源软件) 培训历史管理 员工证件管理(人力资源软件) 员工奖励管理(人力资源软件) 员工惩罚管理(人力资源软件) 支持显示定制 生成各类统计报表...

空空如也

空空如也

1 2
收藏数 26
精华内容 10
关键字:

生日快乐html网页