- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将用户输入的名称更改为 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/
我有两个表,Table1和Table2。 Table1由格式为FullName的名称列('FirstName LastName')和唯一标识符(Key)组成。 Table2的列(Name)由这些名称组
我正在使用 ajax 实时搜索来选择名称和姓氏的串联与输入的文本匹配的所有用户,并且效果很好: $sql = "SELECT * FROM users WHERE concat(name,' ',su
我有一组采用 last, first 格式的名称 Name Pos Team Week.x Year.x GID.x h.a.x Oppt.x Week1Points DK.
我有一个函数,如果我有姓氏和名字,它应该返回 True。 此名称返回 False,但应返回 True。任何想法为什么?我希望能够在名称 A-Z、a-z、下划线和 0-9 中接受撇号。逗号前后可能有也可
我有一个 drupal 数据库,其中 node 表充满了配置文件。字段node.title是“Firstname Lastname”。我想分隔名称,以便 node.title = "Firstname
我正在使用 Django-Registration 包让用户创建帐户、对其进行身份验证并登录到我的 web 应用程序。 但是,用于创建帐户的表单/ View 不会要求用户提供名字/姓氏(这些字段是模型
我正在尝试使用云工具包获取用户的名字,但是以下代码未获取用户的名字,并且将firstNameFromFunction变量保留为空。有谁知道如何在iOS 10中实现这一目标? let container
运行应用程序时出现以下错误: 错误: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Data too long for column 'pa
我想尝试在 Javascript 中检测一个人名字的不同部分,并将它们剪掉,以便我可以将它们传递给其他东西。 名称可以以任何格式出现——例如:- 维多利亚·米·莱恩小姐 Victoria C J Lo
这是我读过的教程中的查询 CREATE TABLE Employee ( id MEDIUMINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, depa
所以我的程序有问题。如果我删除 in.nextLine,println 的名字和姓氏将一个接一个地打印,如果我有它,它不会在我的输出中打印名字,因为我认为它正在删除它。任何帮助将不胜感激。 impor
我专门使用omniauth来允许使用facebook/google/twitter登录到我的网站。 我存储名字,姓氏和电子邮件。但是,当我从oauth引发twitter auth哈希时,我仅在auth
我有一个看起来有点像这样的 df: name id John McNamara 3498 Jane Adams,
我有一个大数据集,我知道其中包含许多重复记录。基本上我有关于名字、姓氏、不同地址组成部分和出生日期的数据。 我认为最好的方法是使用姓名和出生日期,因为如果这些都匹配,则很可能是同一个人。可能有很多情况
我知道这是一件非常简单的事情,但我无法弄清楚我遗漏了什么或做错了什么。我认为这可能与 char 变量有关。这是我到目前为止所拥有的: #include #include "stdafx.h" #inc
我正在尝试使用以下代码获取电话联系人中所有可用联系人的详细信息。但面临重复值的小问题。 已编辑 实际代码开始:- private String refreshData() { Stri
我正在尝试实现对数据表的搜索。现在,我只能搜索名字、中间名和姓氏等。但是,在搜索全名(中间名和姓氏)时,搜索将不起作用。图像: success search for firtname/middle/l
Magento 是否可以通过客户的公司名称以及联系人姓名来查看/管理我们的客户,以便轻松找到他们?它用于 B2B,因此当电子邮件发出时,他们会提取客户的姓名,而不是更合适的公司名称。 这是全局设置吗?
我正在尝试实现对数据表的搜索。现在,我只能搜索名字、中间名和姓氏等。但是,在搜索全名(中间名和姓氏)时,搜索将不起作用。图像: success search for firtname/middle/l
我想检查用户输入的命令如: 添加人员关系人员(人员可以是例如 John 或“John Smith”) 示例:添加 John Smith 兄弟 Jack Smith... 我使用分隔符(空格)将字符串拆
我是一名优秀的程序员,十分优秀!