“巨大的”橡皮鸭特卖 - Javascript (1)

📌 相关文章

📜 “巨大的”橡皮鸭特卖 - Javascript (1)

📅 最后修改于: 2023-12-03 15:35:51.515000 🧑 作者: Mango

“巨大的”橡皮鸭特卖 - Javascript

在这个项目中，我们将使用Javascript来创建一个简单的页面，以展示一个“巨大的”橡皮鸭的特卖活动。该页面将实现以下功能：

显示橡皮鸭的图片和描述
显示橡皮鸭的原价和特价
使用计时器显示距离特卖结束的时间
实现购买按钮，可以加入购物车

技术栈

HTML
CSS
Javascript

前置知识

HTML基础
CSS基础
Javascript基础

实现步骤

1. HTML部分

创建一个<div>元素作为页面容器
在该容器中创建一个<img>元素，用于显示橡皮鸭的图片
在该容器中创建一个<p>元素，用于显示橡皮鸭的描述
在该容器中创建一个<span>元素，用于显示橡皮鸭的原价
在该容器中创建一个<span>元素，用于显示橡皮鸭的特价
在该容器中创建一个<span>元素，用于显示距离特卖结束的时间
在该容器中创建一个<button>元素，作为购买按钮

<div class="duck">
  <img src="duck.jpg">
  <p>这是一只巨大的橡皮鸭，适合在浴缸里使用。</p>
  <span class="price">原价：¥199.99</span>
  <span class="price">特价：¥99.99</span>
  <span class="timer">距离特卖结束还剩：1天3小时30分钟</span>
  <button onclick="addToCart()">加入购物车</button>
</div>

2. CSS部分

为页面容器设置一个合适的宽度和高度
让图片和描述在容器内左对齐
让原价和特价分别显示在容器内的左上角和右上角
让计时器显示在容器内的底部
定义购买按钮的样式

.duck {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  text-align: left;
  padding: 20px;
  position: relative;
}

.duck img {
  float: left;
  margin-right: 20px;
}

.duck p {
  margin: 0;
  font-size: 20px;
}

.duck .price:first-child {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 24px;
}

.duck .price:last-child {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 36px;
  color: red;
  font-weight: bold;
}

.duck .timer {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 18px;
}

.duck button {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #FFB6C1;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.duck button:hover {
  background-color: #FF69B4;
}

3. Javascript部分

显示计时器

我们可以使用Javascript的setTimeout()函数来实现一个简单的计时器。我们计算出距离特卖结束的毫秒数，然后将其转换成天、小时、分、秒的格式，最后将其显示在页面上。

function showTimer() {
  var endTime = Date.parse("2022-01-01T00:00:00");
  var now = new Date().getTime();
  var delta = endTime - now;
  var days = Math.floor(delta / (1000 * 60 * 60 * 24));
  var hours = Math.floor((delta % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((delta % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((delta % (1000 * 60)) / 1000);
  var timer = document.querySelector(".timer");
  timer.innerHTML = "距离特卖结束还剩：" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
  setTimeout(showTimer, 1000);
}

加入购物车

我们给购买按钮添加一个onclick事件，在点击时调用一个addToCart()函数。该函数会将商品信息添加到购物车中，并弹出一个提示框。

function addToCart() {
  var duck = {
    name: "巨大的橡皮鸭",
    price: 99.99,
    quantity: 1
  }
  var cart = JSON.parse(localStorage.getItem("cart")) || [];
  cart.push(duck);
  localStorage.setItem("cart", JSON.stringify(cart));
  alert("商品已添加到购物车。");
}

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>巨大的橡皮鸭特卖</title>
  <style>
    .duck {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      text-align: left;
      padding: 20px;
      position: relative;
    }

    .duck img {
      float: left;
      margin-right: 20px;
    }

    .duck p {
      margin: 0;
      font-size: 20px;
    }

    .duck .price:first-child {
      position: absolute;
      left: 20px;
      top: 20px;
      font-size: 24px;
    }

    .duck .price:last-child {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 36px;
      color: red;
      font-weight: bold;
    }

    .duck .timer {
      position: absolute;
      bottom: 20px;
      left: 20px;
      font-size: 18px;
    }

    .duck button {
      display: block;
      width: 100%;
      padding: 10px;
      border: none;
      background-color: #FFB6C1;
      color: white;
      font-size: 20px;
      cursor: pointer;
    }

    .duck button:hover {
      background-color: #FF69B4;
    }
  </style>
</head>
<body>
<div class="duck">
  <img src="duck.jpg">
  <p>这是一只巨大的橡皮鸭，适合在浴缸里使用。</p>
  <span class="price">原价：¥199.99</span>
  <span class="price">特价：¥99.99</span>
  <span class="timer">距离特卖结束还剩：1天3小时30分钟</span>
  <button onclick="addToCart()">加入购物车</button>
</div>
<script>
  function showTimer() {
    var endTime = Date.parse("2022-01-01T00:00:00");
    var now = new Date().getTime();
    var delta = endTime - now;
    var days = Math.floor(delta / (1000 * 60 * 60 * 24));
    var hours = Math.floor((delta % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((delta % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((delta % (1000 * 60)) / 1000);
    var timer = document.querySelector(".timer");
    timer.innerHTML = "距离特卖结束还剩：" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
    setTimeout(showTimer, 1000);
  }

  function addToCart() {
    var duck = {
      name: "巨大的橡皮鸭",
      price: 99.99,
      quantity: 1
    }
    var cart = JSON.parse(localStorage.getItem("cart")) || [];
    cart.push(duck);
    localStorage.setItem("cart", JSON.stringify(cart));
    alert("商品已添加到购物车。");
  }

  showTimer();
</script>
</body>
</html>