demo(注册、登录、退出、购物)最终无注释代码

最新推荐文章于 2023-09-03 22:14:00 发布

咩有猫腻.

最新推荐文章于 2023-09-03 22:14:00 发布

阅读量349

点赞数

分类专栏：前端后端demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/105767362

版权

前端后端demo 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在这里插入图片描述

一.index.html

    <style>
        div{width:100%;height:100%;background:rgba(0,0,0,.6);z-index: 200px;position: fixed;left: 0;top: 0;display: none;}
    </style>
</head>
<body>
    <h1>当前是首页面</h1>
    <button name="reg">注册页面</button><br>
    <button name="login">登录页面</button><br>
    <button name="back">退出登录</button><br>
    <button name="show">购物车</button><br>
    <div>
        账号：<input type="text" placeholder="请输入账号"><br>
        密码：<input type="password" placeholder="请输入密码"><br>
        <button name="login2">登录</button>
    </div>

    <!-- js -->
    <script src="./utils.js"></script>
    <script>
        //获取标签对象
        const oReg=document.querySelector('[name="reg"]');
        const oLogin=document.querySelector('[name="login"]');
        const oBack=document.querySelector('[name="back"]');
        const oShow=document.querySelector('[name="show"]');
        const oDiv=document.querySelector('div');
        const oLogin2=document.querySelector('[name="login2"]');

        //注册
        oReg.addEventListener('click',()=>{
            window.location.href='./reg.html';
        });

        //登录
        oLogin.addEventListener('click',()=>{
            oDiv.style.display='block';
        });

        oLogin2.addEventListener('click',()=>{
            let username=document.querySelectorAll('input')[0].value;
            let userpwd=document.querySelectorAll('input')[1].value;

            postAjaxSend('./login.php',fun,`username=${username}&userpwd=${userpwd}`);

            function fun(str){
                if(str == '1'){
                    window.alert('您登录成功');
                    mySetCookie('login','1',7*24*60*60);
                    oDiv.style.display='none';
                }else{
                    let bool=window.confirm('您登录失败，是否重新登录');
                    if(bool==true){
                        oDiv.style.display='block';
                    }
                }
            }

            if(username==''){
                window.alert('账号不能为空');
                return;
            }
            if(userpwd==''){
                window.alert('密码不能为空');
                return;
            }
        });

        //退出
        oBack.addEventListener('click',()=>{
            mySetCookie('login','1',-1);
            window.alert('您已退出登录');
        });

        //购物
        oShow.addEventListener('click',()=>{
            const cookieObj=myGetCookie(document.cookie);
            if(cookieObj.login=='1'){
                window.location.href='./shop.html';
            }else{
                let bool=window.confirm('您还没有登录，是否登录');
                    if(bool==true){
                        oDiv.style.display='block';
                    }
            }
        });
    </script>
</body>

二.login.php

<?php
    $loginName=$_POST['username'];
    $loginPwd=$_POST['userpwd'];

    $link=mysqli_connect('localhost','root','root','nz2002',3306);

    $sql="SELECT * FROM `user`  WHERE `username`='{$loginName}' AND `userpwd`='{$loginPwd}' ";

    $result=mysqli_query($link,$sql);

    $arr=mysqli_fetch_all($result,MYSQLI_ASSOC);

    if(count($arr)==0){
        echo 0;
    }else{
        echo 1;
    }

    mysqli_close($link);

三.reg.html

<body>
    <!--html 注册信息 -->
    账号：<input type="text" name="userN" placeholder="请您输入8-16位的账号"><span name="userName"></span><br>
    密码：<input type="password" name="userP1" placeholder="请您输入8-16位的密码"><br>
    重复密码：<input type="password" name="userP2" placeholder="二次输入密码，与密码一致"><br>
    验证码：<input type="text" name="vc1" placeholder="请您输入验证码"><br>
    <span name="vc2"></span><button type="button" name="reset">看不清 刷新</button><br>

    <button name="reg">提交</button>

    <div name="msg"></div>


    <!-- JS 注册信息 -->
    <script src="utils.js"></script>
    <script>
        //账号
        const oUserN=document.querySelector('[name="userN"]');
        const oUserName=document.querySelector('[name="userName"]');
        oUserN.addEventListener('focus',()=>{
            oUserName.innerHTML='账号不能为空，请您输入8-16位的账号';
            oUserName.style.color="black";
        });
        oUserN.addEventListener('input',()=>{
            let oUserNVal=oUserN.value;
            oUserName.innerHTML=`您已输入${oUserNVal.length}位字符，最少还需输入${8-oUserNVal.length}`;
            if(8-oUserNVal.length<=0){
                oUserName.innerHTML='';
            }
            oUserName.style.color="black";

        });
        oUserN.addEventListener('change',()=>{
            let oUserNVal=oUserN.value;
            if(oUserNVal.length<8 || oUserNVal.length>16){
                oUserName.innerHTML='您输入的账号不符合规范';
                oUserName.style.color='red';
            }else{
                oUserName.innerHTML='您输入的账号符合规范';
                oUserName.style.color='black';
            }
        });

        //验证码
        let str='1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
        
        function vCode(str){
            let vcStr='';
            for(let i=1;i<6;i++){
                let num=parseInt(Math.random()*str.length);
                if(vcStr.indexOf(str[num])==-1){
                    vcStr+=str[num];
                }
            }
            return vcStr;
        }
        

        const oVc1=document.querySelector('[name="vc1"]');
        const oVc2=document.querySelector('[name="vc2"]');
        oVc2.innerHTML=vCode(str);
        const oReset=document.querySelector('[name="reset"]');
        oReset.addEventListener('click',()=>{
            oVc2.innerHTML=vCode(str);
        });

        const oUserP1=document.querySelector('[name="userP1"]');
        const oUserP2=document.querySelector('[name="userP2"]');

        //注册
        const oReg=document.querySelector('[name="reg"]');
        oReg.addEventListener('click',()=>{
            let oUserNVal=oUserN.value;
            let oUserP1Val=oUserP1.value;
            let oUserP2Val=oUserP2.value;
            let oVc1Val=oVc1.value;
            let oVc2Val=oVc2.innerHTML;

            if(oUserNVal==''){
                window.alert('账号不能为空');
                return;
            }
            if(oUserNVal.length<8 || oUserNVal.length>16){
                window.alert('账号不符合规范');
                return;
            }

            if(oUserP1Val==''){
                window.alert('密码不能为空');
                return;
            }
            if(oUserP1Val.length<8 || oUserP2Val.length>16){
                window.alert('密码不符合规范');
                return;
            }
            if(oUserP2Val==''){
                window.alert('重复密码不能为空');
                return;
            }
            
            if(oUserP1Val !== oUserP2Val){
                window.alert('两次输入的密码不一致');
                return;
            }
            
            if(oVc1Val==''){
                window.alert('验证码不能为空');
                return;
            }
            if(oVc1Val.toLowerCase() != oVc2Val.toLowerCase()){
                window.alert('您的验证码输入不正确');
                return;
            }

            postAjaxSend('./reg.php',fun,`regname=${oUserNVal}&regpwd=${oUserP1Val}`);

        });

        function fun(str){
            const oDiv=document.querySelector('[name="msg"]');
            if(str == '1'){
                oDiv.innerHTML='注册成功，5秒后跳转至首页';
                let int=5;
                setInterval(()=>{
                    oDiv.innerHTML=`注册成功，${int}后将进入首页`;
                    int--;
                    if(int==0){
                        window.location.href='./index.html';
                    }
                },1000);
            }else{
                oDiv.innerHTML='<span style="color:red">注册失败，您的用户名已被占用，请您重新设置</span>';
            }
        }




    </script>
</body>

四.reg.php

<?php
    $regName=$_POST['regname'];
    $regPwd=$_POST['regpwd'];

    $link=mysqli_connect('localhost','root','root','nz2002',3306);

    $sql="INSERT INTO `user`  (`username`,`userpwd`) VALUES ('{$regName}','{$regPwd}') ";

    $result=mysqli_query($link,$sql);


    if($result==true){
        echo 1;
    }else{
        echo 0;
    }

    mysqli_close($link);

五.shop.html

<body>
    <h1>我是购物车</h1>
</body>

六.utils.js

function mySetCookie(key,value,time){
    const nowTime=new Date();
    let t=nowTime.getTime()-(8*60*60*1000)+(time*1000);
    nowTime.setTime(t);
    document.cookie=`${key}=${value};expires=${time == undefined ? '' : nowTime}`;
}

function myGetCookie(cookieStr){
    const arr=cookieStr.split('; ');
    const obj={};
    arr.forEach((val)=>{
        const nowArr=val.split('=');
        obj[nowArr[0]]=nowArr[1];
    });
    return obj;
}

function getAjaxSend(urlStr,cb){
    const xhr=new XMLHttpRequest();
    xhr.open('get',urlStr);
    xhr.send();
    xhr.onload=function(){
        cb(xhr.response);
    }
}

function postAjaxSend(url,func,dataStr){
    const xhr=new XMLHttpRequest();
    xhr.open('post',url);
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    xhr.send(dataStr);
    xhr.onload=function(){
        func(xhr.response);
    }
}

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
demo(注册、登录、退出、购物)最终无注释代码

一.index.html <style> div{width:100%;height:100%;background:rgba(0,0,0,.6);z-index: 200px;position: fixed;left: 0;top: 0;display: none;} </style></head><body&gt...
复制链接

扫一扫

专栏目录