js实现简单功能的todolist简单功能的todolist-商品分类添加

101 阅读 0 评论 67 点赞
我是靠谱客的博主愉快季节，最近开发中收集的这篇文章主要介绍js实现简单功能的todolist简单功能的todolist-商品分类添加，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述

简单功能的todolist-商品分类添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 去除默认样式 */
        html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {margin: 0;padding: 0;}
        a,u{text-decoration: none;}
        h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 16px;}
        b,strong{font-weight: normal;}
        em,i{font-style: normal;}
        img{border: 0;display: block;}
        ul,ol,li{list-style: none;}
        a{color: black;}
        body{font-family: "微软雅黑";}
        input{outline:none}
        th{font-weight: normal; font-size: 16px;}
        td{font-size: 16px;}
        form input{
    margin-bottom: 15px;
    color: #444444;
    font-size: 12px;
}
/* index.css */
form select{
    margin-bottom: 15px;
}
form button{
    margin:0 0 15px;
}
#div1{
    width: 600px;
    height: 30px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
#div2{
    width: 700px;
    min-height:500px;
    display: none;
}
#div3{
    width: 700px;
    min-height:500px;
    display: none;
}
#div4{
    width: 700px;
    min-height:500px;
    display: none;
}
#div5{
    width: 700px;
    min-height:500px;
    display: block;
}
#div6{
    width: 700px;
    min-height:500px;
    display: none;
}
#div1 a{
    color: cornflowerblue;
    font-size: 14px;
    display: block;
    float: left;
    height: 30px;
    line-height: 30px;
    margin:0 10px;
}
#div1 a:hover{
    color: #ff0000;
}
.li6{
    cursor: pointer;
}
    </style>
</head>
<body>
    <!-- 框架 -->
    <form action="">
        <label for="">商品名称:</label><input type="text" id="input1"><br>
        <label for="">商品类别:</label> <select name="" id="select1">
            <option value="">全部</option>
            <option value="" selected>优选水果</option>
            <option value="">卤味熟食</option>
            <option value="">饮料酒水</option>
            <option value="">休闲零食</option>
        </select><br>
        <label for="">商品原价:</label><input type="text" id="input2"><br>
        <label for="">商品现价:</label><input type="text" id="input3"><br>
        <label for="">库存数量:</label><input type="text" id="input4"><br>
        <label for="">是否标红:</label><input type="radio"  id="radio_true" name="red" ><label for="red">是</label>
        <input type="radio" id="radio_false" name="red"><label for="red">否</label>
        <br>
        <button id="bn">提交信息</button>
    </form>
    <div id="div1">
        <a id="a1" href="#div5">全部</a>
        <a id="a2" href="#div2">优选水果</a>
        <a id="a3" href="#div3">卤味熟食</a>
        <a id="a4" href="#div4">饮料酒水</a>
        <a id="a5" href="#div6">休闲零食</a>
    </div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>


    <!-- js代码 -->
    <script>
        //创建列表头
        var arr=["商品名称","商品类别","原价","现价","库存","是否标红","删除"];//第一行表头
        var l;
        var p=0;
            var div2=document.querySelector("#div2");
            var div3=document.querySelector("#div3");
            var div4=document.querySelector("#div4");
            var div5=document.querySelector("#div5");
            var div6=document.querySelector("#div6");
        function init1(){//创建第一个ul  根据数组arr
                var ul=document.createElement("ul");
                ul.style.width="700px";
                for(var prop in arr){//for in 给每一个li赋值
                    let li =document.createElement("li");
                    li.textContent=arr[prop];
                    li.style.float="left";
                    li.style.width="70px";
                    li.style.textAlign="center";
                    li.style.fontSize="14px";
                    li.style.border="1px solid #ff0000";
                    li.style.margin="0 5px 0";
                    ul.appendChild(li);//将li插入到ul中
                }
                ul.style.marginTop="5px";
                ul.style.height="20px";
                ul.style.marginBottom="5px";
                div2.appendChild(ul);
            }
        function init2(){//创建第一个ul  根据数组arr
                var ul=document.createElement("ul");
                ul.style.width="700px";
                for(var prop in arr){//for in 给每一个li赋值
                    let li =document.createElement("li");
                    li.textContent=arr[prop];
                    li.style.float="left";
                    li.style.width="70px";
                    li.style.textAlign="center";
                    li.style.fontSize="14px";
                    li.style.border="1px solid #ff0000";
                    li.style.margin="0 5px 0";
                    ul.appendChild(li);//将li插入到ul中
                }
                ul.style.marginTop="5px";
                ul.style.height="20px";
                ul.style.marginBottom="5px";
                div3.appendChild(ul);
            }
        function init3(){//创建第一个ul  根据数组arr
                var ul=document.createElement("ul");
                ul.style.width="700px";
                for(var prop in arr){//for in 给每一个li赋值
                    let li =document.createElement("li");
                    li.textContent=arr[prop];
                    li.style.float="left";
                    li.style.width="70px";
                    li.style.textAlign="center";
                    li.style.fontSize="14px";
                    li.style.border="1px solid #ff0000";
                    li.style.margin="0 5px 0";
                    ul.appendChild(li);//将li插入到ul中
                }
                ul.style.marginTop="5px";
                ul.style.height="20px";
                ul.style.marginBottom="5px";
                div4.appendChild(ul);
            }
        function init4(){//创建第一个ul  根据数组arr
                var ul=document.createElement("ul");
                ul.style.width="700px";
                for(var prop in arr){//for in 给每一个li赋值
                    let li =document.createElement("li");
                    li.textContent=arr[prop];
                    li.style.float="left";
                    li.style.width="70px";
                    li.style.textAlign="center";
                    li.style.fontSize="14px";
                    li.style.border="1px solid #ff0000";
                    li.style.margin="0 5px 0";
                    ul.appendChild(li);//将li插入到ul中
                }
                ul.style.marginTop="5px";
                ul.style.height="20px";
                ul.style.marginBottom="5px";
                div5.appendChild(ul);
            }
        function init5(){//创建第一个ul  根据数组arr
                var ul=document.createElement("ul");
                ul.style.width="700px";
                for(var prop in arr){//for in 给每一个li赋值
                    let li =document.createElement("li");
                    li.textContent=arr[prop];
                    li.style.float="left";
                    li.style.width="70px";
                    li.style.textAlign="center";
                    li.style.fontSize="14px";
                    li.style.border="1px solid #ff0000";
                    li.style.margin="0 5px 0";
                    ul.appendChild(li);//将li插入到ul中
                }
                ul.style.marginTop="5px";
                ul.style.height="20px";
                ul.style.marginBottom="5px";
                div6.appendChild(ul);
            }
        init1();//执行这个函数
        init2();//执行这个函数
        init3();//执行这个函数
        init4();//执行这个函数
        init5();//执行这个函数
    </script>
    <script>
        var j=0;
        var goodsList=[];//创建新的数组列表
        goodsList[6]="删除";//数组第6项为删除
        var input1,input2,input3,input4,select1,radio_true,radio_false,bn,div2,ul,a,dels,b,div3,div4,div5,div6;//定义变量  
        //下面是获取元素 以及给他们添加相应的侦听的事件
        input1=document.querySelector("#input1");
        input2=document.querySelector("#input2");
        input3=document.querySelector("#input3");
        input4=document.querySelector("#input4");
        select1=document.querySelector("#select1");
        radio_true=document.querySelector("#radio_true");
        radio_false=document.querySelector("#radio_false");
        bn=document.querySelector("#bn");
        div2=document.querySelector("#div2");
        document.addEventListener("click",changeHandler);
        input1.addEventListener("input",input1Handler);
        input2.addEventListener("input",input2Handler);
        input3.addEventListener("input",input3Handler);
        input4.addEventListener("input",input4Handler);
        radio_true.addEventListener("change",radio_trueHandler);
        radio_false.addEventListener("change",radio_falseHandler);
        bn.addEventListener("click",bnclickHandler);
        div3=document.querySelector("#div3");
        div4=document.querySelector("#div4");
        div5=document.querySelector("#div5");
        div6=document.querySelector("#div6");
        a1=document.querySelector("#a1");
        a2=document.querySelector("#a2");
        a3=document.querySelector("#a3");
        a4=document.querySelector("#a4");
        a5=document.querySelector("#a5");
        a1.addEventListener("click",click2Handler);
        a2.addEventListener("click",click3Handler);
        a3.addEventListener("click",click4Handler);
        a4.addEventListener("click",click5Handler);
        a5.addEventListener("click",click6Handler);

        function createLI(){//创建li的函数
            j++;//j的作用是每次进来都会赋给ul一个classname，这样创建的ul就会有不同的classname，方便获取
            ul=document.createElement("ul");//创建ul
            ul.style.width="700px";
            var i=0;
                for(var prop in goodsList){//根据数组数据创建li
                    i++;
                    var li =document.createElement("li");
                    li.textContent=goodsList[prop];
                    li.className="li"+i;
                    li.style.float="left";
                    li.style.width="70px";
                    li.style.textAlign="center";
                    li.style.fontSize="14px";
                    li.style.border="1px solid #ff0000";
                    li.style.margin="0 5px 0";
                    ul.appendChild(li);//将li插入到ul中
                };
            a=String("ul"+j)
            ul.className=a;
            ul.style.marginTop="5px";
            ul.style.height="20px";
            div2.appendChild(ul);
            var index=select1.selectedIndex;
            //将ul插入到div2中   
        }
        function bnclickHandler(e,index){//提交信息的点击函数
        console.log("bn");
            e.preventDefault();
            var index=select1.selectedIndex;
            console.log(index);
            if(index===0){
                console.log("0");
                createLI();//执行创建li函数   
                div2.appendChild(ul);
                
            }
            if(index===1){
                console.log("1");
                createLI();//执行创建li函数   
                div3.appendChild(ul);
                
            }
            if(index===2){
                console.log("2");
                createLI();//执行创建li函数   
                div4.appendChild(ul);
                
            }
            if(index===3){
                console.log("3");
                createLI();//执行创建li函数   
                div5.appendChild(ul);
                
            }
            if(index==4){
                console.log("4");
                createLI();//执行创建li函数   
                div6.appendChild(ul);
                
            }
            
            if(goodsList[5]===true){
                console.log("true");
                abc();
            }
            if(goodsList[5]===false){
                console.log("false");
                abd();
            }
        }
        function abc(){ //单独为第一个li添加字体颜色  abd是变黑
        console.log("red");
            b="."+a;
            var lis=document.querySelector(b).firstChild;
            var dels=document.querySelector(b).lastChild;
            dels.style.cursor="pointer";
            dels.addEventListener("click",removeUl);
            console.log(lis);
            Object.assign(lis.style,{
               color:"red"
           })
        }
        function abd(){
            var b="."+a;
            console.log(b);
            var lis=document.querySelector(b).firstChild;
            var dels=document.querySelector(b).lastChild;
            dels.style.cursor="pointer";
            dels.addEventListener("click",removeUl);
            console.log(lis);
            Object.assign(lis.style,{
               color:"black"
           })
        }
        function radio_trueHandler(e){//以下都是将获取到的值插入到goodsList中
            goodsList[5]=true;
        }
        function radio_falseHandler(e){
            goodsList[5]=false;
        }
        function input1Handler(e){
            goodsList[0]=this.value;
        }
        function input2Handler(e){
            goodsList[2]=this.value;
        }
        function input3Handler(e){
            goodsList[3]=this.value;
        }
        function input4Handler(e){
            goodsList[4]=this.value;
            
        }
        function changeHandler(e){//根据select选择的是哪个  选择商品类别添加到goodsList
            var index=select1.selectedIndex;
           if(index===0) goodsList[1]="全部";
           if(index===1) goodsList[1]="优选水果";
           if(index===2) goodsList[1]="卤味熟食";
           if(index===3) goodsList[1]="饮料酒水";
           if(index===4) goodsList[1]="休闲零食";
        }
        function removeUl(e){
            e.target.parentElement.remove();//目标元素的父元素移除
        }
        function click2Handler(){//所有的a标签点击事件函数 切换div作用
            div2.style.display="block";
            div3.style.display="none";
            div4.style.display="none";
            div5.style.display="none";
            div6.style.display="none";

        };
        function click3Handler(){
            div3.style.display="block";
            div2.style.display="none";
            div4.style.display="none";
            div5.style.display="none";
            div6.style.display="none";
        };
        function click4Handler(){
            div4.style.display="block";
            div2.style.display="none";
            div3.style.display="none";
            div5.style.display="none";
            div6.style.display="none";
        };
        function click5Handler(){
            div5.style.display="block";
            div2.style.display="none";
            div3.style.display="none";
            div4.style.display="none";
            div6.style.display="none";
        };
        function click6Handler(){
            div6.style.display="block";
            div2.style.display="none";
            div3.style.display="none";
            div4.style.display="none";
            div5.style.display="none";
        };
    </script>
</body>
</html>
测试：
在这里插入图片描述