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}]。