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 相关文章推荐
js Math 对象的方法
Sep 01 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 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 miniBB中文乱码问题解决方法
2008/11/25 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
Javascript中神奇的this
2016/01/20 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Python页面加载的等待方式总结
2021/02/28 Python
家庭教育的心得体会
2014/09/01 职场文书
四风自我剖析材料
2014/09/30 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
法律意见书范本
2015/06/04 职场文书
博物馆观后感
2015/06/05 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript