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

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

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

效果如图:


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

代码(需要自己引入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实现留言以及删除功能” 的相关文章

全网首发 羊了个羊通关方法(推荐技巧四,最简单)

全网首发 羊了个羊通关方法(推荐技巧四,最简单)

游戏介绍 这是啥游戏?据悉,这是一款卡通背景的消除闯关游戏。玩家们需要点击上方卡牌,被选中的卡牌会下移到底部的木框中,框内最多可以储存7张卡牌,当有3张相同的卡牌同置于框内时,则可达成消除。 效果截图羊了个羊无限道具版 在线体验 --- >>>立即体验...

有人给你发了匿名短信

有人给你发了匿名短信

【匿名短信】终于和大家见面了!每个人的心中,应该都会有一些忘不了的人或事!也许是遗憾的,是痛苦的,亦或是开心的,是幸福的...但最让你忘不了的,还是那个陪你创造回忆的TA...现在的你们,也许断了联系,没了交谈,但心里时不时却还会念着对方...【匿名短信】的上线,就是为了帮助你去和心中的Ta对话只需...

万策云网络工作室旗下高性能服务器,保证用户数据安全

万策云网络工作室旗下高性能服务器,保证用户数据安全

万策云工作室旗下所有业务均使用1T高防高性能服务器,数据定时备份,多台服务器实时同步数据,保障用户数据安全!多台服务器定时备份,企业级安全,50m独享,大带宽抗cc文件实时同步备份,数据库定时备份。主服务器采用T级群防,150G单机防御的国内高性能服务器。秒解机器!真实可测客户数据丢了都可以找回来...

MyBatis-写分页的几种方法,怎么写分页最简单

MyBatis-写分页的几种方法,怎么写分页最简单

1、就是直接使用我们的SQL语句进行分页,也就是在Mapper里面加上分页的语句就好了。比如MySQL添加一个limit 2,4。这种方式弊端很大,比如我们不用MySQL了,所有的代码都要修改。2、MyBatis中的分页的插件PageHelper,3、自己手写分页框架。这种用的比较少,不是说写不出来...

在mybatis中使用mysql存储过程-教学

在mybatis中使用mysql存储过程-教学

mysql  存储过程 ,教程来源:廖万里的CSDNMysql中的方法, 好处:安全,复用。缺点:不利于修改。1,将以下储存过程代码复制到mysql数据库中进行执行DELIMITER ;;CREATE DEFINER=`root`@`localhost`&nb...

python如何连接mysql数据库

python链接mysql数据库要用到pymysql模块中的connect ,connect函数是pymysql模块中 用于连接MySQL数据库的一个函数。 所以连接mysql之前需要先导入pymysql模块 location.href="ht...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。