JavaScript實現許願牆效果：html
<!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 class="wall">
<!-- <div class="paper">
<p>Lorem ipsum dolor sit amet.</p>
<span class="close">X</span>
</div> -->
<input type="text" class="inpWords" 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 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>
</body>
</html>
HTML + CSS + JavaScript代碼都放在了同一個文件裏瀏覽器
實現功能介紹：app
1.初始化自動生成兩個願望籤dom
2.輸入框失去焦點或者按回車鍵，會生成願望籤ide
3.點擊關閉會刪除願望籤spa
4.能夠拖動願望籤，而且不能拖出可視窗口code
5.根據可視窗口的大小，按比例改變願望簽在可視窗口中的位置htm
展現效果：對象
實現功能5的時候會有些困難，下面講解一下如何獲得比例，以下圖blog
view是瀏覽器可視窗口，newView是瀏覽器放大後的可視窗口，
left是div元素距離瀏覽器左邊的距離，right是div元素距離瀏覽器右邊的距離
newleft是div元素距離瀏覽器放大後左邊的距離，newright是div元素距離瀏覽器放大後右邊的距離
view.width是瀏覽器的可視窗口寬度，newView.width是瀏覽器放大後可視窗口的寬度
咱們能夠獲得如下公式
(newleft + newright) - (left + right) = newView.width - view.width
left和right是按比例放大的，全部瀏覽器放大後增長的寬度，要按比例分配給newleft和newright
因此，
left / (left + right) * (newView.width - view.width) = newleft - left;
因此，
newleft = left / (left + right) * (newView.width - view.width) +left;