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

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

于是就採用了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. 如何应对DDOS网络攻击

      650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/a ...

  2. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  3. 【2017百度之星程序设计大赛 - 复赛】Valley Numer

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6148 [题意] 在这里写题意 [题解] 先把1..N里面的山峰数字个数算出来->x 然后用N减去这 ...

  4. JavaScript学习总结（3）——JavaScript函数(function)

    一.函数基本概念 为完成某一功能的程序指令(语句)的集合,称为函数. 二.JavaScript函数的分类 1.自定义函数(我们自己编写的函数),如:function funName(){} 2.系统函 ...

  5. 字串乱序 PHP&JS

    <?php /** * 字串乱序 PHP&JS * * php 中把字串乱序后输出给客户机的 JAVASCRIPT , JAVASCRIPT 中恢复 * 在指定长度提取一个字符,并把这一 ...

  6. Matrix学习——基础知识

    以前在线性代数中学习了矩阵,对矩阵的基本运算有一些了解,前段时间在使用GDI+的时候再次学习如何使用矩阵来变化图像,看了之后在这里总结说明. 首先大家看看下面这个3 x 3的矩阵,这个矩阵被分割成4部 ...

  7. maven的pom.xml配置文件讲解

    <project xmlns="http://maven.apache.org/POM/4.0.0 "     xmlns:xsi="http://www.w3.o ...

  8. Windows Forms 布局篇

    1,锚定功能(Anchor属性) 默认为“Top,Left”,不管窗体大小如果改变,保持相对于窗体左上角的位置. 如果设置为”Top,Bottom,Left,Right”这样,控件的大小将随窗体的大小 ...

  9. $OEM$文件夹的使用 (By无约而来)

    WIN7-OEM资料包中的目录都是以$OEM$文件夹出现的.比$OEM$高一级的目录,我通常是用来表示下一级的$OEM$的属性,例如,X64_ADMIN_LOADER表示此目录下的$OEM$文件夹是用 ...

  10. windows下安装wabt

    windows下安装wabt 安装前准备cmake.mingw环境 安装cmake 安装mingw 步骤 # 1.克隆wabt源码 git clone https://github.com/WebAs ...