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异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
详解如何在Canvas中添加事件的方法
Apr 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 文件上传系统手记
2009/10/26 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php生成无限栏目树
2017/03/16 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
python服务器与android客户端socket通信实例
2014/11/12 Python
python3爬取各类天气信息
2018/02/24 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python的pip有什么用
2020/06/17 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
美术毕业生求职信
2014/02/25 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
思想道德自我评价2015
2015/03/09 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python