你瞅啥呢

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>
复制代码

 

posted @   叶乘风  阅读(94)  评论(0)  编辑  收藏  举报
相关博文：
· 前端常见面试题汇总（js篇）
· 2024-11-13 uniapp自定义全局弹窗并可以通过uni来调用【转载】
· 千锋JavaScript学习笔记
· js学习1
· js 常用命令
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
点击右上角即可分享
微信分享提示