css代码，可以根据class，结合着我下方发的整体代码，看看

Js代码

// 用cosnt表示，选择出的标签

const addPendingTaskModule = document.querySelector('.add-pending-task-module');

const functionTask = document.querySelector('.function-task');

// class为form1，用于提交

const inputAddPendingTask = document.querySelector('.add-pending-task');

const submitPendingTask = document.querySelector('.submit-pending-task');

// 输入框的变化

// 绑定事件监听，事件类型为input。特性：边输入，边激活

inputAddPendingTask.addEventListener('input', function () {

// 激活后，字体的变化，输入内容长度的展示

textcount.style['font-size'] = '24px';

textcount.innerHTML = `${inputAddPendingTask.value.length}/200字`;

// 背景宽高、颜色变化

functionTask.style.height = '50px';

inputAddPendingTask.style['background-color'] = 'rgb(255,255,255)';

submitPendingTask.style['background-color'] = 'rgb(255,255,255)';

});

// 失去焦点时，一切原路返回

inputAddPendingTask.addEventListener('blur', function () {

textcount.style['font-size'] = '16px';

functionTask.addEventListener('mouseenter', function () {

functionTask.style.height = '50px';

inputAddPendingTask.style['background-color'] = 'rgb(255,255,255)';

submitPendingTask.style['background-color'] = 'rgb(255,255,255)';

});

functionTask.style.height = '0px';

inputAddPendingTask.style['background-color'] = 'rgb(242,242,242)';

submitPendingTask.style['background-color'] = 'rgb(242,242,242)';

});

console.log(addPendingTaskModule);

/*

开始对下选框，渲染

*/

const selectionList = document.querySelector('.selection-list');

let RenderSelectionList = function(){

const selectListArr = arrList.map(function(ele,index){

return `

<option value="${index}">${ele.listName}</option> code>

`;

});

selectionList.innerHTML = selectListArr.join('');

}

RenderSelectionList();

// 先建立一个数组、存放对象

testPriInfoTaskArr = [

{

// 输入框，输入的内容

task:'去学习鸭',

// 对应清单编号

tag: 0,

// 对应四象限编号(1-4)

quadrant:'1',

// 完成时间的储存

time: 5,

// 表示状态的切换，aaad-表示未完成，aaa-表示以完成

state: 'aaad'

},

];

// 将对应信息存入本地，最后再删除，保证本地有数据，防止后边提取是报错。

/*

任务添加

*/

// 从本地提取信息

const priInfoTaskArr = JSON.parse(localStorage.getItem('infoTaskArr')) || [];

const mainInfoTask = document.querySelector('.main-info-task');

const quadrantList = document.querySelector('.quadrant-list');

const countDown = document.querySelector('.countdown');

// 绑定提交的，监听事件

mainInfoTask.addEventListener('submit',function(e){

// 阻止冒泡

e.preventDefault();

// 检测

if(!inputAddPendingTask.value){

return alert('任务输入内容不能为空');

}

// 向一个数组中，存入提交后的信息

priInfoTaskArr.push(

{

task:inputAddPendingTask.value,

tag:selectionList.value,

quadrant:quadrantList.value,

time: countDown.value,

state:'aaad'

}

);

// 将priInfoTaskArr输入存入本地

localStorage.setItem('infoTaskArr', JSON.stringify(priInfoTaskArr));

// 重置表单

mainInfoTask.reset();

// 重新，渲染页面，这两个函数，后面会提及

display(); // 未完成任务的渲染

quadrantDisplay(); // 已完成任务的渲染

});

2、未完成任务的页面

<code>

<!-- section是一个方框，等待Js，通过innerHTML向里面添加，渲染内容 -->

<section class="uncom-reverse">code>

<!-- 新创建 -->

</section>

css代码