用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的。
考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法。
于是就採用了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实现“在页面中水平和垂直居中”的时钟的更多相关文章
- 文字在div中水平和垂直居中的的css样式
文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...
- 使用JavaScript设置、获取父子页面中的值
一:获取父页面中的值 有二种方法windows.open()和windows.showModalDialog() 1.windos.open(URL,name,reatures,replace) 再父 ...
- 同一标签内多个css规则在页面中如何显示?
这两天在学习css涉及到内联.外联.嵌入对页面的影响: 1.内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下: <st ...
- javascript小实例,在页面中输出当前客户端时间
时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每 ...
- 通过CSS控制页面中的内容垂直居中的方法
方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...
- 手把手教小白如何用css+js实现页面中图片放大展示效果
1.前言 很多童鞋会在项目中遇到一些上传图片,展示图片的操作,但是图片呢有大有小,为了页面的美观,有时候我们需要将图片展示成固定宽高度,但是呢,领导就会说,我想看大图片,怎么办?想看就看呀, ...
- css实现高度不固定的div元素模块在页面中水平垂直居中
<!DOCTYPE html><html> <head> <title>Laravel</title> <link ...
- 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...
- css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案
在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...
随机推荐
- 76.CGI编码
CGI编码 "%D6%DC%C8%F0%B8%A3"; 转换到字符串中: //CGI编码转到char类型的tmpstr中中 char* change(char *str) { // ...
- c#的中英文混合字符串截取 public static string SubString(string inputString, int byteLength)
/// <summary> /// c#的中英文混合字符串截取(区分中英文) /// </summary> /// <param ...
- 获取DOM元素到页面顶部的距离,亲测有效版本(转载)
原文:https://blog.csdn.net/u013764814/article/details/83825479 干脆点(博客就应该干脆,少扯皮) DOM元素有一个属性是offsetTop,表 ...
- Codeforces 451 E. Devu and Flowers(组合数学,数论,容斥原理)
传送门 解题思路: 假如只有 s 束花束并且不考虑 f ,那么根据隔板法的可重复的情况时,这里的答案就是 假如说只有一个 f 受到限制,其不合法时一定是取了超过 f 的花束 那么根据组合数,我们仍然可 ...
- 存储过程和SQL语句比较
做为SQL存储过程和.NET的新手,下面的指导还是很有用的,自己这一段刚刚接触这些东西,搜集了一些相关的东西,能使新手较容易上手,当然啦,要精通和熟练应用,还是要看更多更深的资料的,高手请不要见笑.以 ...
- CC2530定时器使用
定时器学习 文件夹 说明 依据数据手冊可知CC2530总共同拥有4个定时器,可是定时器2被系统占用,可用的仅仅有三个,分别为定时器1/3/4 Timer在协议栈的代码位置为hal_timer ...
- amazeui学习笔记--css(基本样式4)--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- JS学习笔记 - 微博发布效果
<script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...
- UVa第五章STL应用 习题((解题报告))具体!
例题5--9 数据库 Database UVa 1592 #include<iostream> #include<stdio.h> #include<string.h&g ...
- 清除浮动.md
清除浮动的三种方法 1 加空div层(.clear) 2 overflow属性设置(.clearo) 3 :after伪元素(.clearfix) <!DOCTYPE html> < ...