原生js实现宽度计数器

Xenia ·

更新时间:2024-09-20

· 1125 次阅读

本文实例为大家分享了js实现宽度计数器的具体代码，供大家参考，具体内容如下

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