内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

开发“todolist”项目及其自己的感悟

2018-08-29 18:38 出处:清屏网 人气: 评论(0

一,项目题目: 实现“todolist项目”

该项目主要可以练习js操控dom事件,事件触发之间的逻辑关系,以及如何写入缓存,获取缓存 固定。

二,todolist简介

ToDoList是一款非常优秀的任务管理软件,用户可以用它方便地组织和安排计划。该软件短小精悍,仅有一个 数百 KB 的可执行文件就能完成所有功能,并且界面设计优秀,初级用户也能够快速上手。

todolist具体功能

ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图。

最明显的好处是强迫自己整理出任务的每个部分,理顺后按部就班的完成,提高效率。

当然了习惯是需要慢慢养成了,开始使用 ToDoList 这样的软件会觉得很费劲,但坚持下来你就能体会到管理软件带来的便捷了。所以需要坚持。

三,项目需求:

本项目参考了http://www.todolist.cn/ 点击打开链接 ,对代码进行了一些精简,并添加了一些功能。在实现项目的过程中,首先是实现最基本的功能,然后不断地添加增强功能和美化。

参考链接http://www.todolist.cn/

1.将用户输入添加至待办项

2.可以对todolist进行分类(待办项和已完成组),用户勾选既将待办项分入已完成组

3.todolist的每一项可删除和编辑

4.下方有clear按钮,并清空所有todolist项

四,小编所做的静态页面

最终成型的结果:丑是丑了点,将就着看呗

五,基础HTML和CSS准备

5.1:input元素标签的用法

一个简单的HTML表单,包含两个文本输入框,一个提交按钮。

总结Input的标签:(input标签用于搜集用户信息)

Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等。

1,type=text

输入类型是text,这是我们见的最多也是使用最多的,
比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等。
当然这也是Input的默认类型。

参数name:同样是表示的该文本输入框名称。

参数size:输入框的长度大小。

参数maxlength:输入框中允许输入字符的最大数。

参数value:输入框中的默认值

特殊参数readonly:表示该框中只能显示,不能添加修改。

代码格式:

<form>
  your name:
  <input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20"><br>
  <input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改">
</form>

测试代码:

<!doctype html>
<html lang="zh-CN">
  <head>
     <meta charset="utf-8">
     <meta name="description" content="all kinds of input">
     <meta name="keywords" content="input,html">

      <title>各种input的测试</title>

  </head>
    
  <body>
          <form action="">
            姓名1:<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20"><br>
            姓名2:<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"><br>
          </form>
  </body>
</html>

2,type=password

此密码输入框,就是输入的信息是保密字符。

3, input中的placeholder属性

placeholder 属性提供可描述输入字段预期值的提示信息(hint)。

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。

注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password

期间又提及到一个表单标签form,下面继续介绍表单标签。

5.2,表单标签<form>

表单用于向服务器传输数据。

表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

其中上面又提到了提交按钮,我学一下。

5.3,button标签的用法

就是下面代码标记了一个按钮

<button type="button">Click Me!</button>

 

定义和用法

<button> 标签定义一个按钮。

在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的