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 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
Python实现的读写json文件功能示例
2018/06/05 Python
使用Python进行目录的对比方法
2018/11/01 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
python实现大文本文件分割
2019/07/22 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
心理健康活动总结
2014/04/30 职场文书
医学求职自荐信
2014/06/21 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python