Jquery / Javascript插件不会重复

时间:2015-09-09 08:05:57

标签: javascript jquery html

我有一个jquery股票代码,我不能在同一页面上复制股票代码。我的想法是在同一页面上创建一个类似的股票代码,但有一个不同的股票列表。它可能就像更改一些变量名一样简单,或者因为API导致冲突而可能遇到问题。

我花了很多时间在上面,所以任何建议让这项工作真的很有帮助。

附件是我试图复制的股票代码的JSfiddle。如果有人可以在同一页面上复制这个股票代码,但只说几股,那么这对我有很大帮助。

请在此处查看我的JSfiddle:https://jsfiddle.net/90s6vd8z/1/

$scope.updateCenter = function(center) {
  $scope.center = center
  $("#centerModal").modal("show")
};

1 个答案:

答案 0 :(得分:0)

这个自动收报机只有12个选项。我所做的是减少卷轴的高度,动画的速度和div的数量

https://jsfiddle.net/RachGal/p6nofz00/



var gstock = ["NASDAQ:ASTE", "STO:ATCO-A", "JSE:BEL", "BIT:CNHI", "NYSE:DE", "KRX:042670", "EPA:PIG", "TYO:6305", "KRX:009540", "TYO:5406", "TYO:6301", "TYO:6326"];
$(document).ready(function () {
    for (var i = 0; i < gstock.length; i++) {
        $.getJSON("https://finance.google.com/finance/info?client=ig&q=" + gstock[i] + "&callback=?", function (response) {
            var stockInfo1 = response[0];
            var divContainer = $('*[data-symbol="' + stockInfo1.t + '"]');
            var divCurrency = $('*[data-currency="' + stockInfo1.d + '"]');
			var percentStock = !isNaN(stockInfo1.c) && !isNaN(stockInfo1.l) && stockInfo1.l ? ((parseFloat(stockInfo1.c)/parseFloat(stockInfo1.l)) * 100) : undefined;
            var stockString1 = '<div class="stockWrapper">' + divContainer.data('title') + ':';
            var stockName1 = stockInfo1.t;
            var stockCurency1 = stockInfo1.d;
            
            
            var stockPrice2 = "";
        
            stockPrice2 += '<span class="stockSymbol "> ' + stockInfo1.l + '</span>';
          
            
            
            
            
            
            
            
            var stockChange = "";
            stockString1 += '<span class="stockSymbol "> ' + stockInfo1.t + ' </span>';
            if(!isNaN(percentStock) && percentStock > 0) {
                percentStock = Number((percentStock).toFixed(2));
                stockChange += '<span class="stockChange "> ' + percentStock + ' %</span>';
            } else if(!isNaN(percentStock)) {
                percentStock = Number((percentStock).toFixed(2));
            	stockChange += '<span class="stockPrice "> ' + percentStock + ' %</span>';
            } else {
                stockChange += '<span class="stockPrice "></span>';
                stockChange += percentage + '% </span>';
                
                
            }
            stockString1 += stockChange + '</div>';
            $("#title").append("<div>" + divContainer.data('title') + "</div>");
            $("#symbols").append("<div><b>" + stockInfo1.t + "</b></div>");
          $("#currency").append("<div><b>" + $(divContainer).attr( 'data-currency') + "</b></div>");
            $("#livePrice").append("<div>" + stockPrice2 + "</div>");
            $("#liveData").append("<div>" + stockChange + "</div>");
            divContainer.append(stockString1);
            
            

        });
    }
});
&#13;
.box {
    width: 100%;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}

.stockSymbolnew {
}
.stockWrapper {
    text-indent: -1000em;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
}
.stockSymbol {
    font-weight: 600;
}
.stockPrice {
    font-weight: 600;
    color: red;
}
.stockChange {
    font-weight: 600;
    color: green;
}
.stockTime {
    font-weight: 600;
    color: grey;
    font-size: smaller;
}

.symbol {
    float: left;
    margin-right: 0px;
}
.symbol .name {
    display: block
}
.symbol.up {
    background: #70DB70
}
.symbol.up .change {
    color: green
}
.symbol.down {
    background: #f7cdc2
}
.symbol.down .change {
    color: red
}

.floatleft2 {
    float:left;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 12px;
    width: 130px;
}

.floatleft999 {
    float:left;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 12px;
    width: 35px;
}

.floatleft20 {
    float:left;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 12px;
    width: 50px;
}

.floatleft9 {
    float:left;
    display: block;
    padding-top: 5px;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-size: 12px;
    width: 45px;
}
#verticalScroller {
    position: absolute;
    width:268px;
    height: 50px;
    border: 0px solid red;
    overflow: hidden;
}
#verticalScroller > div {
    position:absolute;
    width:268px;
    height:50px;
    border: 0px solid blue;
    overflow:hidden;
}
div.marquee > div > div > div:nth-child(odd) {
    background: #eee;
}
div.marquee > div > div > div {
    margin-right: -6px;
}
&#13;
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div class="container">
  <div class="marquee">  
<div class="1" data-symbol="ASTE" data-title="ASTEC IND" style="display: none;" data-currency="USD" ></div>
<div class="2" data-symbol="ATCO-A" data-title="ATLAS COPCO" data-currency="SEK" style="display: none;"></div>
<div class="3" data-symbol="BEL" data-title="BELL EQUIPMENT" data-currency="GBP" style="display: none;"></div>
<div class="4" data-symbol="CAT" data-title="CAT" data-currency="GBP" style=" display: none;"></div>
<div class="5" data-symbol="CNHI" data-title="CHN INDUSTRIAL" data-currency="EUR" style="display: none;"></div>
<div class="6" data-symbol="DE" data-title="DEERE" data-currency="USD" style="display: none;"></div>
<div class="7" data-symbol="042670" data-title="DOOSAN" data-currency="GBP" style="display: none;"></div>
<div class="8" data-symbol="PIG" data-title="HAULOTTE" data-currency="EUR" style="display: none;"></div>
<div class="9" data-symbol="6305" data-title="HIACHI" data-currency="GBP" style="display: none;"></div>
<div class="10" data-symbol="009540" data-title="HYUNDAI " data-currency="GBP" style="display: none;"></div>
<div class="12" data-symbol="5406" data-title="KOBE STEEL" data-currency="JPY" style="display: none;"></div>



<div class="box">
<div id="title" class="floatleft2"></div>
    <div id="currency" class="floatleft999"></div>
<div id="livePrice" class="floatleft20"></div>

<div id="liveData" class="floatleft9"></div>
</div></div>
</div>
&#13;
&#13;
&#13;