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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
详解python中index()、find()方法
2019/08/29 Python
利用python计算时间差(返回天数)
2019/09/07 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python序列化pickle模块使用详解
2020/03/05 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
九年级体育教学反思
2014/01/23 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
Python实现信息管理系统
2022/06/05 Python