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 Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
JS作用域链详解
Jun 26 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
关于React Native 无法链接模拟器的问题
Jun 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中一个控制字符串输出的函数
2006/10/09 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
php Session无效分析资料整理
2016/11/29 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
Ref与out有什么不同
2012/11/24 面试题
教师年终个人自我评价
2013/10/04 职场文书
中学自我评价
2014/01/31 职场文书
倡议书范文格式
2014/05/12 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
Python集合set()使用的方法详解
2022/03/18 Python
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js