<!DOCTYPE html>

<html>

<head>

	<meta charset="UTF-8">

	<title>炫酷时钟</title>

	<style type="text/css">

		body{

			height: 100%;color: #51555c;

			background: url("./img/bg1.png") no-repeat;

                       			/* 背景图垂直、水平均居中 */

			background-position: center center;

			/* 背景图不平铺 */

			background-repeat: no-repeat;

			/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */

			background-attachment: fixed;

			/* 让背景图基于容器大小伸缩 */

			background-size: cover;

			/* 设置背景颜色，背景图加载过程中会显示背景色 */

			background-color: #464646;

		}

		img{

			display: inline-block;

			width: 28px;

			height: 50px;

			margin:0 4px;

		}

		.main_demo{

			width: 910px;

			min-height: 600px;

			margin:30px auto 0 auto;

		}

		.main_demo h2{

			text-align: center;

			padding: 10px;

			font-size: 40px;

			color: wheat;

		}

		.clock{

			width: 500px;

			padding: 40px;

			margin:2px auto;

		}

		.clock_right{

			text-align: right;

			margin:4px;

		}

	</style>

</head>

<body>

	<div class="main_demo">

		<div align="center">

			<h2>Js 炫酷时钟</h2>

		</div>

		<div class="clock">

			<!--10点-->

			<img src="" />

			<img src="" />

			：

			<!--40分-->

			<img src="" />

			<img src="" />

			：

			<!--*秒-->

			<img src="" />

			<img src="" />

			<br />

			<div class="clock_right">

				<!--2017年-->

				<img src="" />

				<img src="" />

				<img src="" />

				<img src="" />

				：

				<!--09月-->

				<img src="" />

				<img src="" />

				：

				<!--27日-->

				<img src="" />

				<img src="" />

			</div>

		</div>

	</div>

</body>

<script type="text/javascript">

	var imgs = document.getElementsByTagName('img');

	setInterval(getTime,1000);

	function getTime(){

		var _date = new Date();

		var year = _date.getFullYear();

		var month = _date.getMonth()+1;

		var day = _date.getDate();

		var hour = _date.getHours();

		var minutes = _date.getMinutes();

		var second = _date.getSeconds();

		var newDate = addZero(hour) + "" + addZero(minutes)+ "" + addZero(second)+""+addZero(year) + "" + addZero(month)+ "" + addZero(day)

			;

		console.log(newDate.length);

		for(var i = 0;i < newDate.length;i++){

			imgs[i].src = 'img/time_' + newDate[i] + '.png';

		}

	}

	getTime();

	function addZero(num){

		if(num < 10){

			num = "0" + num;

		}

		return num

	}

</script>

</html>

css怎样让背景充满整个屏幕的更多相关文章

  1. 004-CSS怎样让背景充满整个屏幕

    <!doctype html><html><body> ...Your content goes here...</body></html> ...

  2. css中设置背景图片适应屏幕

    以body为例 body{ background: url(../img/jld.png) no-repeat center center fixed; -webkit-background-size ...

  3. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  4. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  5. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  6. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  7. 用css实现条纹背景

    我先额外的说一下怎么用CSS绘制三角形: 绘制三角形是把边框加粗,将元素的宽高都设为0,让其余的边框颜色透明,下面我们来看实现的代码: 先把边框的颜色设置成不同颜色: #div{ border-col ...

  8. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  9. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

随机推荐

  1. python中pygame模块的Linux下安装过程

    一.使用pip安装Python包 大多数较新的Python版本都自带pip,因此首先可检查系统是否已经安装了pip.在Python3中,pip有时被称为pip3. 1.在Linux和OS X系统中检查 ...

  2. ldap数据库--ODSEE--复制协议

    简单介绍一下ODSEE的复制拓扑的建立,复制协议可以通过管理界面进行创建,也可以通过命令行创建.在此之前需要了解一些复制协议的相关概念,这里针对OESEE. 1,复制角色 master(提供者,也可以 ...

  3. 全面理解 ASP.NET Core 依赖注入

    DI在.NET Core里面被提到了一个非常重要的位置, 这篇文章主要再给大家普及一下关于依赖注入的概念,身边有工作六七年的同事还个东西搞不清楚.另外再介绍一下.NET  Core的DI实现以及对实例 ...

  4. JavaScript:在JS中截取字符串的方法

    这篇主要说一说截取字符串的方法,用于帮助自己缕清方法的作用,参数的意义,返回值,是否对于原来的字符串进行了操作等. 在javascript中,常见的截取字符串的方法有slice().substring ...

  5. 浅谈Android中的组播(多播)

    组播使用UDP对一定范围内的地址发送相同的一组Packet,即一次可以向多个接受者发出信息,其与单播的主要区别是地址的形式.IP协议分配了一定范围的地址空间给多播(多播只能使用这个范围内的IP),IP ...

  6. [转载] ZooKeeper原理及使用

    转载自http://www.wuzesheng.com/?p=2609 ZooKeeper是Hadoop Ecosystem中非常重要的组件,它的主要功能是为分布式系统提供一致性协调(Coordina ...

  7. sysbench

    安装 http://www.cnblogs.com/zhoujinyi/archive/2013/04/19/3029134.html http://space.itpub.net/758322/vi ...

  8. canvas图表(3) - 饼图

    原文地址:canvas图表(3) - 饼图 这几天把canvas图表都优化了下,动画效果更加出色了,可以说很逼近echart了.刚刚写完的饼图,非常好的实现了既定的功能,交互的动画效果也是很棒的. 效 ...

  9. eclipse搭建maven ssm项目

    file --> new --> maven project -->创建个简单的maven项目 会报错,没事 右键 properties 先去掉,然后再勾上 接下来配置maven的相 ...

  10. bootstrap --> reset css

    /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, ...