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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 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遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
sina的lightbox效果。
2007/01/09 Javascript
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
护士毕业生自我鉴定
2014/02/08 职场文书
yy婚礼主持词
2014/03/14 职场文书
三八妇女节活动总结
2014/05/04 职场文书
绿色出行口号
2014/06/18 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
奖学金感谢信
2015/01/21 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书