知新_RL

这个屌丝很懒，什么也没留下！

热门标签

232. Web前端网页制作 520浪漫表白大学生期末大作业 html+css+js_html+css+js大作业

作者：知新_RL | 2024-07-17 20:48:51

踩

html+css+js大作业

前言

亲卿爱卿，是以卿卿，我不卿卿，谁当卿卿？如果你也拥有这样真挚与自由的爱情，不如在520，以这种浪漫又独特的方式，对她/他说一句温柔的小情话，来表达你的无限的爱意。

一、网页概述

520表白网页，文字、爱心动画，在一起计时。网页应用html+css+js制作，文字内容、计时时间可以随意修改。支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title>表白网页 -</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <style type="text/css">
       @font-face {
           font-family: digit;
           src: url('digital-7_mono.ttf') format("truetype");
       }
   </style>
<meta name="keywords" content="" />
<meta name="description" content="" />   <link href="css/default.css" type="text/css" rel="stylesheet">
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

   <script type="text/javascript" src="js/jq.snow.js"></script>
</head>

<body>

   <script>
   $(function(){
       $.fn.snow({
           minSize: 5,       //雪花的最小尺寸
           maxSize: 50,    //雪花的最大尺寸
           newOn: 150       //雪花出现的频率这个数值越小雪花越多
       });
   });
   </script>
   <div id="mainDiv">
       <div id="content">
           <div id="code">
               <span class="comments">/**</span><br />
<span class="space"/><span class="comments">* 亲爱的：今天是2024年5月20日。</span><br />
<span class="space"/><span class="comments">* 我写这个网站来庆祝这个特殊的日子。 </span><br />
<span class="space"/><span class="comments">* 虽然，我不是一个很擅长表达言语的人。 </span><br />
<span class="space"/><span class="comments">* 但我希望我们能记住我们在一起的每一刻。</span><br />
               <span class="space"/><span class="comments">*/</span><br />
               Girl u = <span class="keyword">new</span> Girl(<span class="string">"Abby"</span>);<br/>
               Boy i = <span class="keyword">new</span> Boy(<span class="string">"Mark"</span>);<br />
               <span class="comments">// 今天是五月二十日。 </span><br />
               <span class="comments">// 祝亲爱的节日快乐。</span><br />
               <span class="comments">// 我把你的美丽记录在日记里，让文字把你的青春铭记。</span><br />
<span class="comments">// 我把你的笑容粘贴在日记里，让图片把你的活泼记忆。</span><br />
               <span class="comments">// 我把我的照片夹进日记里，让爱情把你的幸福牢系。</span><br />
               <span class="comments">// 对我来说是个重要的时刻，我发现我已经深深爱上了你！</span><br />
<span class="comments">// 当我凝视你的眼，当我听到你的声音。 </span><br />
               <span class="comments">// 当我闻到你秀发上淡淡的清香。 </span><br />
<span class="comments">// </span><br />
               我爱你;<br />
               <span class="comments">//当我感受到我剧烈的心跳，我明白了：</span><br />
               我想你;<br />
               <span class="comments">// 你在我心中最美。 </span><br />
               我想照顾你 <br />
               <span class="comments">// 你是我今生的唯一！</span><br />
               <span class="comments">// 所以我继续等待，我有信心，你会。</span><br />
               <span class="keyword">我会</span> 永远 <span class="keyword">爱你</span>;<br />
               <span class="keyword">一直</span> 爱你 <br />
               <span class="placeholder"/>我有一颗永远不变的心<br />
               <span class="placeholder"/><span class="comments">// 我认为这是一个重要的决定。</span><br />
               <span class="placeholder"/><span class="comments">// 你可以在任何时候决定。</span><br />
               <span class="placeholder"/>爱你 = 想你<br /><br />
               我非常高兴能认识你<br />
           </div>
           <div id="loveHeart">
               <canvas id="garden"></canvas>
               <div id="words">
                   <div id="messages">
                       亲爱的,我已经相爱了：
                       <div id="elapseClock"></div>
                   </div>
                   <div id="loveu">
                       <div class="signature">--Mark</div>
                   </div>
               </div>

               </div>
               </div>
           </div>
</div>
   <div class="bg1">
       <div class="main">
           <footer style="line-height:20px">
<div id="copyright">
<a href='' target="_blank"></a>
<a href="" target="_blank"></a>
<a href="" target="_blank"></a>
</object>
</div>
       </div>
   </div>
</div>

           timeElapse(together);
           setInterval(function () {
               timeElapse(together);
           }, 500);

           adjustCodePosition();
           $("#code").typewriter();
       }
   </script>
   <embed src="http://sisiyan.sinaapp.com/Love.mp3" autostart="true" loop="true" hidden="true"></embed>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

body {
   margin: 0;
   padding: 0;
   background: #FFFFEE;
   font-size: 12px;
   overflow: auto;
}

#mainDiv{
width: 100%;
height: 100%;
}

#loveHeart {
   float: left;
   width:670px;
   height:625px;
}

#garden {
width: 100%;
height: 100%;
}

#elapseClock {
   text-align: right;
   font-size: 18px;
   margin-top: 10px;
   margin-bottom: 10px;
}

#words {
   font-family: "sans-serif";
   width: 500px;
   font-size: 24px;
   color:#666;
}

#messages{
display: none;
}

#elapseClock .digit{
font-family: "digit";
font-size: 36px;
}

#loveu{
   padding: 5px;
   font-size: 22px;
   margin-top: 80px;
   margin-right: 120px;
   text-align: right;
   display: none;
}

#loveu .signature{
   margin-top: 10px;
   font-size: 20px;
   font-style: italic;
}

#clickSound{
display:none;
}

#code {
   float: left;
   width: 440px;
   height: 400px;
   color: #333;
   font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif";
   font-size: 12px;
}

#code .string{
color: #2a36ff;
}

#code .keyword{
color: #7f0055;
font-weight:bold;
}

#code .placeholder{
margin-left:15px;
}

#code .space{
margin-left:7px;
}

#code .comments{
color: #3f7f5f;
}

#copyright{
   margin-top: 10px;
   text-align: center;
   width:100%;
   color:#666;
}

#errorMsg{
   width: 100%;
   text-align: center;
   font-size: 24px;
   position: absolute;
   top: 100px;
   left:0px;
}

#copyright a{
color:#666;
}

...

3.JS

代码如下（节选示例）：

// variables
var $window = $(window), gardenCtx, gardenCanvas, $garden, garden;
var clientWidth = $(window).width();
var clientHeight = $(window).height();

$(function () {
// setup garden
   $loveHeart = $("#loveHeart");
   var offsetX = $loveHeart.width() / 2;
   var offsetY = $loveHeart.height() / 2 - 55;
$garden = $("#garden");
gardenCanvas = $garden[0];
   gardenCanvas.width = $("#loveHeart").width();
gardenCanvas.height = $("#loveHeart").height()
gardenCtx = gardenCanvas.getContext("2d");
gardenCtx.globalCompositeOperation = "lighter";
garden = new Garden(gardenCtx, gardenCanvas);

   $("#content").css("width", $loveHeart.width() + $("#code").width());
   $("#content").css("height", Math.max($loveHeart.height(), $("#code").height()));
   $("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2, 10));
   $("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10));

// renderLoop
setInterval(function () {
garden.render();
}, Garden.options.growSpeed);
});

$(window).resize(function() {
var newWidth = $(window).width();
var newHeight = $(window).height();
if (newWidth != clientWidth && newHeight != clientHeight) {
location.replace(location);
}
});

function getHeartPoint(angle) {
   var t = angle / Math.PI;
   var x = 19.5 * (16 * Math.pow(Math.sin(t), 3));
   var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
   return new Array(offsetX + x, offsetY + y);
}

function showMessages() {
   adjustWordsPosition();
   $('#messages').fadeIn(5000, function() {
       showLoveU();
   });
}

function adjustWordsPosition() {
   $('#words').css("position", "absolute");
   $('#words').css("top", $("#garden").position().top + 195);
   $('#words').css("left", $("#garden").position().left + 70);
}

function adjustCodePosition() {
$('#code').css("margin-top", ($("#garden").height() - $("#code").height()) / 2);
}

function showLoveU() {
$('#loveu').fadeIn(3000);
}

...

五、更多推荐

【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！

Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!

更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/841929

232. Web前端网页制作 520浪漫表白 大学生期末大作业 html+css+js_html+css+js大作业

前言

一、网页概述

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

3.JS

五、更多推荐

232. Web前端网页制作 520浪漫表白大学生期末大作业 html+css+js_html+css+js大作业