实现许愿墙小程序

最新推荐文章于 2024-08-04 17:32:40 发布

2485695542

最新推荐文章于 2024-08-04 17:32:40 发布

阅读量573

点赞数

CC 4.0 BY-SA版权

文章标签： css html javascript

本文链接：https://blog.youkuaiyun.com/SikML/article/details/122887163

本文将指导你如何使用HTML、CSS和JavaScript实现一个功能齐全的许愿墙小程序。通过创建动态交互界面，用户可以发布、查看和管理他们的愿望，同时体验到美观的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
}

body,
p {
    margin: 0;
}

.paper {
    width: 170px;
    height: 170px;
    background: rgb(97, 229, 238);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 20px;
    position: fixed;
    left: 100px;
    top: 100px;
    cursor: move;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    opacity: 0.4;
    
}

.paper span {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 2px;
    color: white
}

input {
    position: fixed;
    width: 300px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #aaa;
    font-size: 20px;
    border-radius: 5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 30px;
}
</style>

<body>
    <div id="container">
        <div class="paper">
            <span>x</span>
        </div>
    </div>
    <input type="text" placeholder="请输入你的愿望">
    <script>
        var box = document.getElementById('container');
        var ipt = document.getElementsByTagName('input')[0];
        var z = 1
            //最大left等于可视区域减去愿望签的宽度
        var maxLeft = document.body.scrollWidth - 170
            //最大top等于可视区域减去愿望签的高度减去input高度
        var maxTop = document.body.scrollHeight - 170 - 100;
        ipt.onkeydown = function(e) {
            if (e.key === 'Enter') {
                var div = document.createElement("div")
                div.className = "paper"
                div.innerHTML = ` <span>x</span>${ipt.value}`
                    // 许愿签背景色与位置
                div.style.background = `rgb(${Math.random() * 225},${Math.random() * 225},${Math.random() * 225}`

                div.style.left = Math.floor(Math.random() * maxLeft) + 'px'
                div.style.top = Math.floor(Math.random() * maxTop) + 'px'
                box.appendChild(div)
            }
        }
        box.onclick = function(e) {
            if (e.target.tagName == "SPAN") {
                e.target.parentElement.remove()
            }
        }
    </script>
</body>

</html>