JS定时器如何实现提交成功提示功能

应用场景：

　　用户评论后，在合适位置弹出“评论成功”，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('评论失败');
            }
          }
        })
      })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 前端防止用户重复提交js实现代码示例

    背景 前端在向后端进行数据提交的时候,通常会需要在第一次提交返回前,阻止用户在快速点击发送二次请求,即防止重复提交,最简单的方法是使用标志参数或者 class 元素控制,但缺点是,每个控制重复提交的地方都需要加上这个逻辑,重复性太强,且控制逻辑不统一. 目前前端使用的是http协议,所以提交方式为两种 异步提交,使用jQuery.ajax() form 表单同步提交 下面这篇文章将给大家详细介绍关于这两种方法实现的方法示例,下面话不多说了,来随着小编一起看看详细的介绍吧 异步防重复提交的方案如下

  • JS实现提示效果弹出及延迟隐藏的功能

    自动登录勾选提示效果 要求:鼠标移入显示提示信息框:鼠标离开,信息框消失,消失的效果延迟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me

  • 基于JS实现html中placeholder属性提示文字效果示例

    基于JS实现html中placeholder属性提示文字效果示例

    本文实例讲述了基于JS实现html中placeholder属性提示文字效果.分享给大家供大家参考,具体如下: 如何通过js实现html的placeholder属性效果呢 我们需要这样做: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net JS实现placeholder属性效果</title> <script>

  • 解决IDEA JSP没有代码提示问题的几种方法

    几天前遇到这样的问题,输入request.的时候按理说应该有一些getParameter等提示,我却没有,从头到尾都是死记硬背,简直不要太难受. 大概就是上图这B样,提示的都是写什么??咩咩咩?? 网上查了很多方法,都不行.今天无意中解决,所以分享出来希望大家不要再在此处栽跟头,浪费时间. 为了能帮助更多人解决问题,就把各种导致没有提示的情况一一列举. 1.省电mode问题. IDEA这东西你不小心开了省电模式,就真的毫不留情. 解决方法: File -> Power save mode 要看注

  • 解决eclipse中没有js代码提示的问题

    解决eclipse中没有js代码提示的问题

    自学js,发现eclipse中不管js文件.html文件.jsp文件没有都没js代码的提示,对于js代码也不报错,有时候就因为单词敲错却查了很久没查出来,很烦很难受. 在网上找了很多方法,都没有解决,特别是有个在javascript中editor中content assit里改一个地方为zjs的方法,试了几次也没成功,不知道各位老铁有没有成功? 再后来,我下了个插件,问题就解决了. 打开eclipse点击window旁边的Help选项---> Eclipse Marketplace---> 在

  • VSCode中如何利用d.ts文件进行js智能提示

    VSCode中如何利用d.ts文件进行js智能提示

    自动补全(智能提示) 因为之前微软推出了typescript语言,结合tsd文件,用visual studio写typescript代码是相当爽的,智能提示的功能非常nb. 这个功能理所应当也被vsc继承了. vsc的自动补全用的是typings. 先上效果图: 安装 nodejs 因为需要使用到node里面的npm去安装别人写好的d.ts文件,所以要先安装nodejs.具体步骤不说了,去nodejs官网上下载相应的程序,点击下一步下一步安装就行了. 添加项目的配置文件 在项目的根目录,创建一个

  • 为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题

    用过vue-router都知道它可以实现模块js的懒加载,即只有当需要时才去加载对应模块的js脚本文件,以加速主页的显示.比如只有第一次用户点击某个"用户信息"按钮或菜单时,才下载"用户信息"这个模块的js组件. 懒加载的实现,依赖与webpack下AMD模式require函数的功能.webpack会将异步require的文件生成一个独立的js文件,调用时异步下载这个js且在完成后再执行它.开发项目中实现的关键代码是: const basicInfo = { pat

  • Python解析json时提示“string indices must be integers”问题解决方法

    本文实例讲述了Python解析json时提示"string indices must be integers"问题解决方法.分享给大家供大家参考,具体如下: import json,但是出现了一个奇怪的问题: string indices must be integers 这个错误告诉我,[ ]里面应该是数字而不是字符串,但是dict使用key访问也可以,这种错误感觉解析出来的结果像是一个list. 所以考虑是字符串解析的问题.打印解析的结果,是一长串的字符串,一堆的key挤在一起,v

  • JS定时器如何实现提交成功提示功能

    应用场景: 用户评论后,在合适位置弹出"评论成功",2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" style="display: none; margin-left: 300px"> <div class="popup" > <p style="color: red; font-size: 16px">

  • JS实现搜索关键词的智能提示功能

    JS实现搜索关键词的智能提示功能

    最近在百度搜索的时候,当你输入一个字或者词的时候,他会给你们弹出一个下拉框出来,里面是和你相关的搜索提示 比如 我输入杨字,他会给我提示以下搜索提示 我尝试着用JavaScript做了一个类似的练习,以下是我用VS2013写的代码,有不对的地方,请不吝赐教. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont

  • jquery 模拟类搜索框自动完成搜索提示功能(改进)

    autopoint.js代码: 复制代码 代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键

  • js输入框邮箱自动提示功能代码实现

    同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要.内部的HTML代码都是自动生成的. HTML代码如下: 复制代码 代码如下: <div class="parentCls">    <input type="text" class="inputElem"> </div> 其实上面的div标签都可以不需要 只需要在input输入框 且父

  • JS实现仿新浪微博发布内容为空时提示功能代码

    JS实现仿新浪微博发布内容为空时提示功能代码

    本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化.本特效引用了一个外部了JS封装类,你可下载到本地使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/ 具体代码如下:

  • 输入自动提示搜索提示功能的javascript:sugggestion.js

    复制代码 代码如下: /** * 功能:该js文件中的代码实现了[输入自动搜索提示]功能,如百度.google搜索框中输入一些字符会以下拉列表形式给出一些提示,提高了用户体验 * 使用说明:参见suggestions.txt文件 * Author:sunfei(孙飞) Date:2013.08.21 */ var SugObj = new Object(); $(document).ready(function(){ //文件加载完成后获取输入框属性信息,确保搜索提示数据和文本输入框中数据的显示

  • 利用types增强vscode中js代码提示功能详解

    利用types增强vscode中js代码提示功能详解

    使用 types 增强vscode中javascript代码提示功能 微软的vscode编辑器是开发typescript项目的不二首选,其本身也是采用typescript开发的. 使用过ts的同学都知道 *.d.ts 类型声明文件,其管理工具,从最初的 tsd,到后来的 typings,一直到现在的@types,类型声明文件为ts的智能提示,类型检查提供了有力支持. 我们也可以使用类型声明文件,增强vscode编辑javascript时的智能提示. 关于vscode这方面更深的说明,请访问以下链

  • 基于JS实现密码框(password)中显示文字提示功能代码

    基于JS实现密码框(password)中显示文字提示功能代码

    其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,样式以及定位都是一样的.先将type为password的隐藏,只显示type为text的伪密码框,value设置提示内容例如请输入密码.然后当input触发的时候,type为text的input隐藏,让type为password的input显示出来.然后当检测password的val

  • PHP+JS实现的实时搜索提示功能

    PHP+JS实现的实时搜索提示功能

    本文实例讲述了PHP+JS实现的实时搜索提示功能.分享给大家供大家参考,具体如下: 效果图如下: 代码如下: HTML代码:(该代码用两种方法实现,一种Jquery,一种原生JS) <html> <head> <script src="/DelphiRequest/search/js/jquery.js"></script> <script> /*用原生js实现 // function showResult(str) // {

  • Eclipse中实现JS代码提示功能（图文教程）

    用Eclipse写JS代码时没有提示,很烦,心累: 找个各种方法以及插件,试了一下,个人感觉AngularJS Eclipse 插件很强,好用,不多说,先装上: 然后重启Eclipse ,右键你的项目 convert to Tern Project 也行 根据自己的需要变动,直接OK,接下来就是见证奇迹的时刻: 如果要变动就右键项目 总结 以上所述是小编给大家介绍的Eclipse中实现JS代码提示功能(图文教程),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常

随机推荐