我想将用户输入的名称更改为 3 位数字(000-999),然后根据给定的数字显示 3 张图像。
如果输入的数字是 015,那么显示的第一张图片将为 000.jpg,第二张图片为 010.jpg,第三张图片为 005.jpg。我希望每次输入名称时都有相同的结果,并且如果可能的话,我希望实时更新。我希望这有助于解决问题,我仍在努力找出最好的方法。谢谢
目的是创建一个由 3 张图像组成的插图,这些图像结合在一起,混合搭配风格。
这是我到目前为止所拥有的:http://jsfiddle.net/x19mLe73/
理想情况下,我希望用户输入他们的姓名和图像以更改为相应的数字。
function doSomeStuff() {
document.getElementById("LastName").text = "Connor"; // Simulate User Input
var lastName = document.getElementById("LastName").text;
var myPics = document.getElementById("myPics");
var sum = 0;
for(var i=0; i<lastName.length;i++)
{
sum += lastName.charCodeAt(i);
}
sum = (sum%1000);
var firstPic = (sum + "").split('')[0] + "00.jpg";
var secondPic = "0" + (sum + "").split('')[1] + "0.jpg";
var thirdPic = "00" + (sum + "").split('')[2] + ".jpg";
var imgToAdd1 = document.createElement("img");
imgToAdd1.src = firstPic;
imgToAdd1.alt = firstPic;
myPics.appendChild(imgToAdd1);
var imgToAdd2 = document.createElement("img");
imgToAdd2.src = secondPic;
imgToAdd2.alt = secondPic;
myPics.appendChild(imgToAdd2);
var imgToAdd3 = document.createElement("img");
imgToAdd3.src = thirdPic;
imgToAdd3.alt = thirdPic;
myPics.appendChild(imgToAdd3);
}
doSomeStuff();
最佳答案
我通过将 .value
分配更改为 .text
使其工作。图像仍然会损坏,但现在它们指向正确的 3 位数文件名。
window.doSomeStuff = function() {
var lastName = document.getElementById("LastName").value;
var myPics = document.getElementById("myPics");
var sum = 0;
for (var i = 0; i < lastName.length; i++) {
sum += lastName.charCodeAt(i);
}
sum = (sum % 1000);
var firstPic = (sum + "").split('')[0] + "00.jpg";
var secondPic = "0" + (sum + "").split('')[1] + "0.jpg";
var thirdPic = "00" + (sum + "").split('')[2] + ".jpg";
myPics.innerHTML = "";
var imgToAdd1 = document.createElement("img");
imgToAdd1.src = firstPic;
imgToAdd1.alt = firstPic;
myPics.appendChild(imgToAdd1);
var imgToAdd2 = document.createElement("img");
imgToAdd2.src = secondPic;
imgToAdd2.alt = secondPic;
myPics.appendChild(imgToAdd2);
var imgToAdd3 = document.createElement("img");
imgToAdd3.src = thirdPic;
imgToAdd3.alt = thirdPic;
myPics.appendChild(imgToAdd3);
}
img {
border: 1px;
width: 200px;
height: 20px;
}
<input id="LastName" value="Connor" />
<div id="myPics">
</div>
<button onclick="doSomeStuff();" >Go</button>
关于javascript - 根据用户的姓氏创建三个图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31897640/