将按钮按照value值排序，并且点击按钮后值1s自减一

最新推荐文章于 2023-10-16 08:00:00 发布

画一生情入颜容

最新推荐文章于 2023-10-16 08:00:00 发布

阅读量410

点赞数

文章标签：按钮排序

本文链接：https://blog.csdn.net/csdn_zsdf/article/details/70147583

版权

body中的代码和CSS

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
        }

        input{
            padding: 20px 30px;
            background-color: lightgreen;
            border:2px inset #ccc;
            color: white;
            font-size: 20px;
            font-weight: bold;
            font-family: "微软雅黑";

        }

        </style>
</head>
<body>
<div id = "buttonLinks" >
    <input type = "button" value = "100">
    <input type = "button" value = "60">
    <input type = "button" value = "23">
    <input type = "button" value = "55">
    <input type = "button" value = "56">
    <input type = "button" value = "10">
    <input type = "button" value = "344">
    <input type = "button" value = "600">
    <input type = "button" value = "50">
    <input type = "button" value = "50">
    <input type = "button" value = "30">
</div>

<script type="text/javascript">

    window.onload = function(){
    //1. 先获取标签名为input的集合，在这里由于所有input都是button，获得的集合就都是button的集合
var btns = document.getElementById('buttonLinks').getElementsByTagName('input');

//2. 定义一个数组，存放每个btn的value
        var result = [];
        for(var i = 0; i < btns.length; i++){
            (function(num){
                result[num] = btns[num].value;
            })(i);  
        }

//比较函数，value从大到小排列
        function compare(a, b){
                return b-a;
        }
        result.sort(compare);

//在进行了上面那一步。result中的数字有序，但是并没有对应到相应的btns[i]中，所以先将result赋值进去
        for(var i = 0; i< result.length; i++){
            btns[i].value = result[i];
        }


        var functionId;
     for(var i = 0; i< btns.length; i++){

   //使用立即调用函数，为每一个btn都绑定一个click事件。    

     (function(num){

         btns[num].onclick = function(){

           //setInterval 进行每一秒钟btns[num]的值减1

          functionId =  setInterval(function(){

               if(btns[num].value > 0){

                    //更新btn中的值，并减一
                   btns[num].value =  btns[num].value;
                   btns[num].value -= 1;

              }else{

                     clearInterval(functionId);

                    }

           },1000);

         }

    })(i)

  }

    }
</script>

</body>
</html>