前端的一些东西总结

最新推荐文章于 2021-06-08 18:39:53 发布

AsianPangolin

最新推荐文章于 2021-06-08 18:39:53 发布

阅读量195

点赞数 1

分类专栏：前端和LayUI 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_43976890/article/details/105689227

版权

前端和LayUI 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

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调用一次函数从而实现动态效果
}