加价按钮（当前价基于起拍价变化）

本文链接：https://blog.csdn.net/qq_61986293/article/details/137520097

效果：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>价格增加示例</title>  
</head>  
<body>  
  
<p>初始价: <span id="initialPrice">100</span> 元</p>  
<p>当前价: <span id="currentPrice">100</span> 元</p>  
<button id="increasePriceButton">增加价格(2元/次)</button>  
  
<script>  
    // 初始价  
    let initialPriceValue = 100;  
    // 当前价（初始时与初始价相同）  
    let currentPriceValue = initialPriceValue;  
  
    // 获取显示初始价的元素  
    const initialPriceElement = document.getElementById('initialPrice');  
    // 获取显示当前价的元素  
    const currentPriceElement = document.getElementById('currentPrice');  
    // 获取按钮元素  
    const increasePriceButton = document.getElementById('increasePriceButton');  
  
    // 设置初始价和当前价的显示  
    initialPriceElement.textContent = initialPriceValue;  
    currentPriceElement.textContent = currentPriceValue;  
  
    // 为按钮添加点击事件监听器  
    increasePriceButton.addEventListener('click', function() {  
        // 增加当前价  
        currentPriceValue += 2;  
        // 更新当前价的显示  
        currentPriceElement.textContent = currentPriceValue;  
          
        // 如果需要更新初始价（通常不需要，这里作为示例）  
        // initialPriceValue = currentPriceValue;  
        // 更新初始价的显示（如果需要的话）  
        // initialPriceElement.textContent = initialPriceValue;  
    });  
</script>  
  
</body>  
</html>

用上面的功能写一个拍卖网页：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .detail{
    position:absolute;
    top:20px;
    left:550px;
    width:500px;
    height:400px;
    background-color:#ede5dc;}
    p{font-size:30px;}
    .o1{
    position:absolute;
    top:500px;
    left:700px;
    width:150px;
    height:50px;
    background-color:#e78e17;}
    .o2{
    position:absolute;
    top:500px;
    left:1000px;
    width:150px;
    height:50px;
    }
    .price{
    position:absolute;
    top:300px;
    left:1200px;
    }
    d1{font-size:20px;}
    .new{
    position:absolute;
    top:400px;
    left:1200px;}
    li{
     position:relative;
     left:50px;
     width:400px;
    }
    .time{font-size:30px;
    color:#9d1420;
    position:absolute;
    top:150px;
    left:1200px;}
    a{position:absolute;
    font-size:30px;
    top:50px;
    left:1200px;}
</style>
</head>
<body bgcolor="#a8977f">
<img src="###" alt=" " width="500" height="550">
<div class="detail">
<p> 《Django 3 web应用开发实战》</p>
    <li>商品类别：图书</li>
    <li>作者：黄永祥</li>
    <li>出版社：清华大学出版社</li>
    <li>出版时间：2021-07-01</li>
    <li>ISBN：9787302580317</li>
    <li>简介：涵盖了Django的缓存系统、信号系统、中间件、静态文件处理、国际化等高级特性,帮助读者更好地提升应用性能和开发效率。</li>

</div>
<div class="price">
    <d1>起拍价:<span id="price">10</span></d1>
</div>
<div class="new">
    <d1>当前价:<span id="new-price">10</span></d1>
</div>
<button class="o1"id="increasePrice"> 加价（2/次）</button>
<button class="o2" id="buy"disabled> 去购买</button>
<a>竞拍结束倒计时</a>
<div class="time"><span id="days">0</span> 天<span id="hours">0</span> 小时 <span id="minutes">0</span> 分钟 <span id="seconds">0</span> 秒</div>
<script>
function countdown() {
    var endTime = new Date("April 25, 2024 18:59:59").getTime(); // 设置结束时间
    var now = new Date().getTime(); // 获取当前时间
    var timeLeft = endTime - now; // 计算剩余时间
	var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); 
    var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // 计算小时数
    var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); // 计算分钟数
    var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); // 计算剩余秒数

    // 输出结果到页面上的指定元素
	document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("seconds").innerHTML = seconds;

    // 如果时间结束，停止倒计时
    if (timeLeft < 0) {
        clearInterval(interval);
		ocument.getElementById("days").innerHTML = "0";
        document.getElementById("hours").innerHTML = "0";
        document.getElementById("minutes").innerHTML = "0";
        document.getElementById("seconds").innerHTML = "0";
    }
}
var interval = setInterval(countdown, 1000);
//倒计时功能
let pricevalue=10;
let newpricevalue=pricevalue;
const priceElement=document.getElementById('price');
const newpriceElement=document.getElementById('new-price');
const increasePrice=document.getElementById('increasePrice');
priceElement.textContent=pricevalue;
newpriceElement.textContent=newpricevalue;
 increasePrice.addEventListener('click',function(){
newpricevalue +=2;
newpriceElement.textContent=newpricevalue;
});
//加价功能
</script>
</body>
</html>