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

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

于是就採用了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. 19.Node.js EventEmitter

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里 ...

  2. web存储方法，现成代码

    1.cookie的设置与取用 function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(e ...

  3. BZOJ2119: 股市的预测（后缀数组）

    Description 墨墨的妈妈热爱炒股,她要求墨墨为她编写一个软件,预测某只股票未来的走势.股票折线图是研究股票的必备工 具,它通过一张时间与股票的价位的函数图像清晰地展示了股票的走势情况.经过长 ...

  4. sql server try catch

    一直不习惯Sql Server 2000提供的错误处理机制----繁琐,别扭...如今,Sql Server 2005提供了对Try...Catch的支持,我们总算可以象写程序一样写SQL语句了:) ...

  5. 解决ListCtrl控件第一列文字不能居中显示的问题/修改网格线

    把CListCtrl设置为Report风格,但是插入第一列的时候(InsertColumn)的时候会发现文字不能居中.即使使用了LVCFMT_CENTER,其他列都可以正常居中,但第一列仍然靠左显示. ...

  6. Spark源代码分析之中的一个：Job提交执行总流程概述

    Spark是一个基于内存的分布式计算框架.执行在其上的应用程序,依照Action被划分为一个个Job.而Job提交执行的总流程.大致分为两个阶段: 1.Stage划分与提交 (1)Job依照RDD之间 ...

  7. Android学习笔记之Bitmap位图的缩放

    位图的缩放也可以借助Matrix或者Canvas来实现. 通过postScale(0.5f, 0.3f)方法设置旋转角度,然后用createBitmap方法创建一个经过缩放处理的Bitmap对象,最后 ...

  8. 数据类型的提升（promotion）

    假如参与运算的数据类型不同或者取值范围过小,编译器会自动将其转换为相同的类型,这个类型就叫数据类型的提升(promotion). 1. C++ 语言环境的规定 unsigned char a = 17 ...

  9. 2. Dubbo和Zookeeper的关系

    转自:https://www.cnblogs.com/hirampeng/p/9540243.html Dubbo建议使用Zookeeper作为服务的注册中心. 1.   Zookeeper的作用: ...

  10. 洛谷 P1644 跳马问题

    P1644 跳马问题 题目背景 在爱与愁的故事第一弹第三章出来前先练练四道基本的回溯/搜索题吧…… 题目描述 中国象棋半张棋盘如图1所示.马自左下角(0,0)向右上角(m,n)跳.规定只能往右跳,不准 ...