实战案例：表白墙

用CSS,HTML和JS中一些比较基础的知识设计一个简单的表白墙，其中css样式比较简单，有兴趣的同学可发挥想象自行修改。表白墙发送的内容会以div标签的方式生成在下方。

注意：该表白墙上的数据并不具备持久性，只能保存在当前网页中，一旦页面刷新或者关闭了，这里的数据就没了。如果想要长久的保存数据，可以将这些数据提交到服务器上，然后由服务器将数据储存在文件或者数据库中。但本文介绍的是和JS前端等有关的知识，数据库或者其他知识这里不展开了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="container"><!--    设置标题--><h1> 表白墙</h1><p>输入后点击提交，会将信息显示在墙上</p><div class="row"><span>谁</span><input type="text" class="edit"></div><div class="row"><span>对谁</span><input type="text" class="edit"></div><div class="row"><span>说什么</span><input type="text" class="edit"></div><div><input type="button" value="提 交" id="submit"></div>
<!--    每次点击提交，都会在下面新增一个row,里面放置用户输入的话-->
</div>
<script>let submitButton=document.querySelector('#submit');submitButton.onclick=function () {//1.先获取到输入框中的内容let edits=document.querySelectorAll('.edit');let from=edits[0].value;let to=edits[1].value;let  message=edits[2].value;console.log(from+"对"+to+"说"+message);if(from =='' || to=='' || message==''){//对用户输入做一个简单的校验，验证当前输入是否是合法的提交return;}//2.根据内容构造 HTML 元素  (.row 里面包含用户输入的话);let row=document.createElement('div');row.className = 'row';row.innerHTML=from+' 对 '+to+' 说 '+message;//3.把这个新的元素添加到Dom树上let container=document.querySelector('.container');container.appendChild(row);//4.清空原来的输入框for(let i=0;i<edits.length;i++){edits[i].value='';}}
</script>
<style>* {margin:0;padding: 0;box-sizing: border-box;}.container{width: 400px;margin: 0 auto;}h1{text-align: center;padding: 20px 0;color:red;}p{text-align: center;color:#666;padding: 10px 0;font-size: 14px;}.row{height: 50px;display: flex;justify-content: center;align-items: center;}span{width: 90px ;font-size: 20px;color: black;}input{width: 310px;height: 40px;}#submit{width: 400px;color: white;background-color: orange;border: none;border-radius: 14px;font-size: 18px;}#submit:active{background-color: blue;}.edit{font-size: 18px;padding-left: 5px;}
</style>
</body>
</html>

运行效果：

备忘录

效果图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>备忘录</title>
</head>
<body><!--创建输入框和新建任务按钮--><div class="nav"><input type="text"><button>新建任务</button></div><!-- 下面包含了左右两个内容区域 --><div class="container"><!--  左侧结构 --><div class="todo"><h3>未完成</h3>
<!--     举例子         -->
<!--              <div class="row">-->
<!--                  <input type="checkbox">-->
<!--                  <span>吃饭</span>-->
<!--                  <button>删除</button>--><!--              </div>--></div><!-- 右侧结构 --><div class="done"><h3>已完成</h3></div></div><style>*{margin:0;padding:0;box-sizing: border-box;}.nav{/*background-color: red;*/width:800px;height:100px;margin: 0 auto;display: flex;align-items: center;}/* 任务的输入框*/.nav input{height: 50px;width: 600px;}.nav button{height: 50px;width: 200px;background-color: orange;border-radius: 5px;color:black;/*//border: none;*/}.container{background-color: orange;width:800px;height: 800px;margin: 0 auto;display: flex;}.container h3{height: 50px;text-align: center;line-height: 50px;background-color: #333;color:white;}.todo{background-color: darkgray;width: 400px;height: 100%;}.done{/*background-color: blue;*/width:50%;height: 100%;}.row{height: 50px;display: flex;align-items: center;}.row input{/*设置上下外边距为0 左右外边距为10px*/margin:0 10px;}.row span{width:300px;}.row button{width:50px;height:40px;}</style><script>//实现新建任务功能//1.获取新增按钮let addTaskButton=document.querySelector('.nav button');//2.给新增按钮注册一个点击事件addTaskButton.onclick=function () {//3.获取输入框中的内容let input=document.querySelector('.nav input');let taskContent=input.value;if(taskContent==''){console.log('当前任务为空，无法新增任务！');return ;}//1.4 根据任务内容创建元素（类似于上面的div）let row=document.createElement('div');row.className='row';let checkbox=document.createElement('input');checkbox.type='checkbox';let span=document.createElement('span');span.innerHTML=taskContent;let button=document.createElement('button');button.innerHTML='删除';//将上面创建的对象挂到DOM树上row.appendChild(checkbox);row.appendChild(span);row.appendChild(button);let todo=document.querySelector('.todo');todo.appendChild(row);//清空输入框input.value='';//实现 已完成功能，针对 checkbox 新增一个点击事件处理函数checkbox.onclick=function () {//  row对象 是创建出的选项//  根据row的状态判断是否加入完成事件中。if(checkbox.checked){//选中状态，把row放到done里面let target=document.querySelector('.done');target.appendChild(row);}else{//未选中状态 把row放入todolet target=document.querySelector('.todo');target.appendChild(row);}}//实现删除功能//针对删除按钮增加一个点击事件button.onclick=function () {let parent=row.parentNode;parent.removeChild(row);}}</script>
</body>
</html>

上面这段代码的作用就是由JS直接生成一个HTML片段。

运行效果：

前端~javascript~实战案例：网页表白墙/实战案例：简单实现一个备忘录~相关推荐

HTML5期末大作业：网购网站设计——品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码学生简单购物网站设计成品
HTML5期末大作业:网购网站设计--品优购(4页) HTML+CSS+JavaScript 大学生网购网页设计模板代码学生简单购物网站设计成品常见网页设计作业题材有个人. 美食. 公司. 学校 ...
12-代码实战——服务器版表白墙
目录 1.版本一:将数据存到内存中 ①约定前后端交互接口 a.添加表白信息: b.查询表白列表: ②在webapp包下创建message-wall.html前端文件 ③在java包下创建AddMess ...
情人节程序员用HTML网页表白【冬季雪花生日礼物制作一个超浪漫的告白3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
小程序仿朋友圈、表白墙应用实现简单的发表功能
本人学习了小程序一个多月,刚开始时不知做些什么,就仿照微信朋友圈做了些内容,现在分享一下实现发表功能的代码,身为一个菜鸟,也请大佬们多指点! 先附上两张图片两张比较简洁的页面,发表的时候进入发表页面 ...
网页爬虫（超超简单的一个小例子）
(一) 目标: 在Uniprot中查询一系列基因编号(如图中第二列gene)对应的详细信息,基因编号以csv格式存储,输出的详细信息也存入csv中 (二) 思路: 查询了几个基因编号之后发现, ...
代码案例—— web版表白墙及文件上传
文章目录实现一个 web 表白墙准备工作约定前后端交互接口实现服务器端代码调整前端页面代码数据存入数据库实现效果上传文件核心方法代码示例--通过网页提交一个图片到服务器上实现一个 ...
在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
如何搭建表白墙网站（LoveWall），Linux搭建网站教程
用宝塔面板和开源表白墙程序LoveWall 搭建一个表白墙网站. LoveWall是一个基于Thinkphp开发的表白墙. 特色功能点赞发评论发弹幕多校区分享页涉证.涉H.暴力.违禁 ...
html版本的简单的表白墙
实现一个简单的表白墙(html) 实现一个这样的表白墙 <!DOCTYPE html> <html lang="en"> <head><m ...
html5网页前端设计当当,HTML5网页前端设计实战
本书是一本从零开始学习的Web前端开发教材,无需额外的基础.本书以项目驱动为宗旨,详细介绍了HTML5.CSS3与JavaScript的基础知识与使用技巧.本书包含例题228个,均在浏览器中调试通过. ...

前端~javascript~实战案例：网页表白墙/实战案例：简单实现一个备忘录~

文章目录

实战案例：表白墙

备忘录

前端~javascript~实战案例：网页表白墙/实战案例：简单实现一个备忘录~相关推荐

最新文章

热门文章