听说今天是七夕，那我们写一个网页开发来庆祝一下

最新推荐文章于 2024-09-24 09:55:00 发布
最新推荐文章于 2024-09-24 09:55:00 发布
阅读量1.6w 收藏 2
点赞数 11
分类专栏： 其他文章 文章标签： css js node nodejs express
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54218263/article/details/119699654
版权

听说今天是七夕，那我们写一个网页开发来庆祝一下！！

在这里插入图片描述

文章目录

一、情况介绍

今天是七夕佳节，是中国传统的情人节，

逢此佳节，博主也来写一个网页开发来庆祝一下七夕，

虽然博主是下图的情况：

在这里插入图片描述

但是，

正是处于这种情况，

才会有闲心来搞一些事情了啦~~

二、项目介绍

本项目中，我们使用了 Node 的 Express 框架，以此作为服务器后端，然后在前段，我们使用模板进行代码的编写，这样可以省去很多不必要的代码了啦。

然后，最终的成果是一个前端再加一个服务器，这里我们没有使用 Git， 只不过使用他来做了一个记录，没有远程仓库。

在这里插入图片描述

三、项目的代码实现

在项目的index.js 中：
（这个是实现Node服务器）

let express = require("express")
let app = express()

let formidable = require("formidable")
let handlebars = require("express3-handlebars").create({defaultLayout: "main"})

app.use(require("body-parser")())

app.use(express.static(__dirname + "/public"))

app.engine("handlebars", handlebars.engine)
app.set("view engine", "handlebars")
app.set("port", process.env.PORT || 3000)

app.get("/end", (req, res)=>{
    res.render("end")
})

// app.get("/thirteenth", (req, res)=>{
    // res.render("thirteenth")
// })

app.get("/thirteenth", (req, res)=>{
    res.render("thirteenth")
})

app.get("/twelfth", (req, res)=>{
    res.render("twelfth")
})

app.get("/eleventh", (req, res)=>{
    res.render("eleventh")
})

app.get("/tenth", (req, res)=>{
    res.render("tenth")
})

app.get("/nineth", (req, res)=>{
    res.render("nineth")
})


app.get("/eighth", (req, res)=>{
    res.render("eighth")
})

app.get("/seventh", (req, res)=>{
    res.render("seventh")
})

app.get("/sixth", (req, res)=>{
    res.render("sixth")
})


app.get("/fifth", (req, res)=>{
    res.render("fifth")
})

app.get("/forth", (req, res)=>{
    res.render("forth")
})

app.get("/third", (req, res)=>{
    res.render("third")
})

app.get("/second", (req, res)=>{
    res.render("second")
})

app.get("/first", (req, res)=>{
    res.render("first")
})

// get / -> home
// app.get("/", (req, res)=>{
//     res.render("home")
// })

app.get("/", (req, res)=>{
    res.render("home")
})

app.use((req, res)=>{
    res.status(404)
    res.render("404")
})


app.use((err, req, res, next)=>{
    console.log(err.static)
    res.static(500)
    res.render("500")
})

app.listen(app.get("port"), ()=>{
    console.log("Express start on http://localhost:" + 
    app.get("port") + 
    ";press Ctrl - C to terminate......")
})

而在 模板 main.handlebrs 中：
（这是一个主模板）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            The Qi Xi Festival
        </title>
        <style type="text/css">
            /*basic reset*/
            *{margin:0;padding:0;}
            body{background:rgb(250, 246, 246);}
            canvas{display:block;}
        </style>
    </head>
    <body>
        {{{body}}}
    </body>
</html>


{{!-- <style type="text/css">
/*basic reset*/
*{margin:0;padding:0;}
body{background:black;}
canvas{display:block;}
</style> --}}

至于在 home.handlebars 中：
（这是主页）

<a href="http://localhost:3000/first/">
    <div style="position: relative;">
        <span style="position: absolute;font-size:xx-large;color:honeydew;">
            Qi Xi (click the window to go on)
        </span>
        <img src="/pictures/qixi01.jpg" style="">
    </div>
</a>

然后，在 后面的一些模板文件中也是类似的，我们此处只展示另外一个模板文件，first.handlebars 中:
（这是第一个图像）

<a href="http://localhost:3000/second/">
    <div style="position: relative;">
        <span style="position: absolute;font-size:xx-large;color:violet;line-height: 1000px;
        vertical-align: middle;">
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;The wind blows in the evening of July
        </span>
        <img src="/pictures/qixi09.png" style="">
    </div>
</a>

最后，还有最后一个 end.handlebars 中：
（这是最后一个图像）

<canvas id="c"></canvas>
<script type="text/javascript">
var c=document.getElementById("c")
var ctx= c.getContext("2d")
c.height=window.innerHeight
c.width=window.innerWidth
var chinese="❤LOVE❤"
chinese=chinese.split("")
var font_size=22
var columns=c.width/font_size
var drops=[]
for(var x=0;x<columns;x++)
    drops[x]=1
function draw(){
    ctx.fillStyle="rgba(0, 0, 0, 0.05)"
    ctx.fillRect(0,0,c.width,c.height)
    ctx.fillStyle="#0F0"
    ctx.font=font_size+"px arial"
    for(var i=0;i<drops.length;i++){
    var text=chinese[Math.floor
(Math.random()*chinese.length)]
ctx.fillText(text,i*font_size,drops[i]*font_size)
if(drops[i]*font_size>c.height&&Math.random()>0.975)
    drops[i]=0
    drops[i]++
    }
}
setInterval(draw,50)
</script>
<audio autoplay="autoplay" loop="loop" preload="auto"
        src="/media/mp3/Two Steps From Hell&Thomas Bergersen-Star Sky.mp3">
            Can not play the media!
</audio>

整个项目的 JSON 文件为：

{
  "name": "qi_xi",
  "version": "1.0.0",
  "description": "qi xi festival",
  "main": "index.js",
  "scripts": {
    "test": "node index.js"
  },
  "repository": {
    "type": "git",
    "url": "now is none"
  },
  "keywords": [
    "671513"
  ],
  "author": "hu yu xuan",
  "license": "ISC"
}

以上就是我们的整个项目的一些代码。

四、项目的核心代码

本项目最核心的代码是服务器的构建，以及最后一个图像的绘制：

服务器：

let express = require("express")
let app = express()

let formidable = require("formidable")
let handlebars = require("express3-handlebars").create({defaultLayout: "main"})

app.use(require("body-parser")())

app.use(express.static(__dirname + "/public"))

app.engine("handlebars", handlebars.engine)
app.set("view engine", "handlebars")
app.set("port", process.env.PORT || 3000)

app.get("/end", (req, res)=>{
    res.render("end")
})

// app.get("/thirteenth", (req, res)=>{
    // res.render("thirteenth")
// })

app.get("/thirteenth", (req, res)=>{
    res.render("thirteenth")
})

app.get("/twelfth", (req, res)=>{
    res.render("twelfth")
})

app.get("/eleventh", (req, res)=>{
    res.render("eleventh")
})

app.get("/tenth", (req, res)=>{
    res.render("tenth")
})

app.get("/nineth", (req, res)=>{
    res.render("nineth")
})


app.get("/eighth", (req, res)=>{
    res.render("eighth")
})

app.get("/seventh", (req, res)=>{
    res.render("seventh")
})

app.get("/sixth", (req, res)=>{
    res.render("sixth")
})


app.get("/fifth", (req, res)=>{
    res.render("fifth")
})

app.get("/forth", (req, res)=>{
    res.render("forth")
})

app.get("/third", (req, res)=>{
    res.render("third")
})

app.get("/second", (req, res)=>{
    res.render("second")
})

app.get("/first", (req, res)=>{
    res.render("first")
})

// get / -> home
// app.get("/", (req, res)=>{
//     res.render("home")
// })

app.get("/", (req, res)=>{
    res.render("home")
})

app.use((req, res)=>{
    res.status(404)
    res.render("404")
})


app.use((err, req, res, next)=>{
    console.log(err.static)
    res.static(500)
    res.render("500")
})

app.listen(app.get("port"), ()=>{
    console.log("Express start on http://localhost:" + 
    app.get("port") + 
    ";press Ctrl - C to terminate......")
})

最后一个图像的绘制

<canvas id="c"></canvas>
<script type="text/javascript">
var c=document.getElementById("c")
var ctx= c.getContext("2d")
c.height=window.innerHeight
c.width=window.innerWidth
var chinese="❤LOVE❤"
chinese=chinese.split("")
var font_size=22
var columns=c.width/font_size
var drops=[]
for(var x=0;x<columns;x++)
    drops[x]=1
function draw(){
    ctx.fillStyle="rgba(0, 0, 0, 0.05)"
    ctx.fillRect(0,0,c.width,c.height)
    ctx.fillStyle="#0F0"
    ctx.font=font_size+"px arial"
    for(var i=0;i<drops.length;i++){
    var text=chinese[Math.floor
(Math.random()*chinese.length)]
ctx.fillText(text,i*font_size,drops[i]*font_size)
if(drops[i]*font_size>c.height&&Math.random()>0.975)
    drops[i]=0
    drops[i]++
    }
}
setInterval(draw,50)
</script>
<audio autoplay="autoplay" loop="loop" preload="auto"
        src="/media/mp3/Two Steps From Hell&Thomas Bergersen-Star Sky.mp3">
            Can not play the media!
</audio>

五、项目展示

主页如下：

在这里插入图片描述
（点击屏幕会继续向后进行继续）

其他的页面：

图
1

在这里插入图片描述

图
2

在这里插入图片描述

图
3

在这里插入图片描述

图
4

在这里插入图片描述

图
5

在这里插入图片描述

图
6

在这里插入图片描述

结尾的页面：

（

这个四无限的屏幕刷屏显示， 同时还配有音乐，我配的是Star Sky

）
在这里插入图片描述

六、总结

如果需要源代码的话，可以在我的资源哪里进行下载了啦：
https://download.csdn.net/download/m0_54218263/21071555?spm=1001.2014.3001.5503

在这里插入图片描述

啊，虽然博主做了一个七夕的小项目，但是呢，又没有人可以送，于是就在这里进行分享了啦。

曾经，博主还在一直思考，为什么博主这么菜，什么都不会，也没有npy，后来。。。。。。

在这里插入图片描述

同时，常常记得另一个博主的TCP讲解：

在这里插入图片描述
。。。。。

在这里插入图片描述
最后，谢谢大家的阅读了

谢谢支持！！

（づ￣3￣）づ╭❤～

喜欢的话就留下来点个赞呗~~

hhh江月
关注
专栏目录
七夕庆祝活动以及表白的代码
08-14
七夕庆祝活动以及表白的代码，这是制作了一个完整的网页了啦。
HTML5七夕情人节表白网页制作【一生守护】HTML+CSS+JavaScript
HTML网页设计
07-24 3037
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏 看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。......
七夕情人节：用HTML和CSS打造一个浪漫的网页.pdf
08-11
七夕情人节html代码通过以上步骤，我们成功创建了一个简单而浪漫的七夕情人节网页。这个网页不仅可以展示你的爱意，还可以与爱人分享美好的瞬间。你可以根据自己的需求进一步扩展功能，比如添加更多的图片、留言的...
七夕表白8个网页源代码合集.zip
08-07
对于学习Web开发的人来说，这是一个很好的实践案例，可以从中学习到如何结合这些技术来创造富有情感和交互性的网页。同时，对于想要在七夕给另一半一个惊喜的人来说，这些网页模板也是一个不错的选择，只需根据自己...
七夕表白网页源代码合集
09-19
在即将到来的七夕节，为心爱的人准备一个特别的表白网页无疑是一种充满创意和浪漫的方式。这个"七夕表白网页源代码合集"包含了设计精美的网页模板和相关的编程资源，可以帮助你打造出一个既有视觉冲击力又带有情感...
PHP实例开发源码—php七夕情人节表白系统网页版.zip
11-23
在本压缩包“PHP实例开发源码—php七夕情人节表白系统网页版.zip”中，包含了一个基于PHP语言实现的七夕情人节表白系统的源代码。这个系统作为一个互动的网页应用，旨在为用户在特殊的节日里提供一个创新且有趣的...
CSS概览
qq_73270720的博客
09-18 1364
cascading style css 层叠样式表由W3C制定的网页元素定义规则。
uniapp沉浸式导航栏+自定义导航栏组件
chu396815830的博客
09-19 1004
uniApp 中实现沉浸式导航栏和自定义导航栏组件。
CSS实现文本溢出省略号或完整显示
码农研究僧的博客
09-19 1256
文本内容超出容器宽度的问题，为了保持页面布局的整洁，通常会使用省略号来隐藏多余的内容 一共有两种方式： 设定省略号 完整展示
CSS中的多种关系选择器
m0_74742670的博客
09-20 560
选择进更E元素后的F元素，用+号来表示，选择相邻的第一个兄弟元素。选择E元素之后的所有兄弟元素F，用~符号表示。子元素F，对更深一层的元素不起作用，用>符号表示。选择所有被E元素包含的F元素，中间用空格隔开。选择所有作为E元素的。
html外部链接css怎么引用
weixin_43187635的博客
09-21 287
在 HTML 文件中，可以通过 标签引用外部的 CSS 文件，从而将样式与结构分离。这个标签通常放在 HTML 文档的 部分，来确保在页面加载时样式能够正确应用。href=“styles.css”：指定外部 CSS 文件的路径，这里是相对路径 styles.css，也可以使用绝对路径或 URL。type=“text/css”：指定文件类型为 CSS（现在可以省略，默认就是 CSS）。这样，HTML 页面中的所有元素都会根据 styles.css 文件中的样式规则进行渲染。
CSS的背景属性
m0_74742670的博客
09-20 637
元素的背景是元素的总大小，包括填充和边界（不包括外边距）默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小，从图像的左上角显示元素的那部分。percenbtage: 设置计算新颖位置区域的百分比，第一个为宽，第二个值为高，如果只设置一个值，则另一个值为auto。length: 设置背景图片的宽度和高度，第一个值为宽度，第二个值为高度，如果只设置一个值，则另一个值为auto。设置背景图像的起始位置，器默认值为0%，0%
css实现自定义静态进度条-vue2
最新发布
freedms的博客
09-24 237
【代码】css实现自定义静态进度条-vue2。
CSS的字体属性
m0_74742670的博客
09-19 543
100~900： 定义由细到粗，400等同于默认，700等同于bold。lighter: 定义更细的字符。设置文本的字体大小（单位px)bolder: 定义更粗的字符。font-weight属性。bold: 定义粗体文字。italic: 定义斜体。normal:默认粗细。normal: 默认值。
CSS基本概念以及CSS的多种引入方式
m0_74742670的博客
09-19 646
当样式需要应用于多个页面时，外部样式表将时理想的选择，在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。当单个文档需要特殊的样式时，应该使用内部样式表，你可以使用<style> </style>标签在文档的<head> 标签内定义内部样式表。CSS的文件后缀为.css，CSS用于HTML文档中元素样式的定义。使用内联样式，你需要在相关的标签使用样式style属性，style属性可以包含任何CSS属性。注意：单个页面的CSS代码具有统一性和规划性，便于维护，但时在多个页面之间容易混乱。
CSS调整背景
weixin_74261199的博客
09-16 2553
函数指定，图片的位置可以是本地路径，也可以是网络资源路径。注意：设置图像坐标时，一定要把图像设置为不重复平铺，即。正如刚刚只设置了背景图片，没有设置重复平铺方式，那么。不然图片平铺之后看不出背景图片的位置。设置背景图的起始x坐标，设置背景图的起始y坐标。
CSS的文本属性
m0_74742670的博客
09-20 400
规定添加到文本的修饰，下划线，上划线，删除线等。captialize: 定义每个单词开头大写。规定文本块中首航文本的缩进（单位px）text-decorration属性。left: 文本居左对齐（默认值)line-through: 删除线。uppercase: 定义全部大写。lowercase: 定义全部小写。text-transtorm属性。underline：下划线。overline： 上划线。text-indent属性。text-align属性。指定文本的水平对齐方式。right: 居右对齐。
HTML | 外部引入 CSS 的2种方式：link和@import有什么区别？
青春木鱼的博客
09-18 471
外部引入 CSS 有2种方式，link 和 @import。就结论而言，强烈建议使用 link ，慎用 @import 方式。
【CSS】变量的声明与使用
千里之行，始于足下
09-18 439
css中声明变量，以及变量的使用；root伪类选中根元素，在其中定义变量
HTML5七夕表白网页：3D雪花相册源码
这个HTML5项目是一个集实用性与创新性于一体的前端开发学习资源，它展示了如何利用现代Web技术创建出互动性强、视觉效果丰富的网页，对于学习和实践Web前端开发的初学者或学生来说，是一份非常有价值的参考资料。
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hhh江月

您的鼓励将是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值