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">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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}]。