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 相关文章推荐
node+express+jade制作简单网站指南
Nov 26 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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传参之传值与传址的区别
2015/04/24 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
[00:50]深扒TI7聊天轮盘语音出处6
2017/05/11 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
浅析Python数据处理
2018/05/02 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python 数据类型强制转换的总结
2021/01/25 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
北京天润融通.net面试题笔试题
2012/02/20 面试题
草船借箭教学反思
2014/02/03 职场文书
自我检讨书怎么写
2015/05/07 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书