简易许愿墙

原创于 2022-01-21 13:19:26 发布 · 735 阅读
2 ·
CC 4.0 BY-SA版权
文章标签：
#javascript #开发语言 #ecmascript
上次学明白了拖拽那现在就该整个大的了,可拖拽可删除也有键盘事件的许愿墙.
算是集我今年所学了
接下来是大概效果
简单粗暴也不失美观,这不就好起来了
然后是代码部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body p {
            margin: 0;
        }

        .paper {
            position: fixed;
            left: 200px;
            top: 200px;
            width: 200px;
            height: 200px;
            padding: 20px;
            background: yellow;
            border-radius: 5px;
            box-sizing: border-box;
            cursor: pointer;
        }

        .close {
            display: block;
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 50%;
            position: absolute;
            top: 5px;
            right: 5px;
            text-align: center;
            background: #008c8c;
        }

        .inpWords {
            width: 300px;
            height: 50px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            padding: 20px;
            position: fixed;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 10px;
            line-height: 50px;
            font-size: 20px;
        }
    </style>
</head>

<body>
<div class="wall">
    <input type="text" class="inpWords" placeholder="许个愿吧">
</div>
</body>
<script>
    var paperWidth = 200,
        paperHeight = 200; //愿望签的宽度和高度
    var zIndex = 1; //愿望签层叠关系值
    var viewWidth = document.documentElement.clientwidth, //记录初始化时浏览器可视窗口的宽度
        viewHeight = document.documentElement.clientHeight; //记录初始化时浏览器可视窗口的高度
    var hope = document.querySelector(".inpWords");
    var wall = document.querySelector(".wall");

    hope.onblur = function () { //输入框失去焦点，创建愿望签
        createHope(hope.value);
    }

    hope.onkeydown = function (e) { //按下回车键也可以创建愿望签
        if (e.key === "Enter") {
            createHope(hope.value);
        }
    }

    window.onmousedown = function (e) { //为愿望签注册鼠标事件
        var divHope = getHopeDiv(e.target); //获取到点击的愿望签的dom对象
        if (!divHope) { //点击的不是愿望签
            return;
        }
        divHope.style.zIndex = zIndex; //拖拽的愿望签可以覆盖其他愿望签
        zIndex++;
        var div = window.getComputedStyle(divHope);
        var hopeLeft = parseFloat(div.left);
        var hopeTop = parseFloat(div.top);
        var pageX = e.pageX;
        var pageY = e.pageY;
        window.onmousemove = function (e) { //移动愿望签
            var disX = e.pageX - pageX;
            var disY = e.pageY - pageY;
            var newLeft = hopeLeft + disX;
            var newTop = hopeTop + disY;

            //愿望签移动的边界限制，不能超出浏览器视口
            if (newLeft < 0) { //最左
                newLeft = 0;
            }
            if (newLeft > document.documentElement.clientWidth - paperWidth) { //最右
                newLeft = document.documentElement.clientWidth - paperWidth; //浏览器视口宽度 - 愿望签宽度
            }
            if (newTop < 0) { //最上
                newTop = 0;
            }
            if (newTop > document.documentElement.clientHeight - paperHeight - 80) { //最下
                newTop = document.documentElement.clientHeight - paperHeight -
                    80; //浏览器视口高度 - 愿望签高度 - 底部许愿输入框占用的一定高度80
            }
            divHope.style.left = newLeft + "px";
            divHope.style.top = newTop + "px";
        }

        window.onmouseup = window.onmouseleave = function () { //鼠标按键抬起或离开愿望签，愿望签不在移动
            window.onmousemove = null;
        }

    }

    //注册点击关闭愿望签事件
    window.onclick = function (e) {
        if (e.target.parentElement && e.target.parentElement.className === "paper" && e.target.tagName ===
            "SPAN") {
            e.target.parentElement.remove();
        }
    }

    //愿望签的位置随着浏览器可视窗口大小改变
    window.onresize = function () {
        var viewDisX = document.documentElement.clientWidth - viewWidth, //记录浏览器可视宽度的改变量
            viewDisY = document.documentElement.clientHeight - viewHeight; //记录浏览器可视高度的改变量

        //所有的愿望签都要重新调整位置
        for (var i = 0; i < wall.children.length; i++) {
            var hope = wall.children[i];
            var left = parseFloat(hope.style.left); //获取浏览器尺寸改变前，愿望签左上角距离浏览器左边边界的距离
            var right = viewWidth - paperWidth - left; //获取浏览器尺寸改变前，愿望签右下角距离浏览器右边边界的距离
            var newLeft = left + left / (left + right) * viewDisX; //新的left值 等于之前的left值+按比例变化的值
            hope.style.left = newLeft + "px";

            var top = parseFloat(hope.style.top); //获取浏览器尺寸改变前，愿望签左上角距离浏览器上边边界的距离
            var bottom = viewHeight - paperHeight - top; //获取浏览器尺寸改变前，愿望签右下角距离浏览器下边边界的距离
            var newTop = top + top / (top + bottom) * viewDisY;//新的top值 等于之前的top值+按比例变化的值
            hope.style.top = newTop + "px";
        }

        viewWidth = document.documentElement.clientWidth; //将当前浏览器可视宽度覆盖之前的值
        viewHeight = document.documentElement.clientHeight; //将当前浏览器可视高度覆盖之前的值
    }

    //创建愿望签
    function createHope(words) {
        if (words) {
            var divWall = document.querySelector(".wall");
            var divHope = document.createElement("div");
            divHope.className = "paper";
            divHope.innerHTML = `<p>${words}</p><span class="close">X</span>`;
            var maxLeft = document.documentElement.clientWidth - paperWidth; //浏览器视口宽度 - 愿望签宽度
            var maxTop = document.documentElement.clientHeight - paperHeight -
                80; //浏览器视口高度 - 愿望签高度 - 底部许愿输入框占用的一定高度80
            divHope.style.background =
                `rgb(${getRandom(100, 200)},${getRandom(100, 200)},${getRandom(100, 200)})`; //愿望签背景色随机生成
            divHope.style.left = getRandom(0, maxLeft) + "px";
            divHope.style.top = getRandom(0, maxTop) + "px";

            divWall.appendChild(divHope);
            hope.value = "";
        }
    }

    //获得一个[min, max]区间的随机数
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max + 1 - min)) + min;
    }

    //获取到鼠标点击的愿望签dom对象
    function getHopeDiv(dom) {
        if (dom.className === "paper") { //事件源是愿望签的div
            return dom;
        } else if (dom.parentElement && dom.parentElement.className === "paper" && dom.tagName ===
            "P") { //点击的是div里面的P元素
            return dom.parentElement;
        }
    }

    //初始化的时候，先创建两个愿望签
    function initWall() {
        var hopeArray = ["梦想成真", "身体健康"];
        hopeArray.forEach(function (item) {
            createHope(item);
        });
    }

    initWall();
</script>
</html>
本来还想试试别的形状,想想算了太麻烦就这样吧