一、介绍

  todolist,即待办事项。在windows android ios上参考微软家出的那个To-Do应用,大概就是那样的。我这个更简单,功能只有“待办” “已完成”两项,并且是在浏览器打开的。

二、界面和文件结构这些...

  实际在浏览器中的网页如下: 

  在subline中的文件结构有index.html、index.css、index.js各一个,如下图:

三、程序

  参考注释即可看懂。

(1)index.html文件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!-- http-equiv指定文档的内容类型和编码类型 -->
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <!-- name属性 视图和描述 name+content -->
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8. <title>ToDoList—最简单的待办事项列表</title>
  9. <meta name="description" content="ToDoList无须注册即可使用,数据存储在用户浏览器的html5本地数据库里,是最简单最安全的待办事项列表应用!" />
  10. <!-- 外接式css -->
  11. <link rel="stylesheet" href="./index.css">
  12. </head>
  13. <body>
  14. <!-- 头部:在这添加任务 -->
  15. <div class="header">
  16. <div class="box">
  17. <form action="javascript:postaction()" id="form">
  18. <!-- for将label标签绑定到input -->
  19. <label for="title">ToDoList</label>
  20. <!-- required规定提交表单之前有必填字段 autocomplete:自动补齐-->
  21. <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
  22. </form>
  23. </div>
  24. </div>
  25. <!-- 主体:在这进行任务和已完成 -->
  26. <div class="content">
  27. <h2 onclick="save()">正在进行 <span id="todocount"></span></h2>
  28. <ol id="todolist" class="demo-box">
  29. </ol>
  30. <h2>已经完成 <span id="donecount"></span></h2>
  31. <ul id="donelist">
  32. </ul>
  33. </div>
  34. <!-- 脚部:印记和全清除按钮 -->
  35. <div class="footer">
  36. Copyright &copy; 2018 todolist.cn <a href="javascript:clear();">clear</a>
  37. </div>
  38. <!-- 外接式js -->
  39. <script type="text/javascript" src="./index.js"></script>
  40. </body>
  41. </html>

index.html

(2)index.css文件

  1. /*清除默认样式 并设置简单样式*/
  2. body {
  3. margin:;
  4. padding:;
  5. font-size: 16px;
  6. background: #CDCDCD;
  7. }
  8.  
  9. .header {
  10. height: 50px;
  11. background: #333;
  12. /*background: rgba(47,47,47,0.98);*/
  13. }
  14.  
  15. .header .box,.content{
  16. width: 700px;
  17. padding: 0 10px;
  18. margin: 0 auto;
  19. }
  20. /*.content{
  21. margin: 0 auto;
  22. }*/
  23.  
  24. label {
  25. float: left;
  26. width: 100px;
  27. line-height: 50px;
  28. color: #DDD;
  29. font-size: 24px;
  30. /*鼠标悬停样式 一只手*/
  31. cursor: pointer;
  32. font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  33. }
  34.  
  35. .header input {
  36. float: right;
  37. width: 60%;
  38. height: 24px;
  39. margin-top: 12px;
  40. /*首行缩进10px*/
  41. text-indent: 10px;
  42. /*圆角边框 好看不止一点点*/
  43. border-radius: 5px;
  44. /*盒子阴影 inset内阴影*/
  45. box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
  46. border: none
  47. }
  48. /*选中输入框 轮廓的宽度为0*/
  49. input:focus {
  50. outline-width:;
  51. }
  52. /*父相子绝*/
  53. h2 {
  54. position: relative;
  55. }
  56.  
  57. span {
  58. position: absolute;
  59. top: 2px;
  60. right: 5px;
  61. /*设置行内块 有宽高*/
  62. display: inline-block;
  63. padding: 0 5px;
  64. height: 20px;
  65. border-radius: 20px;
  66. background: #E6E6FA;
  67. line-height: 22px;
  68. text-align: center;
  69. color: #666;
  70. font-size: 14px;
  71. }
  72. /*清除ol和ul标签的默认样式*/
  73. ol,ul {
  74. padding:;
  75. list-style: none;
  76. }
  77.  
  78. li {
  79. height: 32px;
  80. line-height: 32px;
  81. background: #fff;
  82. position: relative;
  83. margin-bottom: 10px;
  84. padding: 0 45px;
  85. border-radius: 3px;
  86. border-left: 5px solid #629A9C;
  87. box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  88. }
  89. /*任务单选框*/
  90. li input {
  91. position: absolute;
  92. top: 2px;
  93. left: 10px;
  94. width: 22px;
  95. height: 22px;
  96. cursor: pointer;
  97. }
  98. /*任务内容*/
  99. p {
  100. margin:;
  101. }
  102. /*任务内容的文本输入框,用来修改里面的内容*/
  103. li p input {
  104. top: 3px;
  105. left: 40px;
  106. width: 70%;
  107. height: 20px;
  108. line-height: 14px;
  109. text-indent: 5px;
  110. font-size: 14px;
  111. }
  112.  
  113. ul li {
  114. border-left: 5px solid #999;
  115. /*不透明度 0完全透明~1完全不透明*/
  116. opacity: 0.5;
  117. }
  118. /*勾选按钮*/
  119. li a {
  120. position: absolute;
  121. top: 2px;
  122. right: 5px;
  123. display: inline-block;
  124. width: 14px;
  125. height: 12px;
  126. border-radius: 14px;
  127. border: 6px double #FFF;
  128. background: #CCC;
  129. line-height: 14px;
  130. text-align: center;
  131. color: #FFF;
  132. font-weight: bold;
  133. font-size: 14px;
  134. cursor: pointer;
  135. }
  136.  
  137. .footer {
  138. color: #666;
  139. font-size: 14px;
  140. text-align: center;
  141. }
  142.  
  143. .footer a {
  144. /*color: #666;*/
  145. text-decoration: none;
  146. color: #999;
  147. }

index.css

(3)index.js文件

  1. function clear() {
  2. localStorage.clear();
  3. load();
  4. }
  5.  
  6. function postaction() {
  7. // 获取title节点
  8. var title = document.getElementById("title");
  9. if (title.value.trim() == "") {
  10. alert("内容不能为空");
  11. } else {
  12. var data = loadData();
  13. var todo = { "title": title.value, "done": false };
  14. data.push(todo);
  15. saveData(data);
  16. var form = document.getElementById("form");
  17. form.reset();
  18. load();
  19. }
  20. }
  21.  
  22. function loadData() {
  23. var collection = localStorage.getItem("todo");
  24. if (collection != null) {
  25. return JSON.parse(collection);
  26. } else return [];
  27. }
  28.  
  29. function saveSort() {
  30. var todolist = document.getElementById("todolist");
  31. var donelist = document.getElementById("donelist");
  32. var ts = todolist.getElementsByTagName("p");
  33. var ds = donelist.getElementsByTagName("p");
  34. var data = [];
  35. for (i = 0; i < ts.length; i++) {
  36. var todo = { "title": ts[i].innerHTML, "done": false };
  37. data.unshift(todo);
  38. }
  39. for (i = 0; i < ds.length; i++) {
  40. var todo = { "title": ds[i].innerHTML, "done": true };
  41. data.unshift(todo);
  42. }
  43. saveData(data);
  44. }
  45.  
  46. function saveData(data) {
  47. localStorage.setItem("todo", JSON.stringify(data));
  48. }
  49.  
  50. function remove(i) {
  51. var data = loadData();
  52. var todo = data.splice(i, 1)[0];
  53. saveData(data);
  54. load();
  55. }
  56.  
  57. function update(i, field, value) {
  58. var data = loadData();
  59. var todo = data.splice(i, 1)[0];
  60. todo[field] = value;
  61. data.splice(i, 0, todo);
  62. saveData(data);
  63. load();
  64. }
  65.  
  66. function edit(i) {
  67. load();
  68. var p = document.getElementById("p-" + i);
  69. title = p.innerHTML;
  70. p.innerHTML = "<input id='input-" + i + "' value='" + title + "' />";
  71. var input = document.getElementById("input-" + i);
  72. input.setSelectionRange(0, input.value.length);
  73. input.focus();
  74. input.onblur = function() {
  75. if (input.value.length == 0) {
  76. p.innerHTML = title;
  77. alert("内容不能为空");
  78. } else {
  79. update(i, "title", input.value);
  80. }
  81. };
  82. }
  83.  
  84. function load() {
  85. var todolist = document.getElementById("todolist");
  86. var donelist = document.getElementById("donelist");
  87. var collection = localStorage.getItem("todo");
  88. if (collection != null) {
  89. var data = JSON.parse(collection);
  90. var todoCount = 0;
  91. var doneCount = 0;
  92. var todoString = "";
  93. var doneString = "";
  94. for (var i = data.length - 1; i >= 0; i--) {
  95. if (data[i].done) {
  96. doneString += "<li draggable='true'><input type='checkbox' onchange='update(" + i + ",\"done\",false)' checked='checked' />" +
  97. "<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>" +
  98. "<a href='javascript:remove(" + i + ")'>-</a></li>";
  99. doneCount++;
  100. } else {
  101. todoString += "<li draggable='true'><input type='checkbox' onchange='update(" + i + ",\"done\",true)' />" +
  102. "<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>" +
  103. "<a href='javascript:remove(" + i + ")'>-</a></li>";
  104. todoCount++;
  105. }
  106. };
  107. todocount.innerHTML = todoCount;
  108. todolist.innerHTML = todoString;
  109. donecount.innerHTML = doneCount;
  110. donelist.innerHTML = doneString;
  111. } else {
  112. todocount.innerHTML = 0;
  113. todolist.innerHTML = "";
  114. donecount.innerHTML = 0;
  115. donelist.innerHTML = "";
  116. }
  117. }
  118.  
  119. window.onload = load;
  120.  
  121. // window.addEventListener("storage", load, false);

index.js

  

利用前端三大件(html+css+js)开发一个简单的“todolist”项目的更多相关文章

  1. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. django学习-11.开发一个简单的醉得意菜单和人均支付金额查询页面

    1.前言 刚好最近跟技术部门的[产品人员+UI人员+测试人员],组成了一桌可以去公司楼下醉得意餐厅吃饭的小team. 所以为了实现这些主要点餐功能: 提高每天中午点餐效率,把点餐时间由20分钟优化为1 ...

  3. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  4. Python开发一个简单的BBS论坛

    项目:开发一个简单的BBS论坛 需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可 ...

  5. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  6. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  7. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  8. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  9. 搭建Vue.js环境,建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

随机推荐

  1. h5获取地理坐标

    h5获取地理坐标 方法:h5自带获取地理信息的api api:navigator.geolocation.getCurrentPosition https://developer.mozilla.or ...

  2. Vue页面手动刷新,导航栏激活项还原到初始状态问题解决方案

    场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容.问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterp ...

  3. bootstrap实现Carousel旋转木马(焦点图)

    引入bootstrap相关文件后,在html中写如下代码: <div class="col-lg-9" > <!-- Carousel============== ...

  4. vue+element下拉树选择器

    项目需求:输入框点击弹出树形下拉结构,可多选或者单选. 解决方案:1.使用layui formSelect多选插件 2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构 <el ...

  5. 堆(heap)和栈(stack)、内存泄漏(memory leak)和内存溢出

    来源:http://blog.itpub.net/8797129/viewspace-693648/ 简单的可以理解为:heap:是由malloc之类函数分配的空间所在地.地址是由低向高增长的.sta ...

  6. rsync 应用总结

    rysnc server端 1.vim /etcrsyncd.conf (用户rsync,目录,模块,非系统虚拟用户及密码文件) 2.创建共享目录 /data/www/{www,bbs,blog} 3 ...

  7. 用js刷剑指offer(跳台阶)

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 牛客网链接 思路 这一题和斐波那契数列思路完全一样. 假如青蛙从第n个 ...

  8. maven jar 包不在项目中

    maven  update project maven build

  9. Ubuntu系统---进行C++项目开发的工具

    Ubuntu系统---进行C++项目开发的工具 在Ubuntu系统下进行C++工作任务,还没接触过.像 Windows + vs 一样,Ubuntu应该也有自己的C++开发工具.网上搜罗了一圈,发现有 ...

  10. ACM-ICPC 2018 徐州赛区网络预赛 G. Trace (思维,贪心)

    ACM-ICPC 2018 徐州赛区网络预赛 G. Trace (思维,贪心) Trace 问答问题反馈 只看题面 35.78% 1000ms 262144K There's a beach in t ...