javascript网页设计案例

前端码趣逗士

于 2024-09-02 09:29:01 发布

阅读量159

点赞数 8

文章标签： javascript

本文链接：https://blog.csdn.net/m0_54829066/article/details/141808188

版权

以下为您提供 5 个 JavaScript 在网页设计中的案例：

案例一：动态时钟

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态时钟</title>
</head>

<body>
  <h1>当前时间：<span id="clock"></span></h1>

  <script>
    function updateClock() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      const formattedTime = `${hours}:${minutes}:${seconds}`;
      document.getElementById('clock').innerHTML = formattedTime;
    }

    setInterval(updateClock, 1000);
  </script>
</body>

</html>

案例二：图片轮播

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片轮播</title>
  <style>
    #carousel {
      width: 400px;
      height: 300px;
      overflow: hidden;
    }

    #carousel img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="carousel">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>

  <script>
    let currentImage = 0;
    const images = document.querySelectorAll('#carousel img');

    setInterval(() => {
      images[currentImage].style.display = 'none';
      currentImage = (currentImage + 1) % images.length;
      images[currentImage].style.display = 'block';
    }, 3000);
  </script>
</body>

</html>

案例三：下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>下拉菜单</title>
  <style>
    #dropdown {
      position: relative;
    }

    #dropdownButton {
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }

    #dropdownContent {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    #dropdownContent a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    #dropdown:hover #dropdownContent {
      display: block;
    }
  </style>
</head>

<body>
  <div id="dropdown">
    <button id="dropdownButton">菜单</button>
    <div id="dropdownContent">
      <a href="#">选项 1</a>
      <a href="#">选项 2</a>
      <a href="#">选项 3</a>
    </div>
  </div>

  <script>
    const dropdownButton = document.getElementById('dropdownButton');
    const dropdownContent = document.getElementById('dropdownContent');

    dropdownButton.addEventListener('click', function () {
      if (dropdownContent.style.display === 'block') {
        dropdownContent.style.display = 'none';
      } else {
        dropdownContent.style.display = 'block';
      }
    });
  </script>
</body>

</html>

案例四：表单验证

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单验证</title>
  <style>
    input:invalid {
      border: 2px solid red;
    }

    input:valid {
      border: 2px solid green;
    }
  </style>
</head>

<body>
  <form>
    <label for="username">用户名：</label><br>
    <input type="text" id="username" pattern="[a-zA-Z0-9]{3,10}" required><br>
    <label for="email">电子邮件：</label><br>
    <input type="email" id="email" required><br>
    <input type="submit" value="提交">
  </form>

  <script>
    const usernameInput = document.getElementById('username');
    const emailInput = document.getElementById('email');

    usernameInput.addEventListener('input', function () {
      if (this.validity.patternMismatch) {
        this.setCustomValidity('用户名必须为 3 到 10 个字母或数字');
      } else {
        this.setCustomValidity('');
      }
    });

    emailInput.addEventListener('input', function () {
      if (this.validity.typeMismatch) {
        this.setCustomValidity('请输入有效的电子邮件地址');
      } else {
        this.setCustomValidity('');
      }
    });
  </script>
</body>

</html>

案例五：购物车功能

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid black;
      padding: 10px;
      text-align: left;
    }
  </style>
</head>

<body>
  <h2>购物车</h2>
  <table id="cart">
    <tr>
      <th>商品名称</th>
      <th>价格</th>
      <th>数量</th>
      <th>总价</th>
    </tr>
  </table>

  <script>
    const products = [
      { name: '商品 1', price: 100, quantity: 2 },
      { name: '商品 2', price: 200, quantity: 1 },
      { name: '商品 3', price: 50, quantity: 3 }
    ];

    function updateCart() {
      const cartTable = document.getElementById('cart');
      let total = 0;

      for (const product of products) {
        const row = cartTable.insertRow();
        const nameCell = row.insertCell(0);
        const priceCell = row.insertCell(1);
        const quantityCell = row.insertCell(2);
        const totalCell = row.insertCell(3);

        nameCell.innerHTML = product.name;
        priceCell.innerHTML = product.price;
        quantityCell.innerHTML = product.quantity;
        totalCell.innerHTML = product.price * product.quantity;

        total += product.price * product.quantity;
      }

      const totalRow = cartTable.insertRow();
      const totalCell = totalRow.insertCell(0);
      totalCell.colSpan = 3;
      totalCell.innerHTML = '总计：';
      const totalAmountCell = totalRow.insertCell(3);
      totalAmountCell.innerHTML = total;
    }

    updateCart();
  </script>
</body>

</html>