本文实例为大家分享了js实现宽度计数器的具体代码，供大家参考，具体内容如下 一.用原生js实现宽度计数器 1.源码 <!DOCTYPE html> <html la
本文实例为大家分享了js实现宽度计数器的具体代码，供大家参考，具体内容如下
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：用于监听事件并进行处理的函数。
innerText：用于获取文本内容的属性。（不包含html标签）
innerHTML：用于获取html标签内容的属性。（识别所有html标签）
--结束END--
本文标题: 原生js实现宽度计数器
本文链接: https://www.lsjlt.com/news/166591.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0