个人中心
gpt4 book ai didi

javascript - 简单的图像转换器 onclick 不起作用？

转载 作者：行者123 更新时间：2023-11-30 11:37:21 24 4
gpt4 key购买 nike

我正在尝试制作一个接受此登录的简单登录系统，我已经做到了。现在我正在努力使头像图像在您单击它时发生变化。它将变为“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");
    }
}

最佳答案

函数 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";
}

关于javascript - 简单的图像转换器 onclick 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43900950/

24 4 0
文章推荐： javascript - Vuejs - 元素用户界面 - 无法关闭带有十字的对话框
文章推荐： javascript - 如何将变量从 php 插入到 p 标签(html)中？
文章推荐： javascript - Handlebars JS使用变量获取子数组项
文章推荐： javascript - 数组内的多个嵌套展开运算符(javascript es2015)
行者123
个人简介

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

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