const counter = document.querySelector('.counter'); counter.innerText = 0; const target = +counter.getAttribute('data-target'); const NumberCounter = () => { "use strict"; const value = +counter.innerText; if (value < target) { counter.innerText = Math.ceil(value + 1); setTimeout(()=> { NumberCounter(); },25); } };

这段代码是一个用于实现数字计数器效果的 JavaScript 代码。首先，它通过 `document.querySelector('.counter')` 获取到一个具有 `counter` 类名的元素，并将其赋值给 `counter` 变量。然后，将 `counter` 元素的文本内容设置为 0，即初始计数器值。

接下来，通过 `counter.getAttribute('data-target')` 获取到 `counter` 元素的 `data-target` 属性值，并将其转换为数字，并将结果赋值给 `target` 变量。这个 `data-target` 属性值表示计数器的目标值。

然后，定义了一个名为 `NumberCounter` 的函数。在函数内部，首先通过 `+counter.innerText` 将 `counter` 元素的文本内容转换为数字，并将结果赋值给 `value` 变量。

接下来，通过比较 `value` 和 `target` 的大小，判断是否需要继续增加计数器的值。如果 `value` 小于 `target`，则将 `counter` 元素的文本内容设置为 `Math.ceil(value + 1)`，即向上取整后的 `value + 1`。然后，通过调用 `setTimeout` 函数，在延迟 25 毫秒后再次调用 `NumberCounter` 函数，实现逐渐增加计数器值的效果。

总结起来，这段代码实现了一个数字计数器效果，从 0 开始逐渐增加到指定的目标值。

相关问题

<a href="Buick_A09514MYSGM201_4-1.html#15531" class="XRef">0.1 一般信息</a> js获取href值及 a标签文字

您可以使用JavaScript中的`getAttribute()`方法来获取`<a>`标签的`href`属性值，使用`textContent`或`innerText`属性来获取标签中的文字内容。

以下是示例代码：

<a href="Buick_A09514MYSGM201_4-1.html#15531" class="XRef">0.1 一般信息</a>

const link = document.querySelector('a'); // 获取第一个<a>标签元素
const href = link.getAttribute('href'); // 获取href属性值
const text = link.textContent; // 获取标签中的文字内容
console.log(href); // 输出：Buick_A09514MYSGM201_4-1.html#15531
console.log(text); // 输出：0.1 一般信息

请注意，如果标签中包含HTML标记，则使用`textContent`属性将返回未解析的文本，而使用`innerText`属性将返回已解析的文本。

用js代码实现使用cookie实现购物车功能: 有以下商品, 点击加入购物车即可加入到购物车中(cookie中保存), 点击查看购物车, 进入另一个页面, 并显示之前加入购物车的商品.

HTML代码：

<!-- 商品列表 -->
<div id="product-list">
  <div class="product">
    <h3>商品1</h3>
    <p>价格: $10</p>
    <button class="add-to-cart" data-product="product1">加入购物车</button>
  </div>
  <div class="product">
    <h3>商品2</h3>
    <p>价格: $20</p>
    <button class="add-to-cart" data-product="product2">加入购物车</button>
  </div>
  <div class="product">
    <h3>商品3</h3>
    <p>价格: $30</p>
    <button class="add-to-cart" data-product="product3">加入购物车</button>
  </div>
</div>

<!-- 查看购物车 -->
<div id="cart">
  <h2>我的购物车</h2>
  <ul id="cart-list"></ul>
  <p>总价: <span id="total-price">0</span></p>
</div>

JS代码：

// 获取商品列表和购物车元素
const productList = document.getElementById('product-list');
const cartList = document.getElementById('cart-list');
const totalPrice = document.getElementById('total-price');

// 添加商品到购物车
function addToCart(product) {
  // 获取购物车中已有的商品列表
  const cartItems = JSON.parse(getCookie('cartItems')) || [];

  // 检查购物车中是否已有该商品
  const existingItem = cartItems.find(item => item.id === product.id);
  if (existingItem) {
    existingItem.quantity++;
  } else {
    cartItems.push({ id: product.id, name: product.name, price: product.price, quantity: 1 });
  }

  // 保存购物车信息到cookie
  setCookie('cartItems', JSON.stringify(cartItems));

  // 更新购物车显示
  updateCart();
}

// 从购物车中移除商品
function removeFromCart(itemId) {
  // 获取购物车中已有的商品列表
  const cartItems = JSON.parse(getCookie('cartItems')) || [];

  // 移除指定的商品项
  const updatedItems = cartItems.filter(item => item.id !== itemId);

  // 保存购物车信息到cookie
  setCookie('cartItems', JSON.stringify(updatedItems));

  // 更新购物车显示
  updateCart();
}

// 更新购物车显示
function updateCart() {
  // 获取购物车中已有的商品列表
  const cartItems = JSON.parse(getCookie('cartItems')) || [];

  // 清空购物车显示列表
  cartList.innerHTML = '';

  // 计算总价
  let total = 0;

  // 遍历购物车中的商品项并添加到显示列表中
  cartItems.forEach(item => {
    const li = document.createElement('li');
    li.innerHTML = `${item.name} x ${item.quantity} <span>$${item.price * item.quantity}</span> <button class="remove-from-cart" data-id="${item.id}">移除</button>`;
    cartList.appendChild(li);

    total += item.price * item.quantity;
  });

  // 更新总价显示
  totalPrice.innerText = total;
}

// 获取cookie值
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(name + '=')) {
      return decodeURIComponent(cookie.substring(name.length + 1));
    }
  }
  return null;
}

// 设置cookie值
function setCookie(name, value, days = 7) {
  const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toGMTString();
  document.cookie = `${name}=${encodeURIComponent(value)};expires=${expires}`;
}

// 绑定加入购物车按钮的点击事件
productList.addEventListener('click', event => {
  if (event.target.classList.contains('add-to-cart')) {
    const product = {
      id: event.target.getAttribute('data-product'),
      name: event.target.parentNode.querySelector('h3').innerText,
      price: parseFloat(event.target.parentNode.querySelector('p').innerText.substring(3)),
    };
    addToCart(product);
  }
});

// 绑定移除商品按钮的点击事件
cartList.addEventListener('click', event => {
  if (event.target.classList.contains('remove-from-cart')) {
    const itemId = event.target.getAttribute('data-id');
    removeFromCart(itemId);
  }
});

// 初始化购物车显示
updateCart();