Jump to content
Choutz

javascript progress bar

Recommended Posts

Choutz

Boa tarde, eu queria criar uma progress bar de 0/30.

O código que ai mostro funciona perfeitamente, aumenta sempre que meto alguns itens e tal, mas em vez do numero queria por numa progress bar o que está dificil , tentei várias opções e não consegui também fui sempre pelas mais "simples".

Exemplo da barra, eu queria que ele mostra-se está contagem.

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>

Queria que mostra-se os 0/30, neste caso é o codigo

Items: <span id="pot-items"></span>

Código completo:

<div class="col-sm-8">
<div class="bg" style="padding: 5px;">
 <div id="pot-items-price" style="display: none;">
 Items: <span id="pot-items"></span>/30| Total Pot Price: <span id="pot-price"></span>
 <br>
 You have deposited <span id="items-deposited-count">0</span> items worth <span id="items-deposited-price">$0.00</span> for a <span id="items-deposited-chance">0</span>% chance.
 </div>
 <div id="pot">loading…</div>
</div>
<br>
</div>

Já tentei várias vezes substituir e assim mas nada funciona .

Share this post


Link to post
Share on other sites
HappyHippyHippo

qual o resultado (não pretendido) que te é apresentado com o código que apresentas aqui ?


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Choutz

a barra de progessão só ta com o codigo que tem em cima, não modifiquei nada, porque não consigo juntar os 2 códigos.

Share this post


Link to post
Share on other sites
Choutz

Está e a váriavel

pot-items

, o que dá o valor 0 da base de dados (vai alterando constante o adicionar de itens), então queria que a progress bar le-se a variavel, assim ia aumentando constantemente..

Share this post


Link to post
Share on other sites
HappyHippyHippo

então o teu problema é saber quantos elementos tem a base de dados ou como colocar esse valor no meio do HTML ?


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Choutz

colocar o valor no meio do html exato.

Desculpa ai a confusão, mas nunca pedi muita ajuda sou um bocado dificil a explicar

Share this post


Link to post
Share on other sites
HappyHippyHippo

se tens/sabes como obter o valor, apresenta os seguintes dois códigos:

- código de obtenção do valor

- código de apresentação de HTML


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Choutz

Código de apresentação , progress bar, está copy-paste.

<div class="col-sm-8">
   <div class="bg" style="padding: 5px;">
 <div id="pot-items-price" style="display: none;">
 <div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="pot-items"
 aria-valuemin="0" aria-valuemax="30" style="width:70%">
 <span class="sr-only">70% Complete</span>
 </div>
 </div>
 Items: <span id="pot-items"></span>/30| Total Pot Price: <span id="pot-price"></span>
  <br>
  You have deposited <span id="items-deposited-count">0</span> items worth <span id="items-deposited-price">$0.00</span> for a <span id="items-deposited-chance">0</span>% chance.
 </div>
 <div id="pot">loading…</div>
   </div>
   <br>
  </div>

JS.

//Check for new items in the pot
  if (pot.length > potCount || (pot.length < potCount && prevGameID !== mLastGameID)) {
   potCount = pot.length;
   //Set pot price
   var realPotPrice = getFormattedPrice(potPrice);
   $('#pot-price').text(realPotPrice);
   document.title = realPotPrice + ' | CSGO Inzane';
   //Set number of pot items
   $('#pot-items').text(potCount);
   //Set items in pot
   var potStr = generatePotStr(pot);
   console.log('Pot updated for new items.');
   $('#pot').html(potStr);

PHP

# Create all items array from json
$allItems = json_decode($allItemsJson, true);

$allItemsObj = json_encode($itemsArr);
$data = array('totalPrice' => $totalPrice, 'minDeposit' => $minDeposit, 'allItems' => $allItemsObj);
echo jsonSuccess($data);

PHP mas o código todo

<?php
# Copyright (c) 2015 Jordan Turley, CSGO Win Big. All Rights Reserved.
include 'default.php';
$db = getDB();
$maxPotCount = 30;
# Get password, owner steam ID, and all deposit items
$password = isset($_POST['password']) ? $_POST['password'] : null;
$tradeOwnerSteamId32 = isset($_POST['owner']) ? $_POST['owner'] : null;
$allItemsJson = isset($_POST['items']) ? $_POST['items'] : null;
if (is_null($password) || is_null($tradeOwnerSteamId32) || is_null($allItemsJson) || strlen($password) === 0 || strlen($tradeOwnerSteamId32) === 0 || strlen($allItemsJson) === 0) {
echo jsonErr('One of the required fields was not sent correctly or was left blank.');
return;
}
# Convert Steam ID to Steam64 ID
$idParts = explode(':', $tradeOwnerSteamId32);
$authServer = intval($idParts[1]);
$accountNumber = intval($idParts[2]);
$tradeOwnerSteamId64 = $accountNumber * 2 + 76561197960265728 + $authServer;
# Get the password from config file and make sure it matches
$fileLoc = $_SERVER['DOCUMENT_ROOT'] . '/passwords.txt';
if (file_exists($fileLoc)) {
$fh = fopen($fileLoc, 'r');
$jsonStr = fgets($fh);
$arr = json_decode($jsonStr, true);
$realPassword = $arr['default-password'];
fclose($fh);
} else {
die('no file found');
}
if ($password !== $realPassword) {
echo jsonErr('The password was incorrect.');
return;
}
# Create all items array from json
$allItems = json_decode($allItemsJson, true);
# Get the depositor's inventory
$depositorInventory = json_decode(file_get_contents("https://steamcommunity.com/profiles/$tradeOwnerSteamId64/inventory/json/730/2"), true);
if ($depositorInventory['success'] !== true) {
echo jsonErr('An error occured fetching the depositor\'s inventory.');
return;
}
$rgInventory = $depositorInventory['rgInventory'];
$rgDescriptions = $depositorInventory['rgDescriptions'];
$totalPrice = 0;
$itemsArr = array();
# Loop through each item and get their name and price
foreach ($allItems as $item) {
$appId = $item['appid'];
$contextId = $item['contextid'];
$amount = $item['amount'];
$assetId = $item['assetid'];
# Check if any items are not for CSGO, just in case.
if ($appId !== 730 || $contextId !== 2) {
 echo jsonErr('One of the items was not for CSGO.');
 return;
}
$inventoryItem = $rgInventory[$assetId];
$classId = $inventoryItem['classid'];
$instanceId = $inventoryItem['instanceid'];
$descriptionItem = $rgDescriptions[$classId . '_' . $instanceId];

$marketName = $descriptionItem['market_name'];
$iconUrl = $descriptionItem['icon_url'];
# Get all item tags
$tags = $descriptionItem['tags'];
# Loop through all tags and find the rarity tag
$tagFound = false;
foreach ($tags as $tag) {
 $tagCategory = $tag['category'];
 if ($tagCategory === 'Rarity') {
  $tagFound = true;
  $rarityName = $tag['name'];
  $rarityColor = $tag['color'];
 }
}
# Just in case for some reason the rarity couldn't be found
if (!$tagFound) {
 $rarityName = '';
 $rarityColor = '';
}
# Get price of item from database
$stmt = $db->prepare('SELECT * FROM items WHERE marketName = :name');
$stmt->bindValue(':name', $marketName);
$stmt->execute();
$item = $stmt->fetch();
$price = intval($item['avgPrice30Days']);
# If the 30 day average is 0, set it to the 7 day average
if ($price === 0) {
 $price = intval($item['avgPrice7Days']);
}
# If the 7 day average is 0 again, set it to the current price
if ($price === 0) {
 $price = intval($item['currentPrice']);
}
if ($price === 0) {
 $price = intval($item['suggestedPriceMin']);
}
# If all of those are 0, set it to the Steam market price
if ($price === 0) {
 $hash = urlencode($marketName);
 $marketObj = json_decode(file_get_contents("http://steamcommunity.com/market/priceoverview/?currency=1&appid=730&market_hash_name=$hash"), true);
 if ($marketObj['success'] !== true) {
  echo jsonErr('An error occured while fetching market price for an item.');
  return;
 }
 $medianPrice = $marketObj['median_price'];
 $lowestPrice = $marketObj['lowest_price'];
 if (!isset($medianPrice) && !isset($lowestPrice)) {
  echo jsonErr('One or more items was not found on the steam market place.');
  return;
 }
 if (isset($medianPrice)) {
  $price = doubleval(substr($medianPrice, 1)) * 100;
 } else {
  $price = doubleval(substr($lowestPrice, 1)) * 100;
 }
}
$arr = array(
 'classId' => $classId,
 'instanceId' => $instanceId,
 'marketName' => $marketName,
 'rarityName' => $rarityName,
 'rarityColor' => $rarityColor,
 'price' => $price,
 'iconUrl' => $iconUrl
);
# Just in case the SteamBot decides to have the amount more than 1
for ($i1=0; $i1 < $amount; $i1++) {
 array_push($itemsArr, $arr);
 $totalPrice += $price;
}
}
$minDeposit = $totalPrice >= 100 ? 1 : 0;
$allItemsObj = json_encode($itemsArr);
$data = array('totalPrice' => $totalPrice, 'minDeposit' => $minDeposit, 'allItems' => $allItemsObj);
echo jsonSuccess($data);
?>

Share this post


Link to post
Share on other sites
HappyHippyHippo

no código que apresentaste não existe qualquer tipo de ligação entre o PHP apresentado e o HTML/Javascript.


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites
Choutz

Já consegui a barra como queria, mas tenho um problema esquisito .

Barra sozinha :

http://prntscr.com/8j0037

E depois quando meto no site:

http://prntscr.com/8j0074

ai no site copiei tal e qual o código para exprimentar.

Barra sozinha :

<?php
$total = 30;
$current = 25;
$percent = round(($current/$total) * 100,1);
?>
<style type="text/css">
.outter{
height:25px;
width:500px;
border:solid 1px #000;
}
.inner{
height:25px;
width:<?php echo $percent ?>%;
border-right:solid 1px #000;
background-color:lightblue;
}
</style>
<div class="outter">
<div class="inner">
<?php echo "$current of $total"?>
</div>
</div>

Código página web principal:

Código:

<div class="col-sm-8">
<div class="bg" style="padding: 5px;">
 <div id="pot-items-price" style="display: none;">
 <?php
 $total = 30;
 $current = 25;
 $percent = round(($current/$total) * 100,1);
 ?>
<style type="text/css">
.outter{
height:25px;
width:500px;
border:solid 1px #000;
}
.inner{
height:25px;
width:<?php echo $percent ?>%;
border-right:solid 1px #000;
background-color:lightblue;
}
 </style>
 <div class="outter">
 <div class="inner">
 <?php echo "$current of $total"?>
 </div>
 </div>

 Items: <span id="pot-items"></span>/30| Total Pot Price: <span id="pot-price"></span>
 <br>
 You have deposited <span id="items-deposited-count">0</span> items worth <span id="items-deposited-price">$0.00</span> for a <span id="items-deposited-chance">0</span>% chance.
 </div>
 <div id="pot">loading…</div>

</div>
<br>
</div>

Edited by Choutz

Share this post


Link to post
Share on other sites
HappyHippyHippo

dizer que tens um problema esquisito e não dizer qual é, é a mesma coisa que não dizer nada


IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.