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 17 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
Jquery-data的三种用法
Apr 18 jQuery
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 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
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php Calender(日历)代码分享
2014/01/03 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
常用的javascript设计模式
2017/01/11 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
python迭代器实例简析
2014/09/25 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
高中生期末评语
2014/01/28 职场文书
小学教师评语大全
2014/04/23 职场文书
创优争先心得体会
2014/09/11 职场文书
银行授权委托书范本
2014/10/04 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
走进毛泽东观后感
2015/06/04 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
python 镜像环境搭建总结
2022/09/23 Python