Jump to content

javascript progress bar


Choutz
 Share

Recommended Posts

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 .

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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);
?>
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • 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.