gpt4 book ai didi

javascript - 自动更新图像值

转载 作者:行者123 更新时间:2023-12-02 15:53:13 25 4
gpt4 key购买 nike

我正在尝试将图像自动更新为输入框的文本。这是索引代码:

<body>
<div id="registeer">

<form method="post" action="javascript:login()">
<input type="text" name="gebruikersnaam" placeholder="Gebruikersnaam" /><br><br>
<input type="password" name="wachtwoord" placeholder="Wachtwoord" /><br><br>
<input type="submit" value="Registeer">
<form>
<br>

</div>
<div id="registeer-avatar"></div>


<script src="registeer.js"></script>

这是registeer.js:

$("#registeer input[type=text]").keyup(function(){
var value = $(this).val();
var background = "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=" + value + "&action=std&direction=3&head_direction=3&gesture=sml&size=b)";
$("#registeer-avatar").css("background", background);
});


$("#registeer input[type=text]").blur(function() {
if(!this.value) {
$("#registeer-avatar").css("background", "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=ulk&action=std&direction=3&head_direction=3&gesture=sml&size=b)");
}
});

因此,如果您输入第一个输入,例如“hi”,则 registeer-avatar 中的图像将为 habbo....&user=hi,但它不起作用。

感谢您的帮助。

最佳答案

它可以工作,但您需要调整容器的大小:

  <div id="registeer-avatar"></div>

现在它没有“空间”,当设置背景时,它不会显示。

例如尝试 CSS:

#registeer-avatar {
border: 1px solid #eee;
min-height: 100px;
}

$("#registeer input[type=text]").keyup(function(){
var value = $(this).val();
var background = "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=" + value + "&action=std&direction=3&head_direction=3&gesture=sml&size=b)";
$("#registeer-avatar").css("background-image", background);

console.log(background);

});


$("#registeer input[type=text]").blur(function() {
if(!this.value) {
$("#registeer-avatar").css("background", "url(https://www.habbo.nl/habbo-imaging/avatarimage?img_format=gif&user=ulk&action=std&direction=3&head_direction=3&gesture=sml&size=b)");
}
});
#registeer-avatar {
border: 1px solid #eee;
min-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="registeer">

<form method="post" action="javascript:login()">
<input type="text" name="gebruikersnaam" placeholder="Gebruikersnaam" /><br><br>
<input type="password" name="wachtwoord" placeholder="Wachtwoord" /><br><br>
<input type="submit" value="Registeer">
<form>
<br>

<div id="registeer-avatar"></div>

关于javascript - 自动更新图像值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31732667/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com