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创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
python脚本实现查找webshell的方法
2014/07/31 Python
Python中的列表知识点汇总
2015/04/14 Python
python创建临时文件夹的方法
2015/07/06 Python
Python的迭代器和生成器
2015/07/29 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Python基于内置函数type创建新类型
2020/10/22 Python
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
大学生入党推荐书范文
2014/05/17 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
物资采购管理制度
2015/08/06 职场文书
生日寿星公答谢词
2015/09/29 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
世界十大狙击步枪排行榜
2022/03/20 杂记