当前位置：首页 > 学习笔记 > 正文内容

制作简易留言板html5，使用jquery实现留言以及删除功能

廖万里3年前 (2022-09-09)学习笔记132499

效果如图：

代码（需要自己引入jquery）：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>简易留言板</title>
    <script src="js/jquery.js"></script>
	<!-- 廖万里 -->
	<!-- 廖万里的博客：www.kkkliao.cn  -->
	<!-- 一封云来信：nmx.kkkLiao.cn  -->
</head>
 
<body>
    <h1>简易留言板</h1>
    <input id="msg" type="text" size="40" value="请输入留言">
    <input id="btn" type="button" value="留言">
    <div id="content"></div>
</body>
<script>
    $(function () {
        
        //提交留言方法
        function submitForm() {
            var content = $("#content");
            var ul = $("<ul id='list'></ul>");
            var li = $("<li></li>");
            li.html($("#msg").val() + " <span>删除</span>");
            ul.append(li);
            $("#msg").val('请输入留言');
            li.children('span:first').click(function () {
                $(this).parent().parent().remove();
            })
            content.append(ul);
        }
        //点击提交按钮，提交留言
        $("#btn").click(function () {
            submitForm();
        })
        $(document).keydown(function (event) {
            //按下Enter键时，提交留言
            if (event.keyCode == 13) {
                submitForm();
            }
        })
		// 获取焦点
		$("#msg").focus(function(){
			$("#msg").val("");
		});
		// 失去焦点
		$("#msg").blur(function(){
			$("#msg").val("请输入留言");
		});
 
    })
</script>
 
</html>

本文链接：https://www.kkkliao.cn/?id=19 转载需授权！

分享到：

返回列表

上一篇：html5使用表单事件实现用户登录功能 jquery

下一篇：h5网页版字母消除游戏制作，html+jquery

“制作简易留言板html5，使用jquery实现留言以及删除功能” 的相关文章

如何在Linux中使用宝塔面板部署javaWeb项目

最近在centos7.2上使用宝塔面板部署javaweb项目，在网上找的资料很少不全，我特意来总结一下。。。1、使用putty 进入Linux就不多说了2、进入宝塔官网https://www.bt.cn/3、选择在线安装即可4、推荐使用Linux系统安装，Windows没有Linux系统...

PHP环境搭建（推荐宝塔面板）

初学者推荐安装集成环境，不建议分别安装，集成环境包含php、mysql、apache、其他php、mysql、apache分别安装的需要相互之间配置，对初学者不友好，一般开发也不需要，特殊生产环境才需要；Windows：宝塔面板（推荐）、phpstudy（https://www.xp.cn/）Mac...

如何使用kaliLinux攻击“恶意网站“实验

此内容仅为参考或学习,请勿用于其他非法用途用nmap扫描IP地址为8.142.***.***服务器的漏洞nmap --script vuln 8.142.***.***漏洞已经扫描出来了,出现"vulnerable"说明有漏洞下面"ids:...

Kali Linux渗透-DNS域名劫持与钓鱼

前言严正声明：本文仅限于技术讨论与分享，严禁用于非法途径。本文目的演示如何借助 Kali Linux 系统内置的一款基于ARP地址欺骗的网络嗅探工具Ettercap，对局域网内的 Win7 主机进行 DNS 域名劫持，从而使得受害主机访问新浪官网（或其他任意网站）的域名时跳转到 Kali 攻击机指定...