js实现一个简单的登录效果

• 一、需要掌握的知识
• 二、思路
  1. .login
  2. index
  3. Details
  4. 结果

一、需要掌握的知识

1. location.href?location.search?
2. navigator
3. history.back()?history.forword()?
4. sqil()?
5. substr()?
6. 

 

二、思路

一个提交表单，主页面，一个接收search，分割字符串，innerHTML赋值，接着一个倒计时跳转百度location.href,再接着一个前进后退功能forword(),back();

1.login

代码如下（示例）：

 <form action="index.html">
        用户名：<input type="text" name="uname">
        <input type="submit" value="提交">
    </form>

2.index

代码如下（示例）：

 <div style="width: 200px; height: 200px;"></div>
    <button>百度</button>
    <a href="Details.html">详情页哦</a><button>去往</button>
    <script>
        var parm=location.search.substr(1);
        var arr=parm.split('=');
        var div=document.querySelector('div');
        var btn=document.querySelectorAll('button');
        div.innerHTML='欢迎你'+arr[1];
        var flag=5;
        btn[0].addEventListener('click',function(){
            setInterval(function(){
                if(flag==-1){
                location.href='http://www.baidu.com';
            }
            else{
                div.innerHTML='还剩下'+flag+'秒就要跳转了';
                flag--;
            }
        },1000);
            });
            btn[1].addEventListener('click',function(){
                history.forward();
            })
        
    </script>

3.Details

代码如下（示例）：

    <a href="index.html">去主页面哦</a>
    <button>后退</button>
    <script>
        var btn=document.querySelector('button');
        btn.addEventListener('click',function(){
            history.back();
        })
    </script>

结果

QQ录屏20221219234313

---

总结

一点一滴，总有一天水滴会石穿，量变到质变，加油