JavaScript (JS)网页设计案例_javascript网页-优快云博客

本文链接：https://blog.youkuaiyun.com/fghyibib/article/details/143686977

JavaScript (JS)网页设计案例

JavaScript (JS) 在网页设计中扮演着极其重要的角色，它不仅能够增强用户体验，还能实现各种动态效果和交互功能。以下是一些使用 JavaScript 实现的网页设计案例，涵盖不同场景和技术栈：

1. 动态导航栏

描述：当用户滚动页面时，导航栏会自动隐藏或显示，同时可能改变样式以适应不同部分的内容。技术：纯 JavaScript 或结合 jQuery。 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态导航栏</title>
<style>
  .navbar {
    background-color: #333;
    color: white;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    transition: top 0.3s;
  }
  .navbar.hide {
    top: -50px;
  }
</style>
</head>
<body>
<div class="navbar" id="myNavbar">导航栏</div>

<script>
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  var navbar = document.getElementById("myNavbar");
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    navbar.classList.add("hide");
  } else {
    navbar.classList.remove("hide");
  }
}
</script>
</body>
</html>

2. 模态框（弹出窗口）

描述：点击按钮后弹出一个模态框，用户可以在其中查看详细信息或进行操作。技术：JavaScript + CSS。 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
  .modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
</style>
</head>
<body>
<button onclick="openModal()">打开模态框</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <p>这是一个模态框。</p>
  </div>
</div>

<script>
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}
</script>
</body>
</html>

3. 图片轮播

描述：展示一系列图片，每张图片按照设定的时间间隔自动切换，也可以通过按钮手动切换。技术：JavaScript + CSS。 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
  .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
  }
  .mySlides {
    display: none;
  }
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
</style>
</head>
<body>
<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="image1.jpg" style="width:100%">
  </div>
  <div class="mySlides fade">
    <img src="image2.jpg" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  slides[slideIndex-1].style.display = "block";  
}
setInterval(function(){ plusSlides(1); }, 3000); // 自动切换
</script>
</body>
</html>

4. 表单验证

描述：在用户提交表单之前，检查输入的有效性，确保所有必填字段都已正确填写。技术：JavaScript。 示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<body>
<form id="myForm" onsubmit="return validateForm()">
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>
  <br><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required>
  <br><br>
  <input type="submit" value="提交">
</form>

<script>
function validateForm() {
  var email = document.getElementById('email').value;
  var password = document.getElementById('password').value;
  if (email === "" || password === "") {
    alert("所有字段必须填写！");
    return false;
  }
  if (!email.includes('@')) {
    alert("请输入有效的电子邮件地址！");
    return false;
  }
  return true;
}
</script>
</body>
</html>

以上案例展示了如何使用 JavaScript 来提升网页的功能性和用户体验。希望这些例子能为您提供一些灵感和帮助。如果您有更多具体的需求或问题，请随时告诉我！