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 相关文章推荐
新老版本juqery获取radio对象的方法
Mar 01 Javascript
js document.write()使用介绍
Feb 21 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
原生JS实现pc端轮播图效果
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下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
浅析PHP开发规范
2018/02/05 PHP
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
three.js实现圆柱体
2018/12/30 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
mac下如何将python2.7改为python3
2018/07/13 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
python代码区分大小写吗
2020/06/17 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
公司清洁工岗位职责
2013/12/14 职场文书
年度考核评语
2014/01/19 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
班级体育活动总结
2014/07/05 职场文书
法人身份证明书
2014/10/08 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
预备党员转正材料
2014/12/19 职场文书
博士论文答辩开场白
2015/06/01 职场文书
三十年同学聚会感言
2015/07/30 职场文书
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS