18.JavaScript實作許愿墻效果-有解無憂

JavaScript實作許愿墻效果：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 >
        <!-- <div >
            <p>Lorem ipsum dolor sit amet.</p>
            <span >X</span>
        </div> -->
        <input type="text"  placeholder="許個愿吧">
    </div>
    <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 >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>
</body>

</html>