2024-05-08 js 常见案例
1.表单验证
function validateForm() { var name = document.forms["myForm"]["name"].value; if (name == "") { alert("Name must be filled out"); return false; } // 更多的验证... return true; }
2.DOM 操作
var element = document.getElementById("myElement"); element.textContent = "Hello, World!"; element.style.color = "blue";
3.事件监听
var button = document.getElementById("myButton"); button.addEventListener("click", function() { alert("Button clicked!"); });
4.创建元素
var newDiv = document.createElement("div"); newDiv.textContent = "New div created!"; document.body.appendChild(newDiv);
5.定时器
var count = 0; var timer = setInterval(function() { console.log(count); count++; if (count >= 10) { clearInterval(timer); } }, 1000);
6.获取 URL 参数
function getURLParameter(name) { var url = window.location.href; name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); var results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); }
7.AJAX 请求
var xhr = new XMLHttpRequest(); xhr.open("GET", "https://api.example.com/data", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } }; xhr.send();
8.Cookie 操作
function setCookie(name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/"; } function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; }
9.拖拽元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>拖拽元素</title>
<style>
body {
margin: 0;
}
#draggable {
width: 100px;
height: 100px;
background-color: #1890ff;
position: relative;
cursor: pointer;
}
</style>
</head>
<body>
<div id="draggable"></div>
</body>
</html>
<script>
// 获取需要拖拽的元素
var draggableElement = document.getElementById("draggable");
// 拖拽相关的变量
var isDragging = false;
var currentX, currentY, initialX, initialY, offsetX, offsetY;
// 监听mousedown事件
draggableElement.onmousedown = function (e) {
// 防止默认行为（例如，文本选择）
e.preventDefault();
// 标记为拖拽中
isDragging = true;
// 计算鼠标指针相对于元素的初始位置
offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
// 获取元素当前的偏移量
initialX = parseInt(
window.getComputedStyle(draggableElement).getPropertyValue("left") || "0",
10
);
initialY = parseInt(
window.getComputedStyle(draggableElement).getPropertyValue("top") || "0",
10
);
// 添加mousemove和mouseup事件的监听器到window对象上，这样即使鼠标移动到了元素外部也能继续拖拽
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
};
// 监听mousemove事件
function onMouseMove(e) {
if (!isDragging) return;
// 计算新的位置
currentX = e.clientX - offsetX;
currentY = e.clientY - offsetY;
// 限制拖拽的范围（可选）
// 例如，限制在视口内
currentX = Math.max(
0,
Math.min(currentX, window.innerWidth - draggableElement.offsetWidth)
);
currentY = Math.max(
0,
Math.min(currentY, window.innerHeight - draggableElement.offsetHeight)
);
// 更新元素的位置
draggableElement.style.left = currentX + "px";
draggableElement.style.top = currentY + "px";
}
// 监听mouseup事件
function onMouseUp(e) {
// 标记拖拽结束
isDragging = false;
// 移除mousemove和mouseup事件的监听器
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
}
</script>
10.滚动条监听
// 监听滚动事件 window.addEventListener('scroll', function(event) { // 获取滚动条的垂直位置 var scrollTop = window.pageYOffset || document.documentElement.scrollTop; // 获取滚动条的水平位置（在需要的情况下） var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; // 输出滚动条的位置 console.log('x轴：' + scrollTop);
console.log('y轴：' + scrollLeft);
});
11.1 选项卡（纯css版）：label触发点击控制type=radio的input显示与隐藏
<!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>
/* 隐藏所有选项卡内容 */
.tab-content .tab {
display: none;
}
/* 选中radio时显示对应的选项卡内容 */
#tab1:checked ~ .tab-content #content1,
#tab2:checked ~ .tab-content #content2,
#tab3:checked ~ .tab-content #content3 {
display: block;
}
/* 样式化选项卡按钮 */
.tabs input[type="radio"] {
display: none; /* 隐藏radio input */
}
.tabs label {
display: inline-block;
margin-right: 10px;
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
}
/* 选中状态的选项卡按钮样式 */
.tabs input[type="radio"]:checked + label {
background-color: #eee;
border-bottom: 1px solid #fff; /* 防止底部出现双重边框 */
}
/* 其他可选样式 */
.tab-content {
margin-top: 20px; /* 选项卡内容与选项卡按钮之间的间距 */
}
/* 根据需要添加更多样式 */
</style>
</head>
<body>
<div class="tabs">
<input type="radio" id="tab1" name="tabs" checked />
<label for="tab1">选项卡1</label>
<input type="radio" id="tab2" name="tabs" />
<label for="tab2">选项卡2</label>
<input type="radio" id="tab3" name="tabs" />
<label for="tab3">选项卡3</label>
<div class="tab-content">
<div class="tab" id="content1">
<p>这是选项卡1的内容。</p>
</div>
<div class="tab" id="content2">
<p>这是选项卡2的内容。</p>
</div>
<div class="tab" id="content3">
<p>这是选项卡3的内容。</p>
</div>
</div>
</div>
</body>
</html>
11.2.选项卡（js版）
<!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>
.tab-link {
cursor: pointer;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="tabs">
<button class="tab-link" data-tab="tab1">选项卡1</button>
<button class="tab-link" data-tab="tab2">选项卡2</button>
<button class="tab-link" data-tab="tab3">选项卡3</button>
<div class="tab-content" id="tab1">这是选项卡1的内容</div>
<div class="tab-content" id="tab2">这是选项卡2的内容</div>
<div class="tab-content" id="tab3">这是选项卡3的内容</div>
</div>
</body>
</html>
<script>
// 获取所有的选项卡链接和内容
const tabLinks = document.querySelectorAll(".tab-link");
const tabContents = document.querySelectorAll(".tab-content");
// 为每个选项卡链接添加点击事件监听器
tabLinks.forEach(function (tabLink) {
tabLink.addEventListener("click", function () {
// 移除所有内容块的激活状态
tabContents.forEach(function (tabContent) {
tabContent.classList.remove("active");
});
// 激活对应的选项卡内容
const tabToShow = document.getElementById(tabLink.dataset.tab);
if (tabToShow) {
tabToShow.classList.add("active");
}
});
});
// 如果有的话，激活第一个选项卡的内容
if (tabContents[0]) {
tabContents[0].classList.add("active");
}
</script>
12.轮播图
<!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>
.carousel {
position: relative;
width: 500px;
height: 500px;
margin: 50px auto 0;
border: 1px solid #f2f2f2;
}
.carousel-images {
display: flex;
transition: transform 0.5s ease;
}
.carousel-images img {
width: 500px;
}
/* 隐藏除第一张外的所有图片 */
.carousel-images img:not(:first-child) {
display: none;
}
.prev,
.next {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
border-radius: 50%;
text-align: center;
font-size: 32px;
line-height: 50px;
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-images">
<img
src="https://www.foodiesfeed.com/wp-content/uploads/2023/08/grilled-crispy-pork-with-rice.jpg"
alt="Image 1"
/>
<img
src="https://www.foodiesfeed.com/wp-content/uploads/2023/12/seafood-soup.jpg"
alt="Image 2"
/>
<img
src="https://www.foodiesfeed.com/wp-content/uploads/2023/04/delicious-steak-with-herbs-cut-on-slices.jpg"
alt="Image 3"
/>
<!-- 更多图片... -->
</div>
<div class="prev"><</div>
<div class="next">></div>
</div>
</body>
</html>
<script>
// 获取需要的DOM元素
const carouselImages = document.querySelector(".carousel-images");
const images = carouselImages.querySelectorAll("img");
const prevButton = document.querySelector(".prev");
const nextButton = document.querySelector(".next");
let currentImageIndex = 0;
// 设置下一张图片的显示
function showNextImage() {
// 隐藏当前图片
images[currentImageIndex].style.display = "none";
// 更新索引并显示下一张图片（或第一张，如果当前是最后一张）
currentImageIndex = (currentImageIndex + 1) % images.length;
images[currentImageIndex].style.display = "block";
console.log("设置下一张图片的显示", currentImageIndex);
}
// 设置上一张图片的显示
function showPrevImage() {
// 隐藏当前图片
images[currentImageIndex].style.display = "none";
// 更新索引并显示上一张图片（或最后一张，如果当前是第一张）
currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
images[currentImageIndex].style.display = "block";
console.log("设置上一张图片的显示", currentImageIndex);
}
// 绑定点击事件
prevButton.addEventListener("click", showPrevImage);
nextButton.addEventListener("click", showNextImage);
// 自动播放（可选）
// setInterval(showNextImage, 3000); // 每3秒切换到下一张图片
</script>
13.拖放上传
<!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>
.dropzone {
width: 300px;
height: 200px;
border: 2px dashed #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 10px;
}
#progress {
width: 100%;
background-color: #f3f3f3;
}
</style>
</head>
<body>
<div id="dropzone" class="dropzone">拖放文件到这里</div>
<button id="uploadButton">上传</button>
<div id="progress"></div>
<div id="output"></div>
</body>
</html>
<script>
document
.getElementById("dropzone")
.addEventListener("dragover", function (e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = "copy"; // 显示将要进行的操作
});
document.getElementById("dropzone").addEventListener("drop", function (e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files; // 获取拖放的文件列表
handleFiles(files); // 处理文件（可以包括预览、上传等）
});
document
.getElementById("uploadButton")
.addEventListener("click", function () {
// 在这里，你可能需要从某个地方（如隐藏的input元素）获取文件列表，并调用handleFiles
// 或者，如果文件已经在拖放时处理过并存储在某个地方，可以直接触发上传
});
function handleFiles(files) {
// 遍历文件列表，处理每个文件（例如，显示预览）
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
// 这里只是一个简单的预览示例，你可以根据需要修改
reader.onload = (function (theFile) {
return function (e) {
var span = document.createElement("span");
span.innerHTML = [
'<img class="thumb" width=200px src="',
e.target.result,
'" title="',
escape(theFile.name),
'"/>',
].join("");
document.getElementById("output").insertBefore(span, null);
};
})(file);
// 读取文件内容，当读取完成时，会调用上面定义的onload函数
reader.readAsDataURL(file);
// 在这里可以添加文件上传的代码，使用AJAX或Fetch API发送到服务器
// ...
}
}
</script>
14.实时通信
var socket = new WebSocket("ws://localhost:8080"); socket.onmessage = function(event) { console.log("Server response: " + event.data); }; socket.send("Hello, Server!");
15.左滑弹出窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>左滑弹出窗口</title>
<style>
.container {
position: relative;
width: 100%;
height: 100px;
overflow: hidden;
}
.slider {
width: 100%;
height: 100%;
transition: transform 0.3s ease;
position: relative;
background-color: #ccc;
}
.popup {
position: absolute;
top: 0;
right: -100%; /* 初始位置在容器外部 */
width: 80%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: right 0.3s ease;
}
.show-popup {
right: 0; /* 弹出时位置在容器内部 */
}
</style>
</head>
<body>
<div class="container">
<div class="slider" id="slider">
<!-- 这里是你可以滑动的内容 -->
滑动我
</div>
<div class="popup" id="popup">
<p>这是弹出的窗口内容</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var slider = document.getElementById("slider");
var popup = document.getElementById("popup");
var startX,
slideLength = 100; // 设定滑动阈值，比如100px
slider.addEventListener("touchstart", function (e) {
startX = e.touches[0].clientX;
});
slider.addEventListener("touchmove", function (e) {
e.preventDefault(); // 阻止默认的滚动行为
var currentX = e.touches[0].clientX;
var diff = currentX - startX;
// 如果向左滑动的距离超过了阈值，则显示弹出窗口
if (diff < -slideLength) {
popup.classList.add("show-popup");
// 在这里可以添加阻止进一步滑动或其他逻辑的代码
}
});
// 可能还需要添加touchend事件来处理滑动结束后的逻辑，比如隐藏弹出窗口（如果需要）
// 注意：上面的代码仅处理了向左滑动的简单情况，并且没有处理滑动结束后的逻辑。
// 在实际应用中，你可能需要更复杂的逻辑来处理滑动事件的各个阶段。
});
</script>
</body>
</html>
