HTML+CSS+JS案例展示(留言板)

参考来源：

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

网页GitHub地址如下：（若加载较慢建议刷新后耐心等待一会~）

js_bbs

主要功能：

未输入内容时点击发送按钮，会弹出对话框提示；
输入内容后点击发送按钮，文本内容会显示在下方区域。

网页代码如下：

HTML：

<!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>js_bbs</title><link rel="stylesheet" href="index.css">
</head>
<body><p>留言板:</p><textarea name="bbs" id="bbs" cols="30" rows="10"></textarea><button>发布</button><p>评论区:</p><ul></ul><script src="index.js"></script>
</body>
</html>

CSS：

textarea {outline: none;margin: 0 0 10px 100px;
}
ul {margin: 0;padding: 0;
}
li {list-style: none;margin: 10px 0 10px 100px;font-size: 16px;color: pink;
}

JS:

var ul = document.querySelector('ul');
var text = document.querySelector('textarea');
var btn = document.querySelector('button')
btn.onclick = function() {if (text.value == '') {alert('您没有输入内容');return false;}else {var li = document.createElement('li');li.innerHTML = text.value;ul.insertBefore(li,ul.children[0]);}
}

HTML+CSS+JS案例展示(留言板)相关推荐

HTML+CSS+JS案例展示(跟随鼠标移动的小人)
参考来源: JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili ...
js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明利用JavaScript.css以及html ...
html简单留言板教程,JS实现简易留言板（节点操作）
本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下今天的案例主要是对节点进行操作创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留 ...
Tornado入门案例：留言板
Tornado入门案例:留言板前言 Tornado框架实操:搭建一个hello world 完整代码与前端页面前言所使用的框架:Torndao框架 python 主流的开发框架 Tornado ...
node.js小案例_留言板
一.前言通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向二.主要内容 1.案列演示: 2.案列源码:https://github.com/456123 ...
三、案例：留言板 url.parse()
1. url.parse()的使用 2. 留言板案例 index.html: <!DOCTYPE html> <!-- saved from url=(0027)http://192 ...
JS实现简易留言板功能
一.分析 1.留言板功能 ①发布评论 ②删除评论 2.发布功能 ①发布评论前判断评论框(用textarea输入评论)是否为空 ②点击发布按钮,发布评论(用li展示评论,开始评论为空,html部分< ...
android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
html简易留言,JS实现简易留言板特效
本文实例为大家分享了JS实现留言板特效的具体代码,供大家参考,具体内容如下知识点 1.textarea 大段输入框 2.value获取输入框的值 3.innerHTML所用东西:innerText文 ...

HTML+CSS+JS案例展示(留言板)

网页GitHub地址如下：（若加载较慢建议刷新后耐心等待一会~）

主要功能：

网页代码如下：

HTML：

CSS：

JS:

HTML+CSS+JS案例展示(留言板)相关推荐

最新文章

热门文章