JS定时器如何实现提交成功提示功能


Posted in Javascript onJune 12, 2020

应用场景:

用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功。

HTML:

{#评论成功提示#}
<div class="popup_con" style="display: none; margin-left: 300px">
    <div class="popup" >
        <p style="color: red; font-size: 16px">评论成功!</p>
    </div>
    <div class="mask"></div>
 </div>

js:

// 评论成功提示定时器
 // 定一定时器函数
 function showSuccessMsg() {
   $('.popup_con').fadeIn('fast', function () {
     setTimeout(function () {
       $('.popup_con').fadeOut('fast', function () {
       });
     }, 2000)
   });
 }

 // 提交评论
 $("#form_comment").submit(function (event) {
   event.preventDefault();
   var comment = $('#comment').val();
   var data = {
     "comment": comment
   };
   $.ajax({
     url: "/task_mgm/taskinfo_comment=" + taskId,
     type: "POST",
     data: JSON.stringify(data),
     contentType: "application/json", // 传给后端的数据类型
     dataType: "json", // 接收后端的数据类型
     success: function (resp) {
       if (resp.error == 'OK') {
              showSuccessMsg();
              {#alert('评论成功');#}
              $('#comment').val(''); //清空评论框
            } else {
              alert('评论失败');
            }
          }
        })
      })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
vue+egg+jwt实现登录验证的示例代码
May 18 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
ng-alain的sf如何自定义部件的流程
Jun 12 #Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 #Javascript
基于Web Audio API实现音频可视化效果
Jun 12 #Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 #Javascript
学前端,css与javascript重难点浅析
Jun 11 #Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 #Javascript
You might like
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python实现教务管理系统
2018/03/12 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
平面设计岗位职责
2013/12/14 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
总经理司机职责
2014/02/02 职场文书
大学生就业意向书范文
2014/04/01 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
python高温预警数据获取实例
2022/07/23 Python