用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟

思路:实现起来最麻烦的其实是水平居中和垂直居中,其中垂直居中是最麻烦的。考虑到浏览器兼容性,网上看了一些资料,发现在页面中垂直居中确实没有什么太好的办法。于是就采用了position:fixed属性控制时钟的绝对位置,通过clientWidth和clientHeight来获取时钟的宽和高,利用javascript控制marginLeft和marginTop来居中时钟。

代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Centered Clock</title>
    <style type="text/css">

		body{
			background: #fff;
		}

		body, div, p{
			margin: 0;
			padding: 0;
		}
		
		.center{
			position: fixed;
			left: 50%;
			top: 50%;
		}

		.box{
			border: 1px solid #000;
			padding: 20px 30px;
			font-size: 1.5em;
			font-weight: 500;
			margin: auto auto;
		}

    </style>
</head>
<body>
	<div class="center">
		<p class="box"></p>
	</div>
</body>
<script type="text/javascript">
	window.onload = function () {
		
		getTimes();
		var box = document.getElementsByClassName("box")[0];
		box.style.marginLeft = -box.clientWidth / 2 + "px";
		box.style.marginTop = -box.clientHeight / 2 + "px";
		setInterval(getTimes, 1000);
	}

	function getTimes() {

		var box = document.getElementsByClassName("box")[0];

		var dateTime = new Date();
		var year = dateTime.getFullYear();
		var date = dateTime.getDate();
		var month = dateTime.getMonth() + 1;
		var hours = dateTime.getHours();
		var minutes = dateTime.getMinutes();
		var secondes = dateTime.getSeconds();

		box.innerHTML = year + "-" + format(month) + "-" + format(date) + " " + format(hours) + ":"+ format(minutes) +":" + format(secondes);
	}

	function format(a) {
		return a.toString().replace(/^(\d)$/, "0$1");
	}

</script>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值