Question

我正在尝试创建一个接受此登录的简单登录系统，我已经完成了。现在我正试图让它变成当你点击它时头像的变化。它将更改为“1avatar”至“2avatar”至“3avatar”等，然后返回1.

我当前的代码不起作用，我不知道原因：（

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" src="system.js"></script>
<script>
</script>
</head>
<body>

<h2>Login</h2>

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>

<div id="id01" class="modal">

  <form class="modal-content animate">
    <div class="imgcontainer">
      <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
      <img src="1avatar.jpg" height="80px" id="avatar" onclick="change(this)"alt="Avatar" class="avatar">
    </div>

    <div class="container">
      <label><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required>

      <label><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required>

      <button type="submit" onclick="check(this.form)">Login</button>
      <input type="checkbox" checked="checked"> Remember me
    </div>

    <div class="container" style="background-color:#f1f1f1">
      <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
    </div>
  </form>
</div>
</body>
</html>

CSS：

/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    align-items: center;
}
html {
    background-color: #333;
}
h2 {
    text-align: center;
    color:white;
}
button:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 80px;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

JAVASCRIPT：

// Get the modal
var modal = document.getElementById('id01');



// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

function check(form) {
    if (form.uname.value == "04ep11" && form.psw.value == "7D") {
        alert("It worked")
    }

}

function change(img) {
    if (img.src == "1avatar.jpg") {
        img.src = img.src.replace("2avatar");
    }
    if (img.src == "2avatar.jpg") {
        img.src = img.src.replace("3avatar");
    }
    if (img.src == "3avatar.jpg") {
        img.src = img.src.replace("4avatar");
    }
    if (img.src == "4avatar.jpg") {
        img.src = img.src.replace("5avatar");
    }
    if (img.src == "5avatar.jpg") {
        img.src = img.src.replace("1avatar");
    }
}

Answer 1

函数replace采用其他人指出的两个参数，但为什么你首先使用replace？您可以使用replace在文本中进行搜索并替换其中的一部分，但是您要替换整个文本，因此执行直接分配会更有效，更清晰。同样在这样的代码中，使用switch而不是一堆if语句更具可读性。

编辑请注意，当您访问图片src属性时，它将拥有完整路径，而不仅仅是您在HTML中拥有的值（例如“1avatar.jpg”）。所以你的平等检查会失败。要解决这个问题，只需取src值的最后11个字符，即文件名的字符数：

function change(img) {
    var name = img.src.substr(-11); //Take the last 11 characters.
    switch (name) {
    case "1avatar.jpg":
        img.src = "2avatar.jpg";
        break;
    case "2avatar.jpg":
        img.src = "3avatar.jpg"
        break;
    case "3avatar.jpg":
        img.src = "4avatar.jpg";
        break;
    case "4avatar.jpg":
        img.src = "5avatar.jpg";
        break;
    case "5avatar.jpg":
        img.src = "1avatar.jpg";
        break;
    }
}

或者，由于文件名除了第一个字符（1到5之间的数字）之外都是相同的，因此可以通过数学方式递增来替换第一个字符：

function change(img) {
  var num = img.src.substr(-11, 1); //Extract the fist character of the file name.
  num = parseInt(num); //Convert it to a number.

  if (num < 5)
    num++; //When less than 5, increment it by 1.
  else
    num = 1; //When it is 5, go back to 1.

  img.src = num + "avatar.jpg";
}

Answer 2

试试这个：

function change(img) {
    if (img.src == "1avatar.jpg") {
        img.src = img.src.replace("1avatar.jpg", "2avatar.jpg");
    }
    if (img.src == "2avatar.jpg") {
        img.src = img.src.replace("2avatar.jpg", "3avatar.jpg");
    }
    if (img.src == "3avatar.jpg") {
        img.src = img.src.replace("3avatar.jpg", "4avatar.jpg");
    }
    if (img.src == "4avatar.jpg") {
        img.src = img.src.replace("4avatar.jpg", "5avatar.jpg");
    }
    if (img.src == "5avatar.jpg") {
        img.src = img.src.replace("5avatar.jpg", "1avatar.jpg");
    }
}

Answer 3

function change(img) 

{

    var str = img.src;

    var res = str.substring((str.length - 11),(str.length - 10));

    var ress = Number(res);

    var subi;

      if(ress == "5"){

         subi = str.replace(5, 1);

        } else {

         subi = str.replace(ress, (ress+1));

       }

    document.getElementById("avatar").src= subi;

}

以上一个完美的工作。但它不会因某种原因检查这一点，它也运作良好。

首先像这样更改你的HTML

 <img src="1avatar.jpg" height="80px" id="avatar" onClick="Change_Img()"alt="Avatar" class="avatar">

然后Javascript

function Change_Img() 

{

   var x = document.getElementById("avatar").src;


    var n;


      for(a=1;a<6;a++){

         var nn = x.indexOf(a);

         if(nn > 0){
              n = a;
           }

        }

 var subi;

 if(n == "5"){
   subi =  x.replace("5", "1");
 } else {
   subi =  x.replace(n, (n+1));
 }



    document.getElementById("avatar").src= subi;

}

Answer 4

如果图片与您的代码建议的HTML文件位于同一目录中，那么您根本不需要replace()。

for (var i = 1, newImage; i <= 5; i++) {
    newImage = (i === 5) ? 1 : i+1;
    if (img.src === i + 'avatar.jpg') {
        img.src = newImage + 'avatar.jpg';
    }
}

如果图片不在同一目录中，则您需要使用replace()，但请注意，将img.src与xavatar.jpg进行比较始终在这种情况下返回false;因为src将是这样的：path/to/my/img/xavatar.jpg。

一个简单的解决方案是在比较中使用完整路径，例如：

if (img.src === 'path/to/my/img/' + i + 'avatar.jpg') {

假设所有图像都是JPG，另一种解决方案是创建一个简单的正则表达式，如/xavatar.jpg$/，并使用test()检查您的情况。

for (var i = 1, newImage, regex; i <= 5; i++) {
    regex = new RegExp(i + 'avatar.jpg$');
    newImage = (i === 5) ? 1 : i+1;
    if (regex.test(img.src)) {
        img.src = img.src.replace(i + 'avatar.jpg', newImage + 'avatar.jpg');
    }
}

简单的图像转换器onclick将无法工作？

4 个答案: