实现许愿墙小程序

2022/2/11 20:12:32

编程Tag： 程序 math var div 实现 document box random 许愿

本文主要是介绍实现许愿墙小程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>

这篇关于实现许愿墙小程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

实现许愿墙小程序

相关编程文章