我想在JavaScript / JQuery中创建像killfeed这样的CS:GO。
对于每个不知道这样的东西的人,我做了this GIF。
当您查看我的current JFiddle时,您可以看到我当前的工作状态。
我开始尝试自己在第42行的函数sortList()
中执行此操作,但killfeed未能按正确的顺序正确删除条目。
有解决此问题的提示吗?
最佳答案
这是一个更简单的解决方案。
我认为代码几乎可以自我解释,并在代码中添加了注释,但是如果您有更多问题,请随时提出:
$(function() {
var feedID = 1;
//how many feeds to have in the box
var maxFeedsInBox = 4;
//feed life span in ms
var feedLife = 3000;
var preText = 'Player -> ';
var randomNames = ['Bot Trevor', 'Bot Troy', 'Bot Dennis', 'Bot Lucy', 'Bot Mark', 'Bot Maxi', 'Bot Kannnix', 'Bot Luis', 'Bot Jan', 'Bot Istso'];
var linebreaker = "<br />";
var $image = $('img.clickable');
var $killfeedbox = $('.killFeedBox');
//set a timer to run a cleaning function. runs every feedLife ms.
var $FeedCleaner = setInterval(feedCleaner, feedLife);
//a function to generate a randon bot name
function getRandomName() {
var randomNumber = Math.floor((Math.random() * 10) + 0);
var randomName = randomNames[randomNumber];
return randomName;
}
$image.click(function() {
//add a feed to the feedbox
addFeed(preText + getRandomName());
});
//a function that adds a feed and colors it with a cycling 4 colors,
//this function removed the first feed when it passes maximum defined feeds
function addFeed(txt) {
var feedsCount = $killfeedbox.children().length;
console.log(feedsCount);
if (feedID >= 4) {
feedID = 0;
}
feedID = feedID + 1;
var $newFeed = $("<span/>").addClass("textfieldCommon").addClass("textfield" + feedID).text(txt);
if (feedsCount >= maxFeedsInBox) {
$killfeedbox.children().first().remove();
}
$newFeed.appendTo($killfeedbox);
}
function feedCleaner() {
var feedsCount = $killfeedbox.children().length;
if (feedsCount > 0) {
$killfeedbox.children().first().remove();
}
}
});
.textfieldCommon {
display: block;
}
.textfield1 {
color: red;
}
.textfield2 {
color: blue;
}
.textfield3 {
color: black;
}
.textfield4 {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://placehold.it/500x100" class="clickable" />
<br />
<span class="killFeedBox"></span>
Fiddle
更新:
如果需要的话,这是动画的:Fiddle
关于javascript - 像killfeed一样分类和淡出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30142035/