Dart网络编程-备忘录2.0

这个项目是根据之前的备忘录升级的
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

Dart网络编程-备忘录2.0相关推荐

Dart网络编程-备忘录
准备工作在开始之前先翻墙,至于怎么翻,就八仙过海,各显神通吧! 好了,我已经翻出去了,然后再创建一个dartium的快捷方式,其实dartium就是一个测试版的Chrome浏览器,dart目前只能在 ...
冰灵网络编程助手 v1.0 绿色版
名称:冰灵网络编程助手 v1.0 绿色版版本:1.0 软件大小:1.08 MB 软件语言:简体中文软件授权:共享版应用平台:WinXp,Win2000,Win2003,WinVista,Win ...
mysql can#039;t create_网络编程安装mysql-8.0.19-winx64遇到的问题：Can#039;t create directory #039;xxxx\Databa...
从官网上下载的mysql-8.0.19-winx64 Windows (x86, 64-bit), ZIP Archive 附上下载地址https://dev.mysql.com/downloads/ ...
C# 网络编程之豆瓣OAuth2.0认证具体解释和遇到的各种问题及解决
近期在帮人弄一个豆瓣API应用,在豆瓣的OAuth2.0认证过程中遇到了各种问题,同一时候自己须要一个个的尝试与解决,终于完毕了豆瓣API的訪问.作者这里就不再吐槽豆瓣的认证文档了,毕 ...
Java网络编程从0——》入门
目录: 1.软件结构 2. 网络编程三要素 3. TCP通信程序(Socket和ServerSocket) 1.软件结构 1.C/S结构:全称是Client/Server结构,是指客户端和服务器结构如 ...
C# 网络编程之豆瓣OAuth2.0认证详解和遇到的各种问题及解决
最近在帮人弄一个豆瓣API应用,在豆瓣的OAuth2.0认证过程中遇到了各种问题,同时自己需要一个个的尝试与解决,最终完成了豆瓣API的访问.作者这里就不再吐槽豆瓣的认证文档了,毕竟人 ...
localhost、127.0.0.1对网络编程造成不通的说明
平时大家都有过网络编程的经验,一般地,我们为了方便经常用localhost或者127.0.0.1,代替本机IP地址,如下为Qt编写的一段网络应用程序的代码: m_UdpSocket = new QUd ...
网络编程0：网络基础知识
返回:Linux网络编程学习笔记 1.网络应用程序设计模式 C/S模式:传统的网络应用设计模式,客户机(client)/服务器(server)模式.需要在通讯两端各自部署客户机和服务器来完成数据通信. ...
脑残式网络编程入门(八)：你真的了解127.0.0.1和0.0.0.0的区别？
本文由"小姐姐养的狗"原创发布于"小姐姐味道"公众号,原题<127.0.0.1和0.0.0.0地址的区别>,收录时有优化和改动.感谢原作者的分享. ...

Dart网络编程-备忘录2.0

Dart网络编程-备忘录2.0相关推荐

最新文章

热门文章