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

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

于是就採用了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. JavaScript--数据结构之栈

    4.1栈是一种高效的数据结构,是一种特殊的列表.栈内元素只能通过列表的一端访问,也就称为栈顶.后入的先出的操作.Last in First out.所以他的访问每次是访问到栈顶的元素,要想访问其余的元 ...

  2. 用Navicat连接MySQL数据库出现1251错误：密码方式错误

    原因:因为MySQL8.0是最新版密码保存方式,而图形化数据库管理工具还是原先的密码保存方式. 解决方式: 用CMD命令号方式进入MySQL use mysql: ALTER USER 'root'@ ...

  3. BZOJ3626: [LNOI2014]LCA（树链剖分+线段树）

    Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1.设dep[i]表示点i的深度,LCA(i,j)表示i与j的最近公共祖先.有q ...

  4. 1.11 Python基础知识 - 序列：元组

    元组(tuple)是一组有序系列,元组和列表是否相似,但是元组是不可变的对象,不能修改.添加或删除元组中的元素,但可以访问元组中的元素 元组的定义: 元组采用圆括号中用逗号分隔的元素 元组的基本操作和 ...

  5. CSS外边距合并（塌陷/margin越界）

    原文 简书原文:https://www.jianshu.com/p/5f18f12cd162 大纲 1.什么是外边距合并?(折叠外边距) 2.外边距带来的影响 3.折叠的结果 4.产生折叠的原因 5. ...

  6. 9 abstract 和 Virtual 之间的差别

    (1) abstract方法没有详细的实现.同一时候必须被覆写 (2) 虚(Virtual)方法能够没有详细的实现,也不一定必须覆写(虚方法定义时,能够没有详细的实现代码,可是必须创建方法体:即必须有 ...

  7. 启动Tomcat，startup.bat一闪而过的解决办法

    1.打开命令行:win+R --> cmd2.将解压后的tomcat\bin\startup.bat文件拖到控制台窗口中,回车. 这样就可以看到错误信息的提示,根据提示修改即可.

  8. JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...

  9. jvisualvm 工具使用

    VisualVM 是Netbeans的profile子项目,已在JDK6.0 update 7 中自带(java启动时不需要特定参数,监控工具在bin/jvisualvm.exe). https:// ...

  10. ex.Message "ORA-01691: Lob 段 USER_MURPHY.SYS_LOB0000093717C00006$$ 无法通过 1024 (在表空间 ZJHH 中) 扩展"

    Oracle,往数据库里导入dmp的时候报错:ORA-01691:Lob 段 无法通过8192(在表空间TS_SI中)扩展 解决方案1: 原因:所创建的表空间不足. 创建一个可拓展的表空间 creat ...