party_bid第四張卡小結

1.彈窗

彈窗，常用的有confirm()和alert()兩種，這裏想介紹以下自定義的彈窗。

 大家可以登錄http://v3.bootcss.com/javascript/

下載JavaScript插件，解壓後在自己的工程裏引入相關的js，css文件。

然後找到模態框，點擊進入可以看到很多不同樣式的模態框以及相對應的代碼，還有用法的簡介，可以找尋適合自己工程的模態框，然後拷貝對應的代碼，代碼可以根據自己的需要進行一些改動，使得模態框更符合工程需要。

首先確定自己要用的模態框的頁面，比如bidding_result.html，我在該頁面寫入如下模態框的代碼：

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

 然後在對應的bidding_result.js裏寫入如下代碼：

$('#myModal').modal('show');      //myModal爲bidding_result.html的 id

 最後運行一下可以看看效果，根據效果要進行一些適當的調整。調整我就不多說了。

 

 

2.setTimeout()方法用於在指定的毫秒後執行調用函數或表達式。

語法：setTimeout(code,millisec)     code：要調用的函數；millisec：執行代碼前需要等待的毫秒數。

（注：code只執行一次，如果需要多次調用，可以用setInterval()或讓code自身再調用setTimeout()）

setTimeout("alert('5 seconds!')",5000);   //5秒後彈出一個窗口，顯示“5 seconds！”

 

3.排序，計數

這裏想介紹一下underscore的三個函數。

首先關於排序，可以用到的sortBy()這個函數：

var bidList = [{'name':1,'price':22},{'name':2,'price':23},{'name':3,'price':21}];
//定義一個這樣的數組
_.sortBy(bidList,function(bid){return bid.price});     //返回一個按價格排序的數組

數組爲[{'name':3,'price':21},{'name':1,'price':22},{'name':2,'price':23}]

 

接下來是計數，可以用到countBy()和map()這兩個函數：

 

var bidCount = _.countBy(bidList,function(bid){return bid.price});

這樣我們會得到一個object：{'21':1,'22':1,'23':1} 

這時可以用map()將新得到的對象轉化成一個新的數組：

_.map(bidCount,function(value,key){return {'price':key,'count':value}});

 這樣就可以得到一個新的數組：[{'price':21,'count':1},{'price':22,'count':1},{'price':23,'count':1}]。