生日快乐的网页(用HTML和JavaScript)

最新推荐文章于 2025-02-04 19:07:57 发布

当时若只如初见

最新推荐文章于 2025-02-04 19:07:57 发布

阅读量1.2w

点赞数 22

文章标签：前端 html javascript html5 css

本文链接：https://blog.csdn.net/qq_30913955/article/details/109149957

版权

概述

最近姐姐的生日快到了，想着也没有什么礼物送给她，恰好因为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文件都放到指定的目录后就可以打包发出了。
还有一个问题就是你写的文字，因为我姐姐比较喜欢许嵩的歌所以我就将许嵩的歌词（当然还有我喜欢的周董的歌词）稍加润色写了进去。你写的文字虽然很少，但这正是你的礼物中最需要推敲的部分，一定要用心去写。