求解这个js代码如何简化一下 大神们

效果图在最下面 特别是最下面的js 就是我想点“重置后 obox这个盒子还原 我那样写太复杂了 有啥办法没”图片说明图片说明图片说明图片说明图片说明

你把重置按钮的单击事件定义为 重新定义当前元素的class属性试试 改为你css中写好的一个。

建议用Jquery吧。看你上面很多函数都差不多，写一个就可以了只不过是参数不同罢了。

把你的例子用jquery改写了下，一起学习下，可以看看虽然很丑，

图片说明

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #demo{
            width: 100px;
            height: 100px;border: 1px solid gray;
        }
        #main{
            width:300px;
            height:500px;
            border:5px solid purple;
            margin: 0 auto;
            background: gray;
        }
        ul{width:300px;height:25px;}
        ul>li{
            list-style: none;
            float: left;
            height: 25px;
            border:1px slid red;
            padding-left:23px ;
            margin-left:10px;
        }
        .li1{background: red;}
        .li2{background: green;}
        .li3{background: yellow;}
        .li4{background: purple;}
        p{height:20px;}
        .active{border:5px solid blue;}
        input[type="range"]
    </style>
</head>
<body>
    <div id="demo"></div>
    <div id="main">

        <h3>选择背景</h3>
        <ul>
            <li class='li0' onclick="chooseBack(0)"></li>
            <li class='li1' onclick="chooseBack(1)"></li>
            <li class='li2' onclick="chooseBack(2)"></li>
            <li class='li3' onclick="chooseBack(3)"></li>
        </ul>
        <h3>选择高度</h3>
        <input type="range" name="h" min='0' max='1000' id='height'
        onchange="show($('#height'),$('#lh'),'height')">
        <p id="lh"></p>
        <h3>选择宽度</h3>
        <input type="range" name="W" min='0' max='1000' id='width' 
        onchange="show($('#width'),$('#lw'),'width')">
        <p id='lw'></p>
            <button id="reset" onclick="reset()">重置</button>
    </div>

</body>
</html>
<script type="text/javascript" src='C:\Users\lanlan_zhu\Desktop\jquery-3.2.0.min.js'></script>
<script type="text/javascript">

            //三个参数，第一个是type="range"的选择器，第二是p的选择器，第三个表示要修改的属性
                function show(selector1,selector2,property){
                    selector2.html(selector1.val()+"px");
                    if(property=="height"){
                         $("#demo").css("height",selector1.val()+"px");
                    }
                    if(property=="width"){
                         $("#demo").css("width",selector1.val()+"px");
                    }

                }
                //传入索引
                function chooseBack(s1){
                    //当前选中新增一个类，未选中移除这个类
                    $('.li'+s1).addClass("active");
                    $("li:not(li:eq("+s1+")"+")").removeClass("active");

                    //获取当前类的背景色
                    $background=$('.li'+s1).css("background-color");
                    $("#demo").css("background",$background);
                    console.log($("ul>li"));
                }
                //reset
                function reset(){
                    $("#demo").css({"height":"100px","width":"100px","background":"none"})
                    $("#height,#width").val("500");

                    $("#lw,#lh").text(" ");
                    $("ul>li").removeClass("active");
                }
</script>