网页版表白墙

表白墙
- 1. 创建内容
- 2. 调整样式
- 3. 实现提交
- 最终样式
待办事项
- 1. 添加内容
- 2. 调整样式
- 实现功能
- - 新增待办事项
  - 已完成事项
  - 删除任务
最后

嗨~~今天给大家分享分享两个使用html、css 和 js 实现的网页案例。分别是表白墙和待办事项。

表白墙

1. 创建内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表白墙</title>
</head>
<body><!-- 创建表白墙 --><h1>表白墙</h1><p>输入后点击提交，会将信息显示在表格中</p><span>谁：</span><input type="text"><span>对谁：</span><input type="text"><span>说什么：</span><input type="text"><input type="button" value="提交"></body>
</html>

2. 调整样式

上面的效果还不太好看，所以我们给它调整一下样式。
首先将各个html 的标签分类放好。如下：

     <div class="container"><h1>表白墙</h1><p>输入后点击提交，会将信息显示在表格中</p><div class="row"><span>谁：</span><input class="edit" type="text"></div><div class="row"><span>对谁：</span><input class="edit" type="text"></div><div class="row"><span>说什么：</span><input class="edit" type="text"></div><div class="row"><input type="button" value="提交" class="submit"></div></div>

然后再使用style标签和CSS选择器进行样式的调整。

    <!-- 调整样式 --><style>* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}</style>

3. 实现提交

    <!-- 实现提交 --><script>// 给点击按钮注册点击事件var submit = document.querySelector('.submit');submit.onclick = function() {//1. 获取到编辑框的内容var edits = document.querySelectorAll('.edit');var from = edits[0].value;var to = edits[1].value;var message = edits[2].value;console.log(from + "," + to + "," + message);if (from == '' || to == '' || message == '') {return;}//2. 构造新元素var row = document.createElement('div');row.className = 'row';row.innerHTML = from + '对' + to + '说：' + message;//3. 添加新元素var container = document.querySelector('.container');container.appendChild(row);//4. 同时清理之前输入框的内容for (var i = 0; i < 3; i++) {edits[i].value = '';}}</script>

尝试提交一个：

最终样式

待办事项

1. 添加内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的待办清单</title>
</head>
<body><div class="nav"><input type="text" class="task"><button>新建任务</button></div><div class="container"><div class="todo"><h3>未完成</h3></div><div class="done"><h3>已完成</h3></div></div></body>
</html>

这里非常丑陋对吧！所以我们要对其进行调整~

2. 调整样式

    <style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 800px;margin: 0 auto;display: flex;}.todo, .done {width: 50%;height: 100%;}.container h3 {height: 50px;text-align: center;line-height: 50px;background-color: #333;color: #fff;}.nav {width: 800px;height: 100px;margin: 0 auto;display: flex;align-items: center;}.nav input {width: 600px;height: 50px;}.nav button {width: 200px;height: 50px;border: none;background-color: orange;color: #fff;}</style>

实现功能

新增待办事项

    <!-- 实现功能 --><script>// 新增待办事项var addTaskBtn = document.querySelector('.nav button');addTaskBtn.onclick = function() {//1. 获取任务内容var input = document.querySelector('.nav input');var task = input.value;//2. 根据任务内容创建新元素var row = document.createElement('div');row.className = 'row';var checkbox = document.createElement('input');checkbox.type = 'checkbox';var span = document.createElement('span');span.innerHTML = task;var button = document.createElement('button');button.innerHTML = '删除';row.appendChild(checkbox);row.appendChild(span);row.appendChild(button);//3. 将新节点放到未完成列表中var todo = document.querySelector('.todo');todo.appendChild(row);//4. 清空输入框中的内容input.value = '';}</script>

可以看到，新增加的布局挤在了一起，因此我们对其样式进行调整，可以直接在上面的 style 标签内对样式进行设置。

        .row {height: 50px;display: flex;align-items: center;}.row input {margin: 0 10px;}.row span {width: 300px;}.row button {width: 50px;height: 40px;}

更改后，整体看起来更加舒适。

已完成事项

注意，这里应该是当用户点击未完成事项前面的复选框时，页面再将元素放到已完成事项中。

         // 此处的代码仍然是写在addTaskBtn的点击事件中// 已完成// 1.给checkbox注册点击事件checkbox.onclick = function() {// 获取父元素var row = this.parentNode;// 先出发checked为true，在调用onclick函数if (this.checked) {var target = document.querySelector('.done');} else {var target = document.querySelector('.todo');}target.appendChild(row);}

可以看到，点击待办事项前面的复选框之后，事项移动到了已完成中，再点击已完成中的复选框，则事项又回到未完成列表中。

删除任务

最后，我们给事项后面的删除按注册点击事件，完成删除任务的功能。

同样是直接将代码添加在在addTaskBtn的点击事件中。

            // 删除任务button.onclick = function() {var row = this.parentNode;var grandParent = row.parentNode;grandParent.removeChild(row);}

效果就留给大家自己去试试吧~

最后

今天的两个案例就分享到这里啦~
相信这对你来说一点都不难！
通过这两个案例的练习，你一定对前面介绍的内容有了掌握得更加熟练了！
最后，完整代码已经上传到gitee啦~
如果对于前面分段给出的代码不太理解，欢迎到我的码云上自取啦！

表白墙完整代码链接

待办事项完整代码链接

如果你觉得这篇文章对你有帮助，记得给我一键三连噢~~

【代码案例】网页版表白墙待办事项（包含完整源码）相关推荐

【代码案例】博客页面设计（附完整源码）
博客页面设计博客列表页实现导航栏实现版心实现个人信息实现博客列表实现博客正文页引入导航栏.版心.个人信息实现博客正文实现博客登录页引入导航栏实现版心和登录框实现博客编辑页引入 ...
代码案例—— web版表白墙及文件上传
文章目录实现一个 web 表白墙准备工作约定前后端交互接口实现服务器端代码调整前端页面代码数据存入数据库实现效果上传文件核心方法代码示例--通过网页提交一个图片到服务器上实现一个 ...
H5版仿制微信跳一跳小游戏，网页版仿微信跳一跳小游戏源码，实现了跳一跳的基本核心功能
H5版仿制微信跳一跳小游戏,网页版仿微信跳一跳小游戏源码,实现了跳一跳的基本核心功能完整代码下载地址:H5版仿制微信跳一跳小游戏,网页版仿微信跳一跳小游戏源码运行截图 Project setup ...
第一行代码-android-第三版-pdf扫描-思维导图-课件-源码
第一行代码-android-第三版-pdf扫描-思维导图-课件-源码一帮公众号各种要你关注, 各种压缩包层层套娃要密码, 还要进群, 真他妈日了gou了,找了半天分享给大家, 毫无套路! pdf扫 ...
网页策略游戏《绝地战争》完整源码下载
绝地战争网页策略游戏源码,服务端用java,前端用flash as3,解压后701mb 战争>宏大的陆空作战战场.国战系统.兵种之间的相克关系,是战斗更加变化多端,野地建设.殖民系统推动玩家的城 ...
最新校园表白墙源码PHP网页版表白墙介绍
首先是简洁大气的页面设计: 功能1: 白天黑夜模式切换: 超多功能样式选择: 切换主题: 手机端: 其他的快来亲自体验咯! 表白墙源码安装: 先安装13i4表白墙2.0版本:http://vip.ig ...
好看的表白墙LoveCards v1.0.4 源码（开源）
简介: 1.0.0/2.10 完成原版基础全部功能去掉部分鸡肋共功能新增: 后台表白卡编辑功能后台评论编辑功能后台管理员功能用户表白卡搜索功能门户首页"热度排名"功能 ...
案例:使用vue开发微信机器人聊天(附完整源码)
先看效果: 实现过程: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
今天给大家分享一个HTML5的钢琴代码，可以弹奏的哦！（附完整源码）
它是一个可以弹奏的钢琴,所以它需要音频文件,在这里发不了,这里只有代码,音频文件的分享在文章末尾哦. <!doctype html> <html lang="en" ...

【代码案例】网页版表白墙待办事项（包含完整源码）

网页版表白墙

表白墙

1. 创建内容

2. 调整样式

3. 实现提交

最终样式

待办事项

1. 添加内容

2. 调整样式

实现功能

新增待办事项

已完成事项

删除任务

最后

【代码案例】网页版表白墙待办事项（包含完整源码）相关推荐

最新文章

热门文章

【代码案例】网页版表白墙 待办事项 （包含完整源码）

网页版表白墙

表白墙

1. 创建内容

2. 调整样式

3. 实现提交

最终样式

待办事项

1. 添加内容

2. 调整样式

实现功能

新增待办事项

已完成事项

删除任务

最后

【代码案例】网页版表白墙 待办事项 （包含完整源码）相关推荐

最新文章

热门文章

【代码案例】网页版表白墙待办事项（包含完整源码）

【代码案例】网页版表白墙待办事项（包含完整源码）相关推荐