需求:

在登录页面点击sign in跳转到下个页面之前,我需要显示成功的窗口2秒然后自动关闭

那我们来研究下setTimeout:

关于这个setTimeout首先下面的代码实现的是两秒之后再显示SuccLogin窗体。

setTimeout(function () {

  $(".SuccLogin").show();

 }, 2000);

所以该函数的意思是延迟2秒后在执行函数中的代码

关于Delay

$(".SuccLogin")show().delay(7000).hoide();、/@1

  this.setState({                       //@2

  loginState:true

})

这个delay是不会影响到其他函数的编译的所以他只是延长了当前的窗体显示的时间,而下面的代码会就进行也就是说其实@1和@2应该是同时执行的

ok所以我们来实现我们的需求

setTimeout(() => {
this.setState({
name:xiaobi.name,
sex:xiaobi.sex,
loginState:true
})
},1000)

由于我设定当loginStatus状态改变时候就跳转

{this.state.loginState? this.props.history.push({pathname: '/Management/MyInfo':''}

功能完成

登录界面点击登录后如何延迟提示成功的div的显示时间并跳转的更多相关文章

  1. js脚本实现在该界面直接跳转到一个登录界面并且自动登录

    1:首先说明的是自动登录也是需要密码的,这是前一个网页传输过去的 2:这里我使用的是post提交表单的形式 <------------------------------------------ ...

  2. vue项目里登录界面实现回车登录

    全局监听enter键,是把监听事件绑定到document上,无需获取焦点之类的 created() { let that = this; document.onkeydown =function(e) ...

  3. PyQt:个性化登录界面模仿QQ登录

    写在前面 写了一个登录界面的demo,类似QQ的,写的自己喜欢的样式,贴一下代码,先上效果,如下 陈述 PyQt5+Python3.5.2 login.py是里登录的主界面loginWnd类,Head ...

  4. jsp跳转不成功,服务器也不报错,登录页面点击登录没反应,代码如下,请韭菜园子的工友给予指导!

    登录后.. 根本跳不到这个检查页面.. 这个登录成功页面也就无从谈起了!

  5. 【转】【可用】Android 登录判断器,登录成功后帮你准确跳转到目标activity

    我们在使用应用时肯定遇到过这样的情景,打开应用,并不是需要我们登录,你可以浏览应用中的大部分页面,但是当你想看某个详情页的时候,点击后突然跳转到了登录页面,好,我们输入账号密码,点击登录,登录成功,跳 ...

  6. 第四篇——Spring音乐登录界面设计及实现(C#)

    Spring音乐播放器,我们小组设计其启动时有一个登录界面,用户初次可以注册,输入用户名和密码,点击注册即将输入信息保存到register文本文件中:如果已有用户名,输入用户名和密码,点击登录,程序会 ...

  7. android内部培训视频_第五节(1)_OA实战之登录界面

    第五节(1):OA实战之登录界面  一.登录界面布局 1.背景图片 2.文本框 3.checkbox 4.按钮 暂未实现点击切换图片效果 <RelativeLayout xmlns:androi ...

  8. C# winform 打开主界面并关闭登录界面

    在winform 界面编程中,我们有时候要在主界面打开之前先显示登录界面,当登录界面用户信息校验正确后才打开主界面,而这时登陆界面也完成使命该功成身退了. 目前有两种方法可实现: 方法1. 隐藏登录界 ...

  9. FineReport中如何自定义登录界面

    在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证. ...

随机推荐

  1. js 判断滚动条是不是在浏览器底部

    http://jingyan.baidu.com/album/86f4a73e91da7837d65269d5.html?picindex=2

  2. ERROR (UnicodeEncodeError): 'ascii' codec can't encode characters in position 0-1: ordinal not in range(128

    ERROR (UnicodeEncodeError): 'ascii' codec can't encode characters in position 0-1: ordinal not in ra ...

  3. Run-Time Check Failure #3 - The variable 'p' is being used without being initialized.

    Run-Time Check Failure #3 - The variable 'p' is being used without being initialized. 运行时检查失败 变量p没有初 ...

  4. matlab 2017版本修改帮助文档为离线

    安装matlab2017a后发现,帮助文档为在线版本,必须关联账号. 经过查询资料,帮助文档默认是使用web, on mathworks.com 可以将帮助文档改为离线版本. 具体修改方法: Pref ...

  5. Ubuntu环境下gedit以及vim的一些个简单配置

    Gedit的配置: 参见 http://www.cnblogs.com/csulennon/p/4198054.html Gedit插件安装 Gedit快捷键 参见我的博客 添加快捷键 Ctrl + ...

  6. 如何在.net项目中使用全局程序集GAC

    在解决已有.net网站问题过程中(之前的同事写的),发现出现dll不存在的情况,build报错 在bin目录下找不到该dll,后来发现是全局程序集,存储在C:\Windows\assembly目录下 ...

  7. 如何将excel中的一个表格内容转成xml格式的文件

    转自:http://www.cnblogs.com/sansi/archive/2012/02/06/2340471.html 感谢作者,解决了折磨我几天的问题,顿时心情开朗~ ----------- ...

  8. [翻译] 正式宣布 .NET 5

    原文: Introducing .NET 5 今天,我们宣布 .NET Core 3.0 之后的下一个版本将是 .NET 5 .这将是 .NET 系列的下一个重要版本. 将来只会有一个 .NET ,您 ...

  9. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  10. 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content

    如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...