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

猜你喜欢

转载自moneyinto.iteye.com/blog/2094053