当你想实现点击并拖动某个dic元素来调整其大小的时候，我们可以通过如下代码(可直接复制粘贴运行)实现效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Resizable Element</title><style>.resizable {width: 200px;height: 200px;background-color: lightgray;border: 1px solid #ccc;resize: both;overflow: auto;}</style>
</head>
<body><div class="resizable"><!-- 这里放置需要调整大小的内容 --></div><script>document.addEventListener('mousedown', function(event) {if (event.target.classList.contains('resizable')) {event.preventDefault();event.target.classList.add('resizing');const initialX = event.clientX;const initialY = event.clientY;const mouseMoveListener = function(e) {const width = event.target.offsetWidth + (e.clientX - initialX);const height = event.target.offsetHeight + (e.clientY - initialY);event.target.style.width = width + 'px';event.target.style.height = height + 'px';};const mouseUpListener = function() {event.target.classList.remove('resizing');event.target.style.userSelect = 'auto';event.target.style.cursor = 'auto';document.body.style.cursor = 'auto';document.removeEventListener('mousemove', mouseMoveListener);document.removeEventListener('mouseup', mouseUpListener);};event.target.style.userSelect = 'none';event.target.style.cursor = 'nwse-resize';document.body.style.cursor = 'nwse-resize';document.addEventListener('mousemove', mouseMoveListener);document.addEventListener('mouseup', mouseUpListener);}});</script>
</body>
</html>
注意！！！：
但在实际开发运用中，上面的代码是远远不够的，运行过上面代码的伙伴肯定能感觉到效果是不理想的，只能实现基本的调整页面大小的需求，而在调整页面大小的过程中是不灵活的，所以我们可以通过以下方式得到改善——添加手柄：在下面的优化代码中，我们使用JavaScript 实现了调整大小的功能。当用户点击并拖动位于 .resize-handle 类名的元素时，会触发相应的事件处理函数，从而实现调整大小的效果。这样就能够更灵活地控制调整大小的行为和效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Resizable Element</title><style>.resizable {width: 200px;height: 200px;background-color: lightgray;border: 1px solid #ccc;overflow: auto;position: relative;}.resize-handle {width: 10px;height: 10px;background-color: #000;position: absolute;bottom: 0;right: 0;cursor: nwse-resize;}</style>
</head>
<body><div class="resizable"><!-- 这里放置需要调整大小的内容 --><div class="resize-handle"></div></div><script>const resizableElement = document.querySelector('.resizable');const resizeHandle = resizableElement.querySelector('.resize-handle');let isResizing = false;let initialX;let initialY;let originalWidth;let originalHeight;resizeHandle.addEventListener('mousedown', function(event) {event.preventDefault();isResizing = true;initialX = event.clientX;initialY = event.clientY;originalWidth = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('width'));originalHeight = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('height'));document.addEventListener('mousemove', resize);document.addEventListener('mouseup', stopResize);});function resize(event) {if (isResizing) {const width = originalWidth + (event.clientX - initialX);const height = originalHeight + (event.clientY - initialY);resizableElement.style.width = width + 'px';resizableElement.style.height = height + 'px';}}function stopResize() {isResizing = false;document.removeEventListener('mousemove', resize);document.removeEventListener('mouseup', stopResize);}</script>
</body>
</html>
最后一句：代码都是可直接运行的，所以大家可以先复制代码到自己电脑的编辑器上面运行看效果，是否能达到自己的预期需求哦！
+超声波测距模块+STC89C52)
)
)
