简单功能的todolist
程序员文章站
2022-07-01 19:19:46
...
简单功能的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>
效果图：
全部的列表
优选水果列表
卤味熟食列表
饮料酒水列表
休闲零食列表
可以实现添加、删除、标红等功能
下一篇： vue.js框架制作TodoList功能