1.hr分割线的用法
height:2px; 是hr的高度
border:none;是没有边框
border-top:2px dotted #DFDFDF;是设置上横线的样式
border-bottom:2px dotted #DFDFDF;是设置下横线的样式
dotted 虚线 #DFDFDF颜色
<!-- 普通线 -->
<hr style="border:1 dashed #5151A2" />
<!-- 单虚线 -->
<hr style="border:none;border-top:2px dashed #DFDFDF;" />
<!-- 双线 -->
<hr style="border-top: 2px dashed #DFDFDF; border-bottom: 2px dashed #DFDFDF; height: 2px" color=black />
<!-- 单线颜色不一样 -->
<hr style="height:10px;border:none;border-top:10px groove skyblue;" />
2.一个经典布局,和拓展用法
div内的三个div横向排布,中间固定宽度,剩下两个平分剩下的宽度
<div class="content">
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
</div>
<style>
.content {
position: absolute;
width: 600px;
display: flex;
top: 100px;
bottom: 100px;
}
.left,
.right {
flex: 1;
background-color: skyblue;
}
.mid {
width: 400px;
background-color: deeppink;
}
</style>
3.常见的DOM操作和事件
4.关于时间的两个工具方法
时间戳转年-月-日
dataToDate: function(data) {
//data为时间戳
var date = new Date(data);
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
var strDate = Y + M + D + h + m + s; //转换为年月日时分秒
var strDate = Y + M + D; //转换为年月日
return strDate;
}
显示实时时间
function showTime() { //时间显示函数
var now = new Date(); //创建一个Date对象
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月份(从0开始),所以+1
var date = now.getDate(); //日(1-31)
var day = now.getDay(); //星期(0-6)
var h = now.getHours(); //小时(0-23)
var m = now.getMinutes(); //分钟(0-59)
var s = now.getSeconds(); //秒
m = checkTime(m)
s = checkTime(s)
var weekday = new Array(7) //星期数进一处理
weekday[0] = "星期日";
weekday[1] = "星期一";
weekday[2] = "星期二";
weekday[3] = "星期三";
weekday[4] = "星期四";
weekday[5] = "星期五";
weekday[6] = "星期六";
document.getElementById("showtime").innerHTML = weekday[day] + " " + year + "年" + month + "月" + date + "日 " + h + ":" + m + ":" + s;
t = setTimeout('showTime()', 1000) //设置定时器,每隔1s调用一次函数从而实现动态效果
}