效果：
<!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>