用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>轉載于:https://www.cnblogs.com/llguanli/p/7387644.html
總結
以上是生活随笔為你收集整理的用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RzPageControl 关闭按钮
- 下一篇： 求一个天下三好听的名字