1.按日历设置每天的数据 (demo1.zip)
点击星期行的箭头,把第一个输入框(或者下拉框)的值赋给其它所以输入框(或者下拉框),
点击星期行外的每行箭头,把点击行的第一个输入框(或者下拉框)的值赋给这一行其它所以输入框(或者下拉框)。
主要用到了日期相减和构造nextdate的思想
var curData = new Date(); curData.getYear(); //获取当前年份(2位) curData.getFullYear(); //获取完整的年份(4位,1970-????) curData.getMonth(); //获取当前月份(0-11,0代表1月) curData.getDate(); //获取当前日(1-31) curData.getDay(); //获取当前星期X(0-6,0代表星期天) curData.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) curData.getHours(); //获取当前小时数(0-23) curData.getMinutes(); //获取当前分钟数(0-59) curData.getSeconds(); //获取当前秒钟数(0-59)
2.浮动广告位 (demo2.zip)
在浏览器中垂直居中,距左100像素。用了setTimeout来触发事件,所以当浏览器出现滚动时没有用到onscroll事件。
3.自适应满屏高度的布局 (demo3.zip)
原本以为这种自适应满屏高度的结构只能通过js才能兼容ie6,看了冰极峰 的这篇博客,受到了一些启发。
自己把代码拿来试了试,通过纯css可以实现兼容ie6,只是要用到怪异模式:<!-- Put IE into quirks mode -->
效果虽然达到了,可是还是没明白为什么用到<!-- Put IE into quirks mode -->就兼容ie6了。
附件里我把原代码稍作了些修改,去掉了些效果,简化了代码量。
4.图片滚动效果 (demo4.zip)
5.图片轮换效果 (demo5.zip)
6.图片滚动效果 (demo6.zip)
7.使用纯CSS实现未知尺寸的图片在容器中水平和垂直居中。
<style type="text/css">
.box {
display: table-cell;
vertical-align:middle;
width:200px;
height:200px;
text-align:center;
/* hack for ie */
*display: block;
*font-size: 175px;
/* end */
border: 1px solid #eee;
}
.box img {
vertical-align:middle;
}
</style>
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
很遗憾,这个解法用到了css hack。我们也不理解为什么设置font-size可以让IE显示垂直居中的效果。根据我们的计算,高度/字体大小的比值为1.14左右时IE可实现垂直居中。