<!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实现翻译功能

    初入Python,一开始就被她简介的语法所吸引,代码简洁优雅,之前在C#里面打开文件写入文件等操作相比Python复杂多了,而Python打开.修改和保存文件显得简单得多. 1.打开文件的例子: fi ...

  2. ace_tree总结。各类问题解决办法汇集

    首先讲一下怎么使用,然后讲一下出现的问题的解决办法 1.引用js和css文件 ace-extra.min.js.ace.min.css.fuelux.tree.min.js.ace-elements. ...

  3. HDnoip2017题解

    那么,作为一名初入信息竞赛的选手,我也试着开始用博客记录自己的学习历程,那么这篇文章先简单介绍一下我自己吧. 本人开始学习信息学大概以来,主要都是用的C++,所以对其他语言并不是十分熟悉.2016我还 ...

  4. mongoose返回值无法修改

    mongoose 查询方法 find 例:db.collections.find(query,function(err,doc) { 如果var res = doc[0]  是{name:'feife ...

  5. 【转】使用PowerDesigner的建模创建升级管理数据库

    使用PowerDesigner的建模创建升级管理数据库 PowerDesigner是一种著名的CASE建摸工具,最开始为数据库建模设计,即物理模型(Physical Data Model)用于生成数据 ...

  6. Android ANR异常解决方案

    1,ANR异常的解释: ANR(android not response)即应用程序无响应,在用户操作在5秒内没有响应的话就会出现ANR异常: 2,那为什么会出现ANR异常呢? Android系统中处 ...

  7. Spring AMQP + Rabbit 配置多数据源消息队列

    一般在稍微大一点的项目中,需要配置多个数据库数据源,最简单的方式是用 Spring 来实现,只需要继承 AbstractRoutingDataSource 类,实现 determineCurrentL ...

  8. 【Java入门提高篇】Day3 抽象类与接口的比较

    抽象类跟接口都讲完了,现在来做一个比较. 其实说实话,没有多大的可比较性,它们是完全不同的两个东西,它们的抽象不在同一个层级上.但是为了让大家更好的理解,还是做一个比较吧,毕竟它们都很抽象(233). ...

  9. 一个Win32API Trace Tool的设计与实现

    用VC编程也有不短的时间了,对kernel32.advapi32.user32.gdi32等动态库里的API多数都已经很熟悉了.API是操作系统提供给应用程序的一组服务,很久以前就想要做个小工具,用来 ...

  10. 微信小程序与Java后台通信

    一.写在前面 最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的, ...