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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
js实现div在页面拖动效果
May 04 Javascript
js canvas实现擦除动画
Jul 16 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
浅谈vue.use()方法从源码到使用
May 12 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
JavaScript中使用Spread运算符的八种方法总结
Jun 18 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
php5 and xml示例
2006/11/22 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python 自动补全(vim)
2014/11/30 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
数控技术与应用毕业生自荐信
2013/09/24 职场文书
HR求职自荐信范文
2014/06/21 职场文书
社区好人好事材料
2014/12/26 职场文书
计算机专业自荐信
2015/03/05 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis