- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我要制作的是乐透游戏的核对 list ,这是我家人的一种宾果游戏。我将首先尝试解释 list 的作用和原因,请原谅我的技术英语,我是荷兰人,所以有些词可能是错误的:)
我有一个名单,上面有几个玩乐透/宾果游戏的人。所有玩家都选择 10 个号码,每周抽取一次 6 个号码,我尝试逐步解释代码必须做什么。
要查1-10人的号码
每周加2-6个号,要和人数比较。
3 - 匹配时字体应为绿色。
4 - 没有匹配项时字体应保持红色
这是我到目前为止的代码,a live version is at the link .
下面的代码运行良好,但问题是代码旨在比较 var A 和 var B,这是一个瓶颈,因为它是一对一的操作。如果不添加抽奖日,我就无法添加更多人。
现在我的问题。在不添加像 B2 这样的开奖日期的情况下,应该如何添加更多人(A1、A2、A3 等)。
我希望这已经足够清楚了。 :)
<script type = "text/javascript">
var a1 = ["2","3","8","12","23", "37", "41", "45", "48"]
var a2 = ["2","14","3","12","24", "37", "41", "46", "48"]
var b1 = ["2","5", "11","16","23","45", "46"];
var b2 = ["1","23", "11","14","23","42", "46"];
for (var i = 0; i< a1.length; i++)
{
for (var j = 0; j< b1.length; j++)
{
if (a1[i] == b1[j])
{
a1[i]= "g"+ a1[i];
}
}
}
for (var i = 0; i< a2.length; i++)
{
for (var j = 0; j< b2.length; j++)
{
if (a2[i] == b2[j]) {
a2[i]= "g"+ a2[i];
}
}
}
// john
document.write("<font color = '#FFFFFF'>" + "<b>" + "John    " + "</b>");
for (var i = 0; i< a1.length; i++)
{
if (a1[i].substr(0,1) == "g")
{
a1[i] = a1[i].substr(1,20);
document.write("<font color = '#00FF00'>", a1[i] + "    ");
}
else
{
document.write("<font color = '#FF0000'>", a1[i] + "    ");
}
}
// Michael
document.write("<br><br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Michael    " + "</b>");
for (var i = 0; i< a2.length; i++)
{
if (a2[i].substr(0,1) == "g")
{
a2[i] = a2[i].substr(1,20);
// The Draw
document.write("<font color = '#00FF00'>", a2[i] + "    ");
}
else
{
document.write("<font color = '#FF0000'>", a2[i] + "    ");
}
}
document.write("<br><br>");
document.write("<br><br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Draw day 1 " + "</b>");
document.write("<br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Sat 08-08-2009 " + "</b>");
document.write("<br><br>");
for (var j = 0; j< b1.length; j++)
{
document.write("<font color = '#FFFFFF'>", b1[j] + "    ");
}
document.write("<br><br>");
document.write("<br><br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Draw day 2 " + "</b>");
document.write("<br>");
document.write("<font color = '#FFFFFF'>" + "<b>" + "Sat 15-08-2009 " + "</b>");
document.write("<br><br>");
for (var j = 0; j< b2.length; j++)
{
document.write("<font color = '#FFFFFF'>", b2[j] + "    ");
}
</script>
最佳答案
除了像 Miky D 那样重写代码(重构)以便将数组比较转换为函数之外,您还可以通过使用对象来保存中奖号码来提高比较效率。请注意,此代码不是最终版本;还有进一步的改进。
var guesses = [["2","3","8","12","23", "37", "41", "45", "48"],
["2","14","3","12","24", "37", "41", "46", "48"]];
var draws = [ {2:1, 5:1, 11:1, 16:1, 23:1, 45:1, 46:1},
{1:1, 23:1, 11:1, 14:1, 23:1, 42:1, 46:1}];
function checkArray(guesses, draw) {
for (var i = 0; i< guesses.length; ++i) {
if (draw[guesses[i]]) {
guesses[i] = 'g' + guesses[i];
}
}
}
checkArray(guesses[0], draws[1]);
通过将中奖号码转换为索引而不是值,您可以摆脱循环。此外,“a”和“b”不是非常具有描述性的名称。短名称只会让您感到困惑。
通过以不同方式标记成功和成功的猜测(目前,您在成功前面加上“g”),您还可以简化代码以显示结果。 <font>
标签已被弃用一段时间,因此此优化使用 <span>
有一个你可以设置样式的类。
function checkArray(guesses, draw) {
var results = {}
for (var i = 0; i< guesses.length; ++i) {
if (draw.picks[guesses[i]]) {
results[guesses[i]] = 'win';
} else {
results[guesses[i]] = 'loss';
}
}
return results;
}
...
document.write('<span class="name">John</span>');
var results = checkArray(guesses[0], draws[1]);
for (var p in results) {
document.write('<span class="'+results[i]+'">'+p+'</span>');
}
自 document.write
也已弃用,我将用现代等效项替换它, document.createElement
和 Node.appendChild
.如果您认为生成的代码过于冗长,您可以改用 innerHTML
, 虽然它的用途是 controversial .由于球员姓名与球员选秀权密切相关,因此我还将按球员姓名为球员选秀权编制索引。
将以下内容放入与网页相同的文件夹中名为“lotto.js”的文件中。
function Result(guesses) {
for (var i = 0; i< guesses.length; ++i) {
this[guesses[i]] = '';
}
}
function checkDraw(guesses, draw, results) {
for (var i = 0; i< guesses.length; ++i) {
if (draw.picks[guesses[i]]) {
results[guesses[i]] = 'picked';
}
}
return results;
}
function appendTo(elt, parent) {
if (parent) {
document.getElementById(parent).appendChild(elt);
} else {
document.body.appendChild(elt);
}
}
function printResults(name, results, parent) {
var resultElt = document.createElement('div');
resultElt.appendChild(document.createElement('span'));
resultElt.firstChild.appendChild(document.createTextNode(name));
resultElt.firstChild.className='name';
var picks = document.createElement('ol');
picks.className='picks';
for (var p in results) {
picks.appendChild(document.createElement('li'));
picks.lastChild.appendChild(document.createTextNode(p));
picks.lastChild.className = results[p];
}
resultElt.appendChild(picks);
appendTo(resultElt, parent);
}
function printResultsFor(name, draws, parent) {
var player = players[name];
var results = new Result(player);
for (var i=0; i<draws.length; ++i) {
checkDraw(player, draws[i], results);
}
printResults(name, results, parent);
}
function printDraw(which, draw, parent) {
var drawElt = document.createElement('div');
drawElt.className='draw';
drawElt.appendChild(document.createElement('h3'));
drawElt.lastChild.appendChild(document.createTextNode('Draw '+which));
drawElt.lastChild.className='drawNum';
drawElt.appendChild(document.createElement('div'));
drawElt.lastChild.className='date';
drawElt.lastChild.appendChild(document.createTextNode(draw.when));
var picks = document.createElement('ol');
picks.className='picks';
for (var p in draw.picks) {
picks.appendChild(document.createElement('li'));
picks.lastChild.appendChild(document.createTextNode(p));
}
drawElt.appendChild(picks);
appendTo(drawElt, parent);
}
这是相应的 HTML 页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
background-color: #333;
}
.picks, .picks * {
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
}
.picks * {
margin: auto 0.25em;
}
#Results .picks * { color: red; }
.name, .picks .name {
color: white;
font-weight: bold;
margin-right: 0.5em;
}
#Results .picked { color: lime; }
.drawNum, #Draws H3 {
margin-bottom: 0;
}
</style>
<script type="text/javascript" src="lotto.js"></script>
</head>
<body>
<div id="Results"></div>
<div id="Draws"></div>
<script type="text/javascript">
var players = {John: [2, 3, 8, 12, 23, 37, 41, 45, 48],
Michael: [2, 14, 3, 12, 24, 37, 41, 46, 48]};
var draws = [ {when: 'Sat 08-08-2009',
picks:{2:1, 5:1, 11:1, 16:1, 23:1, 45:1, 46:1}},
{when: 'Sat 15-08-2009',
picks:{1:1, 23:1, 11:1, 14:1, 23:1, 42:1, 46:1}}];
for (name in players) {
printResultsFor(name, draws, 'Results');
}
for (var i=0; i<draws.length; ++i) {
printDraw(i+1, draws[i]);
}
</script>
</body>
</html>
您可以优化 CSS 以获得您想要的确切样式。可以进一步重构代码以使用 OOP,这将简化创建新玩家和抽奖的过程,但涉及的内容更多,因此我不会在这里深入讨论。
更新:重写了上面的代码,以便将每个玩家的猜测与每次抽奖进行比较。 live sample version的代码已经重构几乎面目全非使用 OOP。它还使用您以前可能从未见过的功能,例如 JS closures , higher order functions和 CSS generated content and counters .它更长且更难理解,但更灵活且更易于使用。
关于javascript - 在javascript中比较数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1282528/
我正在尝试创建一个包含 int[][] 项的数组 即 int version0Indexes[][4] = { {1,2,3,4}, {5,6,7,8} }; int version1Indexes[
我有一个整数数组: private int array[]; 如果我还有一个名为 add 的方法,那么以下有什么区别: public void add(int value) { array[va
当您尝试在 JavaScript 中将一个数组添加到另一个数组时,它会将其转换为一个字符串。通常,当以另一种语言执行此操作时,列表会合并。 JavaScript [1, 2] + [3, 4] = "
根据我正在阅读的教程,如果您想创建一个包含 5 列和 3 行的表格来表示这样的数据... 45 4 34 99 56 3 23 99 43 2 1 1 0 43 67 ...它说你可以使用下
我通常使用 python 编写脚本/程序,但最近开始使用 JavaScript 进行编程,并且在使用数组时遇到了一些问题。 在 python 中,当我创建一个数组并使用 for x in y 时,我得
我有一个这样的数组: temp = [ 'data1', ['data1_a','data1_b'], ['data2_a','data2_b','data2_c'] ]; // 我想使用 toStr
rent_property (table name) id fullName propertyName 1 A House Name1 2 B
这个问题在这里已经有了答案: 关闭13年前。 Possible Duplicate: In C arrays why is this true? a[5] == 5[a] array[index] 和
使用 Excel 2013。经过多年的寻找和适应,我的第一篇文章。 我正在尝试将当前 App 用户(即“John Smith”)与他的电子邮件地址“jsmith@work.com”进行匹配。 使用两个
当仅在一个边距上操作时,apply 似乎不会重新组装 3D 数组。考虑: arr 1),但对我来说仍然很奇怪,如果一个函数返回一个具有尺寸的对象,那么它们基本上会被忽略。 最佳答案 这是一个不太理
我有一个包含 GPS 坐标的 MySQL 数据库。这是我检索坐标的部分 PHP 代码; $sql = "SELECT lat, lon FROM gps_data"; $stmt=$db->query
我需要找到一种方法来执行这个操作,我有一个形状数组 [批量大小, 150, 1] 代表 batch_size 整数序列,每个序列有 150 个元素长,但在每个序列中都有很多添加的零,以使所有序列具有相
我必须通过 url 中的 json 获取文本。 层次结构如下: 对象>数组>对象>数组>对象。 我想用这段代码获取文本。但是我收到错误 :org.json.JSONException: No valu
enter code here- (void)viewDidLoad { NSMutableArray *imageViewArray= [[NSMutableArray alloc] init];
知道如何对二维字符串数组执行修剪操作,例如使用 Java 流 API 进行 3x3 并将其收集回相同维度的 3x3 数组? 重点是避免使用显式的 for 循环。 当前的解决方案只是简单地执行一个 fo
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我有来自 ASP.NET Web 服务的以下 XML 输出: 1710 1711 1712 1713
如果我有一个对象todo作为您状态的一部分,并且该对象包含数组列表,则列表内部有对象,在这些对象内部还有另一个数组listItems。如何更新数组 listItems 中 id 为“poi098”的对
我想将最大长度为 8 的 bool 数组打包成一个字节,通过网络发送它,然后将其解压回 bool 数组。已经在这里尝试了一些解决方案,但没有用。我正在使用单声道。 我制作了 BitArray,然后尝试
我们的数据库中有这个字段指示一周中的每一天的真/假标志,如下所示:'1111110' 我需要将此值转换为 boolean 数组。 为此,我编写了以下代码: char[] freqs = weekday
我是一名优秀的程序员,十分优秀!