位置: IT常识 - 正文

js+css+html制作简易留言板(利用html css javascript做一个网页)

编辑:rootadmin
js+css+html制作简易留言板 js+css+html制作简易留言板1 案例说明2 编写HTML代码3 编写css代码4 编写JavaScript代码5 全部代码1 案例说明

推荐整理分享js+css+html制作简易留言板(利用html css javascript做一个网页),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:利用html css javascript做一个网页,js html css,html+css+js网页制作,html css js 教程,javascript+html+css,javascript+html+css,html+css+javascript网页制作,js css html设计,内容如对您有帮助,希望把文章链接给更多的朋友!

利用JavaScript、css以及html制作简易留言板,也可以看作是简易评论区。

要求在页面文本框中输入一些文字之后,点击“发布”按钮,就可以让输入的文字显示在下面,重新输入一些文字,再点击发布,就可以让新发布的内容显示在最上面。点击后面的删除,就可以删除已经发布的文字。

【案例分析】利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素,添加到ul里面。

js+css+html制作简易留言板(利用html css javascript做一个网页)

效果图: 点击发布之后: 再输入一行文字: 点击发布: 点击最下面的那一条删除之后:

2 编写HTML代码

在HTML页面中的元素比较简单,需要一个<textarea>标签,用来输入留言,一个<button>标签,用来发表留言,以及一个<ul>标签,用来显示留言的内容。

<textarea></textarea> <button>发布</button> <ul></ul>

3 编写css代码

CSS代码主要对留言板的样式进行一些设置。首先让页面中的外边距和内边距都为0,让留言板靠中心移动一些。

* { margin: 0; padding: 0; } body { padding: 100px; }

接着设置输入框的属性,设置宽高、边框颜色,轮廓样式以及是否可以改变大小。轮廓就是当<textarea>聚焦时出现的黑色的边框。

textarea { width: 200px; height: 100px; border: 1px pink solid; /* 不设置轮廓 */ outline: none; /* 设置其不能改变长宽 */ resize: none; }

设置评论li的样式。这部分设置到现在是看不出效果的,因为目前还没有评论,需要在设置完JavaScript之后搭配动态效果才可以。设置评论的宽度,内边距,背景色,字体大小,外边距,为了让评论更加的好看。

li { width: 300px; padding: 5px; background-color: #eee; font-size: 15px; margin: 15px 0; }

设置删除的样式。删除使用a标签来设置,将其向右浮动。

li a { float: right; }4 编写JavaScript代码

在JavaScript部分中,需要为按钮绑定事件。当点击按钮时,如果文本框内没有文字,则弹出提示;如果有文字,则将该文字添加到下方的ul的li中,因此这个过程中需要添加li,并且添加a标签作删除功能,点击删除时删除该li元素。

//1、获取元素 var txt = document.querySelector("textarea"); var btn = document.querySelector("button"); var ul = document.querySelector("ul"); //2、给button绑定点击事件 btn.onclick = function () { if (txt.value == "") {//当文本框中没有文字时,提示 alert("您没有输入内容") } else { //创建元素li作为留言区 var li = document.createElement("li"); //将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行 li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>" txt.value = "";//添加之后文本框的内容清空 //将留言添加到ul中,而且在最上方 ul.insertBefore(li, ul.children[0]); //当点击删除时删除ul中的li var as = document.querySelectorAll("a"); //循环给每个删除绑定事件 for (var i = 0; i < as.length; i++) { as[i].onclick = function () { //删除当前a标签所在位置的父节点li ul.removeChild(this.parentNode); } } } }5 全部代码<!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>Document</title></head><style> * { margin: 0; padding: 0; } body { padding: 100px; } textarea { width: 200px; height: 100px; border: 1px pink solid; /* 不设置轮廓 */ outline: none; /* 设置其不能改变长宽 */ resize: none; } li { width: 300px; padding: 5px; background-color: #eee; font-size: 15px; margin: 15px 0; } li a { float: right; }</style><body> <textarea></textarea> <button>发布</button> <ul></ul> <script> //1、获取元素 var txt = document.querySelector("textarea"); var btn = document.querySelector("button"); var ul = document.querySelector("ul"); //2、给button绑定点击事件 btn.onclick = function () { if (txt.value == "") {//当文本框中没有文字时,提示 alert("您没有输入内容") } else { //创建元素li作为留言区 var li = document.createElement("li"); //将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行 li.innerHTML = txt.value + "<a href='javascript:;'>删除</a>" txt.value = "";//添加之后文本框的内容清空 //将留言添加到ul中,而且在最上方 ul.insertBefore(li, ul.children[0]); //当点击删除时删除ul中的li var as = document.querySelectorAll("a"); //循环给每个删除绑定事件 for (var i = 0; i < as.length; i++) { as[i].onclick = function () { //删除当前a标签所在位置的父节点li ul.removeChild(this.parentNode); } } } } </script></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/300537.html 转载请保留说明!

上一篇:计算机视觉项目实战-背景建模与光流估计(目标识别与追踪)(计算机视觉项目文档)

下一篇:MMEngine理解

  • 买一赠一的税务处理
  • 固定资产处置收入怎么报税
  • 库存盘盈盘亏要调整吗
  • 增值税未缴款能清卡吗
  • 发票作废后对方不退回抵扣联怎么办
  • 个税缴款三方协议
  • 劳务所得报酬
  • 代收税款
  • 劳务报酬申报个税后还需要开发票吗
  • 补税款的分录应该怎么写
  • 个贷系统平账专户利息分录
  • 企业向境外支付货款填写
  • 集团公司内部无偿借贷增值税
  • 客户少付货款怎么做账
  • 教育费附加记账
  • 制造企业享受增值税政策
  • 城市垃圾处理项目
  • 税金当月计提当月缴纳
  • 招待费进项税额转出在申报表
  • 苹果电脑怎么升级系统到最新版本
  • 电脑折旧率计算公式
  • 私账的钱怎么弄到公账
  • 辅助生产车间工人工资
  • 运行项目报错Couldn't import Django
  • Win11 Build 22000.348更新补丁KB5007262预览版发布(附更新修复内容汇总)
  • 年终奖发放形式 更改 税务局
  • 买房 印花税
  • 碧峰峡熊猫基地门票
  • 东洛锡安的金黄麦田,苏格兰 (© Scott Masterton/plainpicture)
  • 旺阿雷自然保护区里的旺阿雷瀑布,新西兰北岛 (© Nathan Kavumbura/Getty Images)
  • 增值税加计抵减企业所得税如何处理
  • 红字专用发票开具的规定
  • php中验证码如何实现登录验证
  • 小规模企业应交税费
  • 服务费减免税款怎么算
  • 清算期间还需要报税吗
  • Python函数怎么返回
  • 个税申报赡养老人可以填公婆吗
  • 吸收合并和新设合并哪个更好
  • mysql存储语句
  • mysql 索引 key
  • 业务招待费的列支范围
  • 文化建设费税率
  • 9个点的税是多少
  • 房租没有发票如何处理
  • 管理费用漏记了跨年调整
  • 一般纳税人福利费
  • 销售固定资产如何申报企业所得税
  • 技术员差旅费计入哪个会计科目
  • 模具报价成本核算方法
  • 预收账款过多,税务让说明原因
  • 一个营业执照可以开几个店铺
  • 费用分割单是什么
  • 施工期间水电费没有发票财务不给报销
  • sqlserver正则表达式替换列
  • raid1 hot spare
  • windows8休眠如何唤醒
  • 两种方法解决一年级看图问题
  • 电脑svchost占用cpu很大
  • linux oracle 12505
  • Win10预览版拆弹
  • 常见unix操作系统
  • win8的设置
  • linux文件批处理命令
  • Ext中下拉列表ComboBox组件store数据格式用法介绍
  • unity开发用什么电脑比较好
  • linux 环境 mysql写入中文报错
  • javascript概述
  • 如何将python中的列表与数据对齐
  • 胰腺在人体的哪个部位图解
  • js对象的常用方法
  • 在androidstudio中,如何改变图片的位置
  • 山东网上信访投诉平台
  • 怎么代理保险业务
  • 丰田2.0和2.5混动发动机
  • 税务延期申报最长多久
  • 安徽高考实行什么模式
  • 黄金消费税如何算
  • 河南网上报税流程图
  • 优化营商环境关于人才工作
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设