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 相关文章推荐
清华大学出版的事半功倍系列 javascript全部源代码
May 04 Javascript
js有关元素内容操作小结
Dec 20 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
vue分页插件的使用方法
Dec 25 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
利用 JavaScript 构建命令行应用
Nov 17 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网站备份程序代码分享
2011/06/10 PHP
php文件系统处理方法小结
2016/05/23 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
python 读写、创建 文件的方法(必看)
2016/09/12 Python
打包发布Python模块的方法详解
2016/09/18 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
python操作文件的参数整理
2019/06/11 Python
简单了解python单例模式的几种写法
2019/07/01 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
学生会个人自荐书范文
2014/02/12 职场文书
幼儿教师国培感言
2014/02/19 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
连锁超市项目计划书
2014/09/15 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js