本文详细展示了如何使用原生JavaScript代码实现一个宽度计数器功能。通过监听事件并动态修改DOM元素的样式，实现了宽度的实时计数与显示。文章还总结了addEventListener、innerText和innerHTML等核心API的使用场景与区别，为前端开发提供实用参考。
本文分享了一段使用原生JavaScript编写的宽度计数器代码示例，供读者参考学习。
一、原生JavaScript实现宽度计数器
1. 核心代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器-原生js</title>
<style>
#box{
width: 200px;
height: 200px;
border: 1px solid white;
background-color: #878080;
}
/* 并集选择器 */
button,span{
margin: 10px 7px;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="minus" onclick="minusWidth()">-</button>
<button id="add" onclick="addWidth()">+</button>
<button onclick="reset()">还原</button>
<span id="result">200px</span>
</body>
</html>
<script>
//修改数值
var count=200;
document.getElementById('add').addEventListener('click',()=>{
if(count>500){
alert("宽度超出限制");
}
else{
count+=10;
}
document.getElementById('result').innerText = count+'px';
});
document.getElementById('minus').addEventListener('click',()=>{
if(count<10){
alert("宽度超出限制");
}
else{
count-=10;
}
document.getElementById('result').innerText = count+'px';
});
//修改盒子宽度
var boxWidth=200;
var box=document.getElementById('box');
function addWidth(){
if(boxWidth>500){
alert("图片宽度无法增加");
}
else{
boxWidth+=10;
}
box.style.width=boxWidth+"px";
};
function minusWidth(){
if(boxWidth<10){
alert("图片宽度无法减少");
}
else{
boxWidth-=10;
}
box.style.width=boxWidth+'px';
};
function reset(){
document.getElementById('box').style='200px';
document.getElementById('result').innerHTML='200px';
count=200;
boxWidth=200;
};
</script>2. 运行效果展示
二、技术要点总结
addEventListener：该API用于为元素注册事件监听器，以便在特定事件触发时执行相应的处理逻辑。
innerText：这是一个用于获取元素内部文本内容的属性，其特点是不解析HTML标签，仅返回纯文本。
innerHTML：该属性用于获取或设置元素内部的HTML内容，能够识别并处理所有的HTML标签。
以上内容为本文的全部讲解，希望能为读者的学习带来帮助，同时也欢迎大家持续关注本站获取更多技术分享。