Dart网络编程-备忘录2.0

来源：互联网发布：java 第三方登录实例编辑：程序博客网时间：2024/05/22 12:59

这个项目是根据之前的备忘录升级的
http://blog.csdn.net/hekaiyou/article/details/46834057

先翻墙，再打开WebStorm，然后新建web项目todo_with_delete

这里写图片描述

创建成功后先试试运行，成功后再修改代码，首先修改todo_with_delete.html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>备忘录</title>    <link rel="stylesheet" href="todo_with_delete.css">  </head>  <body>    <h2>备忘录</h2>    <div>      <input id="to-do-input" type="text" placeholder="需要做什么？">    </div>    <div>      <ul id="to-do-list"></ul>    </div>    <button id="delete-all" type="button" style="float: right;">删除全部</button>    <script type="application/dart" src="todo_with_delete.dart"></script>    <script src="packages/browser/dart.js"></script>  </body></html>

运行项目，看看效果如何

这里写图片描述

嗯，很简单的页面，现在修改todo_with_delete.css

body {  /*设置字体*/  font-family: 'Open Sans', sans-serif;  /*设置背景颜色*/  background-color: WhiteSmoke;  /*设置外边距*/  margin: 15px;}#to-do-input {  /*设置字体*/  font-family: 'Open Sans', sans-serif;  /*设置字体大小*/  font-size: 14px;  /*设置字体粗细*/  font-weight: normal;  /*设置内边距：上右下左*/  padding: 5px 0px 5px 5px;  /*设置宽度*/  width: 100%;  /*设置边框*/  border: 1px solid Silver;  /*设置背景颜色*/  background-color: White;}#to-do-list {  /*设置内边距*/  padding: 0px;  /*设置外边距*/  margin: 0px;  /*设置在何处放置列表项标记*/  list-style-position: inside;}#to-do-list li {  /*设置内边距：上右下左*/  padding: 5px 0px 5px 5px;  /*设置下边框*/  border-bottom: 1px dotted Silver;}#to-do-list li:hover {  /*设置颜色*/  color: red;  /*设置字体大小*/  font-size: 18px;  /*设置光标的类型（形状）*/  cursor: pointer;}#delete-all {  /*设置背景颜色*/  background-color: #F8F8F8;  /*设置边框*/  border: 1px dotted #ccc;  /*设置圆角边框*/  border-radius: 1em;  /*向右浮动*/  float: right;}#delete-all:hover {  /*设置背景颜色*/  background-color: #ddd;}

再次运行项目，看看加上CSS样式后的网页效果

这里写图片描述

这样确实好看多了，最后再修改todo_with_delete.dart

import 'dart:html';//声明所有元素对象InputElement toDoInput;UListElement toDoList;ButtonElement deleteAll;void main() {  //获取所有元素  toDoInput = querySelector('#to-do-input');  toDoList = querySelector("#to-do-list");  deleteAll = querySelector('#delete-all');  //为元素对象toDoInput的变化事件添加委托处理  toDoInput.onChange.listen(addToDoItem);  //为元素对象deleteAll的点击事件添加处理：清除子元素  deleteAll.onClick.listen((e) => toDoList.children.clear());}//元素对象toDoInput的变化事件处理void addToDoItem(Event e) {  //声明一个新元素对象  var newToDo = new LIElement();  //设置当前元素的文本为toDoInput的值  newToDo.text = toDoInput.value;  //为当前元素的点击事件添加处理：移除  newToDo.onClick.listen((e) => newToDo.remove());  //设置元素对象toDoInput的值  toDoInput.value = '';  //将当前元素设置为toDoList的子元素  toDoList.children.add(newToDo);}

看看最后的效果如何

这里写图片描述

点击其中一项，可以删除那一项

这里写图片描述

点击“删除全部”按钮，就删除所有项

这里写图片描述

这样备忘录2.0就完成了，项目文件下载地址
http://pan.baidu.com/s/1c0uF9Ji

0 0