用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>

转载于:https://www.cnblogs.com/llguanli/p/7387644.html

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

[css] 如何取消页面中选中的文字？
[css] 如何取消页面中选中的文字? user-select: none; /* browser-specific values */ -moz-user-select: none; -webkit ...
在js中访问html页面,javascript – 在IE9的html页面中访问js里面的全局函数
我正在尝试访问我在main.js文件中声明的全局函数,并尝试在html页面中使用它: (function(){ window.myFunction(); })(); 还有我的main.js文件 (fu ...
让div在body中水平和垂直居中
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
CSS、JS 使DIV水平和垂直居中的各种方法
在Web开发中,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div. 在这里,我 ...
使用CSS选择器在页面中插入内容
在css中,我们可以使用:before伪元素选择器与:after伪元素选择器在页面的前面和后面以content属性的方式插入内容. 从css2.0添加这两个伪元素选择器到css2.1到现在的3.0,都 ...
只在当前页面生效的css样式,修改页面中的一个样式仅在当前页面生效
问题描述校验的提示框出现在其他位置怎么修改问题出现的环境背景及自己尝试过哪些方法尝试直接修改样式会修改掉全局的样式怎么让这个样式仅在当前页面生效相关代码 // 请把代码文本粘贴到下方( ...
vue垂直布局_前端页面布局中水平、垂直居中问题
前言两年前工作时开的博客,一年前写了两篇博文,然后就到了现在才重拾起笔.原因有二,一是自觉技术不足,二曰懒. 最近由于在项目中遇到需求为拖动列可调整列顺序的表格,最后找到一款基于JQuery名为Da ...
使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法？
解决这个问题有多种方法 1.使用css hack 处理ie6下的问题. 2.嵌入其它标签使其垂直居中. 方法一: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ ...
CSS - 使表格td中的文字垂直居中
文字垂直居中的有如下的方法方法一: valign:middle // 不推荐使用代码如下: <table> <tbody> <tr> <td valig ...

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

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

最新文章

热门文章