如何显示数组中的随机项目？
Jun Jung |
var items = ['imgs/garbagebag.svg', //[0]
'imgs/straw.svg', // [1]
'imgs/utensil.svg', // [2]
'imgs/chipbag.svg', // [3]
'imgs/eggs.svg', // [4]
'imgs/glasscup.svg', //[5]
'imgs/ketchupbottle.svg', //[6]
'imgs/jamjar.svg', //[7]
'imgs/milkbottle.svg', //[8]
'imgs/popbottle.svg', //[9]
'imgs/eggshell.svg', //[10]
'imgs/apple.svg', //[11]
'imgs/banana.svg', //[12]
'imgs/teabag.svg', // [13]
'imgs/leave.svg', // [14]
'imgs/jug.svg', // [15]
'imgs/tetrapak.svg', // [16]
'imgs/container.svg', // [17]
'imgs/plasticbottle.svg', // [18]
'imgs/can.svg', //[19]
'imgs/newspaper.svg', //[20]
'imgs/cerealbox.svg', // [21]
'imgs/book.svg', // [22]
'imgs/cardboard.svg', // [23]
'imgs/bag.svg' // [24]
]
// This is the black hole on the wall
var hole = document.getElementById("hole");
// starts functioning after 5 seconds
var start = setInterval(shuffle,5000);
// displays an random items from array one by one
function shuffle(){
hole.addEventListener("click",function(){
console.log("items");
items[Math.floor(Math.random()*items.length)]
});
}
嗨，所以这是一个迷你游戏，教用户如何回收利用。在屏幕截图中，用户需要单击黑洞/孔才能在黑洞内一个接一个地显示随机项（我尝试附加它，但之前不知道要创建什么）。我对如何实现这一目标感到困惑。我所拥有的似乎还不够。我感谢解决方案和提示。感谢您阅读我的帖子。
UPDATE: So the codes Elliot provided is working. But for some reasons, newly created + randomized images have no pixels! I tried assigning new width and height + z-index with className in css but that is not doing anything either. I hope this is not a complicated problem to solve T.T
Eliott Robson
It might be worthwhile restructuring your code slightly. It looks like you are grouping your items.
var items = [{
image: "imgs/garbagebag.svg",
type: "paper"
}, {
image: "imgs/straw.svg",
type: "paper"
},
...]
This gives you a lot more flexibility in the meta data behind each item.
Then you need to add the events
var hole = document.getElementById("hole");
function showItem(item) {
var img = document.createElement("img");
img.setAttribute("src", item.image);
// store type as data attribute so we can access it later
img.setAttribute("data-type", item.type);
if (hole.childNodes[0]) {
hole.removeChild(hole.childNodes[0]);
}
hole.appendChild(img);
}
function showRandomItem() {
var item = items[Math.floor(Math.random()*items.length)];
showItem(item);
}
hole.addEventListener("click", function() {
showRandomItem();
});
Here is a working version of this code on JSFiddle
https://jsfiddle.net/nxc5zpen/
It looks like the issues you might be having are due to SVG scaling. Here is a working JSFiddle with SVGs.
https://jsfiddle.net/Lhot76gm/1/
And here is another version using background images for the hole.
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
构建类似于Jarvis的本地语言应用程序
- 2
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 3
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 4
SQL Server中的非确定性数据类型
- 5
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 6
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 7
如何了解DFT结果
- 8
ng升级性能注意事项
- 9
Embers js中的更改侦听器上的组合框
- 10
Swift 2.1-对单个单元格使用UITableView
- 11
Java中的循环开关案例
- 12
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 13
如何使用geoChoroplethChart和dc.js在Mapchart的路径上添加标签或自定义值？
- 14
ggplot：对齐多个分面图-所有大小不同的分面
- 15
如何避免每次重新编译所有文件？
- 16
Swift中的指针替代品？
- 17
完全禁用暂停（在内核级别？-必须与使用的DE和登录状态无关！）
- 18
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 19
使用分隔符将成对相邻的数组元素相互连接
- 20
如何开始为Ubuntu开发
- 21
Blazor：如何将事件传递给通用组件中的onClick函数
我来说两句