首页 > 代码库 > 用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
用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>
用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。