用原生js实现宽度计数器

梦幻之光_dream

已于 2022-04-21 17:02:55 修改

阅读量316

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-04-21 16:42:21 首次发布

本文链接：https://blog.youkuaiyun.com/William_fang/article/details/124325130

版权

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何利用原生JavaScript实现一个宽度计数器。通过addEventListener监听事件，并结合innerText或innerHTML属性来处理文本内容和HTML标签，达到计数效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.用原生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>