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

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

于是就採用了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. InstallShield详细制作说明(四)

    十.编译打包

  2. CISP/CISA 每日一题 16

    CISA 每日一题(答) 作业调度软件的优点: 1.作业信息仅需建立一次,减少错误发生概率: 2.可定义作业间的依赖关系,当某一项作业失败时,依赖于该作业的后续作业就不会被执行: 3.所有成功或失败的 ...

  3. OC文件操作、获取文件属性

    #import <Foundation/Foundation.h> //获取文件的属性 int main(int argc, const char * argv[]) { @autorel ...

  4. 如何让Apache不显示服务器信息

    如何让Apache不显示服务器信息 Apache的默认配置是会显示服务器信息的,比如访问一个服务器上不存在的页面,Apache会返回"Not Found"的错误,这个错误页面的最下 ...

  5. 软件——机器学习与Python，Python3的输出与输入

    输出 用print()在括号中加上字符串,就可以向屏幕上输出指定的文字.比如输出'hello, world',用代码实现如下: >>> print('hello, world') p ...

  6. 洛谷 P2693 [USACO1.3]号码锁 Combination Lock

    P2693 [USACO1.3]号码锁 Combination Lock 题目描述 农夫约翰的奶牛不停地从他的农场中逃出来,导致了很多损害.为了防止它们再逃出来,他买了一只很大的号码锁以防止奶牛们打开 ...

  7. [React] Animate your user interface in React with styled-components and "keyframes"

    In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyfra ...

  8. Testin云測与ARM 战略合作：推动全球移动应用加速进入中国市场

    Testin云測与ARM 战略合作:推动全球移动应用加速进入中国市场 2014/10/14 · Testin · 业界资讯 (中国北京–2014年10月14日 )全球最大的移动游戏.应用真机和用户云測 ...

  9. 【Java并发编程实战】-----“J.U.C”：CLH队列锁

    在前面介绍的几篇博客中总是提到CLH队列,在AQS中CLH队列是维护一组线程的严格依照FIFO的队列.他可以确保无饥饿,严格的先来先服务的公平性.下图是CLH队列节点的示意图: 在CLH队列的节点QN ...

  10. js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么

    js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么 一.总结 一句话总结:$.getScript()和$.getJSON()方法专门用来加载JS/JSON文件(远程 ...