思路：实现起来最麻烦的事实上是水平居中和垂直居中，当中垂直居中是最麻烦的。

考虑到浏览器兼容性，网上看了一些资料，发如今页面中垂直居中确实没有什么太好的办法。

于是就採用了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实现“在页面中水平和垂直居中”的时钟的更多相关文章

  1. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  2. 使用JavaScript设置、获取父子页面中的值

    一:获取父页面中的值 有二种方法windows.open()和windows.showModalDialog() 1.windos.open(URL,name,reatures,replace) 再父 ...

  3. 同一标签内多个css规则在页面中如何显示？

    这两天在学习css涉及到内联.外联.嵌入对页面的影响: 1.内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下: <st ...

  4. javascript小实例，在页面中输出当前客户端时间

    时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每 ...

  5. 通过CSS控制页面中的内容垂直居中的方法

    方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...

  6. 手把手教小白如何用css+js实现页面中图片放大展示效果

    1.前言      很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...

  7. css实现高度不固定的div元素模块在页面中水平垂直居中

    <!DOCTYPE html><html>    <head>        <title>Laravel</title> <link ...

  8. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  9. css系列（布局）：实现一个元素在浏览器中水平、垂直居中的几个方案

    在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...

随机推荐

  1. 32.Node.js中的常用工具类util

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html util是一个Node.js核心模块,提供常用函数的集合,用于弥补JavaScrip ...

  2. NPOI根据列索引获取列名

    public static string ConvertColumnIndexToColumnName(int index) { index = index + ; ; ]; ; ) { int mo ...

  3. C#截取指定长度中英文字符串方法 (修改)

    public static string GetFirstString(string stringToSub, int length) { Regex regex = new Regex(" ...

  4. (转)Linux下使用rsync最快速删除海量文件的方法

    转自 : http://www.ha97.com/4107.html 昨天遇到了要在Linux下删除海量文件的情况,需要删除数十万个文件.这个是之前的程序写的日志,增长很快,而且没什么用.这个时候,我 ...

  5. 进阶攻略|最全的前端开源JS框架和库

    新的 Javascript 库层出不穷,从而Web 社区愈发活跃.多样.在多方面快速发展.详细去描述每一种主流的 Javascript框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响 ...

  6. Android中的帧动画与补间动画的使用

    前言 在日常开发中,我们有时候须要一些好看的动画效果,这时能够充分利用Android提供的这几种动画来实现. Android提供了3种类型的动画: 补间动画:补间动画能够应用于View,让你能够定义一 ...

  7. Eclipse使用方法和技巧二十七：定义自己的高速联想词

    某天在调试代码的时候.尽管是android的project还是习惯的输入syso.然后在ALT+/一下. 旁边的同事就问了一下,这个log打印输出的tag是什么. 接着又问了为什么syso可以智能联想 ...

  8. 40.lombok在IntelliJ IDEA下的使用

    转自:https://www.cnblogs.com/yjmyzz/p/lombok-with-intellij-idea.html lombok是一款可以精减java代码.提升开发人员生产效率的辅助 ...

  9. 笔记三：JS正则表达式

    正则表达式(英语:Regular Expression,在代码中常简写为regex.regexp或RE)使用单个字符串来描述.匹配一系列符合某个句法规则的字符串搜索模式.说白了正则表达式就是处理字符串 ...

  10. 【习题 6-9 UVA - 127】"Accordian" Patience

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 链表模拟即可. 1pile不能加s... [代码] #include <bits/stdc++.h> using nam ...