个人中心
gpt4 book ai didi

javascript - 如何正确使用 if/else 结构从右侧动画新内容并通过向左滑动摆脱旧内容？

转载 作者：太空宇宙 更新时间：2023-11-04 01:49:24 25 4
gpt4 key购买 nike 

document.getElementById("button1").addEventListener("click", mouseOver1);

function mouseOver1(){

   document.getElementById("button1").style.color = "red";

}


document.getElementById("button2").addEventListener("click", mouseOver); 


    function mouseOver(){ 

      document.getElementById("button2").style.color = "purple";
   }



$("#button1").hover(function() {
    $(this).css('cursor','pointer');
}); 

$("#button2").hover(function() {
    $(this).css('cursor','pointer');
});

   if($(".existing1-username-input-textbox").get(0).val()== "Micheal22" && $(".existing2-password-input-textbox").get(0).val()== "honor7thG")  
 {
        $('#button1').on('click', function () {
        $('.username-label').animate({'left': '-105%'}); 
        // but I want all the old content to slide to the left if username and password match above
        // then new content should slide in from the right. 

        });  
  
  }else{
  $(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
 
  $(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct"; 

  }
          
.intro h1 {
  font-family: 'Cambria';
  font-size: 16pt;
  font: bold;
  text-align: left;
}

.intro p {
  font-family: 'Calibri';
  font: italic;
  font-size: 12pt;
  padding: 0px 690px 0px 20px;
  text-align: left;
}

.content {
  border: 2px solid;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

#para1 {
  padding: 0px 1050px 0px 20px;
}

#para2 {
  padding: 0px 1099px 0px 20px;
}

.username-label,
.password-label {
 margin: 10px 0px 0px 300px;
 position: relative; 
 top: -70px; 
}

.existing1-username-input-textbox, 
.existing2-password-input-textbox
{
    top: -70px; 
     position: relative; 
      
}

#button1{ 
     background-color: #add8e6;
     margin-left: 390px; 
     position: relative; 
     top: -50px; 
    -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius:10px;
  padding: 0px 20px 0px 20px; 
}

#button2{
  background-color: #add8e6;
  margin-left: -200px; 
  position: relative; 
  top: -30px; 
 -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 0px 20px 0px 20px; 

}


.Username-label1, 
.Password-label2,           
.Email-label3, 
.Repeat-Email-label4 
{
  margin: 0px 0px 0px 300px;
  position: relative; 
  top: -70px; 
}
.username-new-input-textbox, 
.password-new-input-textbox, 
.email-new-input-textbox, 
.reenter-new-input-textbox{ 
  position: relative;
   top: -70px;
  margin-left: 20px; 

}
<html>

<head>

  <link href="Home.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <title>Project</title>

</head>

<body>


<div class="container">
  <div class="intro">

    <h1>Welcome to Cuyahoga Community College Student Services Online</h1>

    <p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  </div>
  <br/>

  <div class="content">
    <div class="row top">
      <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
      <div class="login">
        <label class="username-label" for="username-part1">Username</label> &nbsp; 
         <input class="existing1-username-input-textbox" type="text" value="" />
        <br/><br/>
        <label class="password-label" for="password-part2">Password</label> &nbsp; 
        <input class="existing2-password-input-textbox" type="password" value="" />
        <br/>
        <button id="button1">Log in</button>
      </div>
    </div>
    <hr/>
    <div class="row bottom">
      <p id="para2">New users, please create a new account by providing us with some basic information.</p>

      <div class= "new_customers_info">

        <label class="Username-label1" for="new-user-name-part-1">Username</label>
        <input class="username-new-input-textbox" type="text" value="" />
         <br/><br/>

        <label class="Password-label2" for="password-new-part2">Password</label>
        <input class="password-new-input-textbox" type="password" value="" />
         <br/><br/>

        <label class="Email-label3" for="email-new">Email Address</label>
         <input class="email-new-input-textbox" type="text" value=""/>
          <br/><br/>

        <label class="Repeat-Email-label4" for="repeat-new-email">Repeat Email Address</label>
         <input class="reenter-new-input-textbox" type="text" value="" />

        <button id="button2">Create Account</button>
      </div>
    </div>
  </div>
   <br/>
  <footer>Cuyahoga Community College</footer>
  <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
    <script src="Home.js"></script>
</body>
</html>

当现有学生的用户名和密码正确时，如何让我当前的内容向左滑动并从右侧引入新内容(单击按钮 1 后)，如果不正确则显示错误消息每个相应文本框下方的用户名或密码不正确。我正在考虑使用 if/else 条件。另外，如果我还没有创建内容，如何在从右侧滑动时加载学生现有的帐户信息？如果我已经创建了要从右侧滑入的内容，那么在显示新内容之前，我应该在哪里保存该信息。到目前为止，这是我的代码。

最佳答案

以下代码将在页面加载时执行，此时用户名和密码字段将为空白，因此不会有任何事件与登录按钮相关联:

if($(".existing1-username-input-textbox").get(0).val()== "Micheal22" && $(".existing2-password-input-textbox").get(0).val()== "honor7thG")  
{
    $('#button1').on('click', function () {
        $('.username-label').animate({'left': '-105%'}); 
        // but I want all the old content to slide to the left if username and password match above
        // then new content should slide in from the right. 

    });    
}else{
    $(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
    $(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct"; 
}

您应该将其更改为以下内容:

$('#button1').on('click', function () {
    if($(".existing1-username-input-textbox").get(0).value== "Micheal22" && $(".existing2-password-input-textbox").get(0).value== "honor7thG")  
    {
        $('.username-label').animate({'left': '-105%'}); 
        // but I want all the old content to slide to the left if username and password match above
        // then new content should slide in from the right. 
    }else{
        $(".existing1-username-input-textbox").firstChild.nodeValue="The existing username is not correct";
        $(".password-new-input-textbox").firstChild.nodeValue="The existing password is not correct"; 
    }
});

现在这将在页面加载时将点击事件与登录按钮相关联，因此当您点击登录时，它将首先检查用户名和密码，如果匹配则动画部分将生效，否则将执行动画部分。

关于javascript - 如何正确使用 if/else 结构从右侧动画新内容并通过向左滑动摆脱旧内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43784736/

25 4 0
文章推荐： c - 因式分解 && 和 ||在 C
文章推荐： c - 将输入文件标记为链表
文章推荐： c - 这段代码在 C 中不能正常运行的原因是什么？
文章推荐： javascript - 不显示部分下拉内容？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com