原生js实现一个简单的限时秒杀demo
时间: 2023-07-29 17:12:17 浏览: 59
好的,我可以提供一个简单的限时秒杀demo的原生JavaScript实现。以下是基本的HTML和CSS代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>限时秒杀</title>
<style>
.seckill-item {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
width: 200px;
height: 200px;
float: left;
}
.seckill-item img {
width: 100%;
height: 120px;
}
.seckill-item h3 {
font-size: 16px;
margin: 10px 0;
}
.seckill-item .price {
font-size: 20px;
color: red;
margin: 10px 0;
}
.seckill-item .stock {
margin: 10px 0;
}
.seckill-item .btn-seckill {
background-color: #f00;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="seckill-list">
<div class="seckill-item">
<img src="img/1.jpg" alt="商品1">
<h3>商品1</h3>
<div class="price">¥99.00</div>
<div class="stock">库存: 100</div>
<button class="btn-seckill" data-id="1" data-price="99.00" data-stock="100" data-start="2022/01/01 00:00:00" data-end="2022/01/01 23:59:59">立即秒杀</button>
</div>
<div class="seckill-item">
<img src="img/2.jpg" alt="商品2">
<h3>商品2</h3>
<div class="price">¥199.00</div>
<div class="stock">库存: 50</div>
<button class="btn-seckill" data-id="2" data-price="199.00" data-stock="50" data-start="2022/01/01 00:00:00" data-end="2022/01/01 23:59:59">立即秒杀</button>
</div>
</div>
<script src="seckill.js"></script>
</body>
</html>
```
在这个页面中,我们设置了两个商品的信息,包括商品名称、价格、库存量和秒杀活动的开始时间和结束时间。每个商品都有一个“立即秒杀”按钮,它包含了商品的相关信息,通过data-*属性来存储。
以下是JavaScript代码的实现:
```javascript
// 获取秒杀按钮列表
var seckillBtns = document.querySelectorAll('.btn-seckill');
// 循环遍历秒杀按钮列表,为每个按钮添加点击事件
seckillBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
// 获取秒杀商品的相关信息
var id = this.getAttribute('data-id');
var price = this.getAttribute('data-price');
var stock = this.getAttribute('data-stock');
var start = this.getAttribute('data-start');
var end = this.getAttribute('data-end');
// 判断当前时间是否在秒杀活动时间范围内
var now = new Date();
var startTime = new Date(start);
var endTime = new Date(end);
if (now < startTime || now > endTime) {
alert('秒杀活动还未开始或已经结束!');
return false;
}
// 判断商品库存是否充足
if (stock <= 0) {
alert('商品库存不足!');
return false;
}
// 发送秒杀请求
alert('恭喜,秒杀成功!');
// 更新商品库存
stock--;
this.setAttribute('data-stock', stock);
this.parentNode.querySelector('.stock').innerHTML = '库存: ' + stock;
});
});
```
这段代码的主要功能是为每个“立即秒杀”按钮添加点击事件,当用户点击按钮时,首先获取商品的相关信息,然后判断当前时间是否在秒杀活动时间范围内,以及商品库存是否充足。如果满足条件,就发送秒杀请求,更新商品库存信息。