<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body,
html {
/* height: 3000px; */
background: url(./images/wall.png) no-repeat;
background-size: 100%;
}
.wall {
width: 1000px;
margin: auto;
padding-top: 20px;
}
.wall .title {
width: 100%;
height: 50px;
font-size: 40px;
color: black;
line-height: 50px;
/* border: 1px solid black; */
text-align: center;
background-color: rgba(247, 132, 132, 0.7);
border-radius: 10px;
box-shadow: 0px 0px 10px black;
}
.wall .wall_top {
width: 100%;
height: 400px;
/* border: 1px solid black; */
margin-top: 10px;
background-color: rgba(247, 132, 132, 0.7);
border-radius: 20px;
box-shadow: 0px 0px 10px black;
position: relative;
overflow: hidden;
background: url(./images/540f3973a764336480cff7952ed43027.png)no-repeat bottom left;
background-size: 400px;
}
.wall .wall_bottom {
width: 100%;
height: 40px;
font-size: 20px;
display: flex;
justify-content: left;
box-sizing: border-box;
margin-top: 10px;
line-height: 30px;
padding-left: 25px;
background-color: rgba(247, 132, 132, 0.7);
border-radius: 10px;
padding-top: 4px;
box-shadow: 0px 0px 10px black;
}
.wall .wall_bottom input {
border-radius: 5px;
border: 1px solid black;
height: 30px;
box-sizing: border-box;
vertical-align: middle;
padding-left: 5px;
}
.wall .inp1 {
width: 100px;
margin-right: 50px;
}
.wall .inp2 {
width: 500px;
margin-right: 25px;
}
.wall .btn {
width: 100px;
height: 30px;
border-radius: 10px;
border: 2px solid red;
border-radius: 5px;
background-color: salmon;
cursor: pointer;
opacity: .7;
box-shadow: 0px 0px 10px black;
font-size: 20px;
vertical-align: middle;
}
.wall_top .wall_p {
position: absolute;
left: 1000px;
top: 0;
color: white;
height: 30px;
display: flex;
flex-wrap: nowrap;
z-index: 2;
}
.wall .wall_top img {
height: 30px;
width: 30px;
border-radius: 50%;
margin-right: 10px;
}
.wall .wall_top span {
line-height: 30px;
white-space: nowrap;
margin-right: 5px;
}
.wall_top .memo {
border: 1px solid black;
width: 200px;
min-height: 150px;
background-color: rgba(247, 132, 132, 0.7);
position: absolute;
left: 100px;
top: 100px;
border-radius: 10px;
box-sizing: border-box;
padding: 10px;
box-shadow: 0px 0px 10px black;
}
.wall_top .memo>.content {
padding-left: 10px;
}
.wall_top .memo>.time {
color: black;
font-size: 12px;
font-weight: bold;
}
.wall_top .memo>.name {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wall">
<!-- 许愿墙的标题 -->
<p class="title">2023 新年许愿墙</p>
<div class="wall_top">
<!-- 弹幕： -->
<!-- <p class="wall_p">
<img src="./images/xiaoxin_4.jpg" alt="">
<span></span>
</p> -->
<!-- 便签memo -->
<!-- <div class="memo">
<p class="time">2022-1-17</p>
<p class="content">新年快乐</p>
<p class="name">陈小龙</p>
</div> -->
</div>
<!-- 输入祝福语 -->
<div class="wall_bottom">
<p> <span>姓名：</span> <input type="text" placeholder="请留名" class="inp1"></p>
<p> <span>新年愿望：</span> <input type="text" placeholder="请输入祝福语" class="inp2"></p>
<p><button class="btn">发送</button></p>
</div>
</div>
<script>
let oBtn = document.querySelector('.btn');
let oCont = document.querySelector('.wall_top')
let oInp2 = document.querySelector('.inp2')
let oInp1 = document.querySelector('.inp1')
oBtn.onclick = function() {
if (oInp1.value.trim() != '' && oInp2.value.trim() != '') {
var oP = document.createElement('p')
var oM = document.createElement('div')
oP.className = 'wall_p'
oM.className = 'memo'
oCont.appendChild(oP)
oCont.appendChild(oM)
//增加弹幕
oP.innerHTML = `<img src="./images/xiaoxin_4.jpg" alt="">
<span style="color: black; font-size: 12px;font-weight: bold;">${oInp1.value}</span>
<span>:</span>
<span>${oInp2.value}</span>
`
//增加便签
oM.innerHTML = `
<p class="time" >${nowdate()}</p>
<p class="content">${oInp2.value}</p>
<p class="name">${oInp1.value}</p>
`
oP.style.top = ran(0, oCont.clientHeight - oP.clientHeight) + 'px'
oM.style.top = ran(0, oCont.clientHeight - oM.clientHeight) + 'px'
oM.style.left = ran(0, oCont.clientWidth - oM.clientWidth) + 'px'
move(oP, -oP.clientWidth)
oP.style.color = rancolor();
oM.style.color = rancolor();
// oInp2.value = null
} else {
alert('输入不能为空哦')
}
}
//封装随机数
function ran(min, max) {
return parseInt(Math.random() * (max - min) + min)
}
//封装随机颜色
function rancolor() {
var r = ran(0, 256)
var g = ran(0, 256)
var b = ran(0, 256)
return `rgb(${r},${g},${b})`
}
console.log(rancolor());
// console.log(ran(0, 256));
//封装弹幕移动的距离
function move(ele, end) {
var second = 3
var t = setInterval(function() {
var eLeft = parseInt(getComputedStyle(ele).left);
ele.style.left = eLeft - second + 'px'
if (eLeft - second <= end) {
clearInterval(t)
ele.remove();
console.log(2);
}
console.log(1);
}, 50)
}
//封装获取电脑的日期，调整格式
function nowdate() {
var res = ""
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var
HTML新年许愿墙代码，网页版春节许愿墙代码，兔年许愿墙代码
版权申诉
5星 · 超过95%的资源 41 浏览量
2022-12-30
09:12:29
上传
评论 3
收藏 6.24MB ZIP 举报 
funcss.zip （13个子文件） 
funcss images 
fc3f9eda3a81060581607e747c56ee2b.png 1.33MB
background.jpg 212KB 540f3973a764336480cff7952ed43027.png 1.95MB xiaoxin_3.jpg 89KB xiaoxin_1.jpg 43KB xiaoxin_4.jpg 52KB wall.png 1.04MB bk.png 35KB images_xiaoxin.jpg 21KB xiaoxin_2.jpg 43KB 7da21092de33e16c58b69f58327dd5c7.png 787KB card_1.jpg 785KB
hopewall.html 8KB
- 1
- 2
- 3
前往页