1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>炫酷时钟</title>
  6. 	<style type="text/css">
  7. 		body{
  8. 			height: 100%;color: #51555c;
  9. 			background: url("./img/bg1.png") no-repeat;
  10.                        			/* 背景图垂直、水平均居中 */
  11. 			background-position: center center;
  12.  
  13. 			/* 背景图不平铺 */
  14. 			background-repeat: no-repeat;
  15.  
  16. 			/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  17. 			background-attachment: fixed;
  18.  
  19. 			/* 让背景图基于容器大小伸缩 */
  20. 			background-size: cover;
  21.  
  22. 			/* 设置背景颜色，背景图加载过程中会显示背景色 */
  23. 			background-color: #464646;
  24. 		}
  25. 		img{
  26. 			display: inline-block;
  27. 			width: 28px;
  28. 			height: 50px;
  29. 			margin:0 4px;
  30. 		}
  31. 		.main_demo{
  32. 			width: 910px;
  33. 			min-height: 600px;
  34. 			margin:30px auto 0 auto;
  35. 		}
  36. 		.main_demo h2{
  37. 			text-align: center;
  38. 			padding: 10px;
  39. 			font-size: 40px;
  40. 			color: wheat;
  41. 		}
  42. 		.clock{
  43. 			width: 500px;
  44. 			padding: 40px;
  45. 			margin:2px auto;
  46. 		}
  47.  
  48. 		.clock_right{
  49. 			text-align: right;
  50. 			margin:4px;
  51. 		}
  52. 	</style>
  53. </head>
  54. <body>
  55. 	<div class="main_demo">
  56. 		<div align="center">
  57. 			<h2>Js 炫酷时钟</h2>
  58. 		</div>
  59. 		<div class="clock">
  60. 			<!--10点-->
  61. 			<img src="" />
  62. 			<img src="" />
  63. 			：
  64. 			<!--40分-->
  65. 			<img src="" />
  66. 			<img src="" />
  67. 			：
  68. 			<!--*秒-->
  69. 			<img src="" />
  70. 			<img src="" />
  71. 			<br />
  72. 			<div class="clock_right">
  73. 				<!--2017年-->
  74. 				<img src="" />
  75. 				<img src="" />
  76. 				<img src="" />
  77. 				<img src="" />
  78. 				：
  79. 				<!--09月-->
  80. 				<img src="" />
  81. 				<img src="" />
  82. 				：
  83. 				<!--27日-->
  84. 				<img src="" />
  85. 				<img src="" />
  86. 			</div>
  87. 		</div>
  88. 	</div>
  89.  
  90. </body>
  91. <script type="text/javascript">
  92. 	var imgs = document.getElementsByTagName('img');
  93. 	setInterval(getTime,1000);
  94.  
  95. 	function getTime(){
  96. 		var _date = new Date();
  97. 		var year = _date.getFullYear();
  98. 		var month = _date.getMonth()+1;
  99. 		var day = _date.getDate();
  100. 		var hour = _date.getHours();
  101. 		var minutes = _date.getMinutes();
  102. 		var second = _date.getSeconds();
  103. 		var newDate = addZero(hour) + "" + addZero(minutes)+ "" + addZero(second)+""+addZero(year) + "" + addZero(month)+ "" + addZero(day)
  104. 			;
  105. 		console.log(newDate.length);
  106. 		for(var i = 0;i < newDate.length;i++){
  107. 			imgs[i].src = 'img/time_' + newDate[i] + '.png';
  108. 		}
  109. 	}
  110.  
  111. 	getTime();
  112.  
  113. 	function addZero(num){
  114. 		if(num < 10){
  115. 			num = "0" + num;
  116. 		}
  117. 		return num
  118. 	}
  119. </script>
  120. </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. 多少牛逼的程序员毁在low逼的英文发音上(JAVA)

    最最常用的关键词及音标 数据类型:boolean.byte.short.int.long.double.char.float.double. 包引入和包声明:import.package. 用于类和接 ...

  2. 如何添加title左侧的图标

    在titile标签上方插入以下代码,图片要求格式必须是.ico. <link rel="shortcut icon" href="images/favicon.ic ...

  3. struts2的简单执行过程

    struts2是最近刚学的一个框架,想通过写篇文章来加深下印象,这也是本篇博文产生的由来,下面进入正题 Struts2本身是一个挺简单的框架,我们通过写一个登陆的过程来具体描述下其执行过程 1.首先我 ...

  4. 关于web变量配置问题

    关于web变量配置问题 webservice里面接口完成时考虑到接口可能用在不同的服务器,不同的数据库所以将链接地址修改成变量,在webconfig里面去修改它更加的容易方便 假始根据在同一个服务器里 ...

  5. Maven依赖分析

    背景 昨天帮一位同事排查了一个依赖冲突的问题.问题的现象就是在IntelliJ IDEA运行项目正常,但是打包(Maven assembly jar)之后传到服务器运行失败,报错:Caused by: ...

  6. socket.io 入门篇（三）

    本文原文地址:https://www.limitcode.com/detail/5926e3a056fba70278bf2044.html 前言 上篇我们介绍了 socket.io 中room的概念和 ...

  7. 圆形的ImageView

    转载自gitHub的ImageView,因为本身就是可用的,也没什么好说的,拷贝回去用就是了,可以设置除了背景,还可以设置边框什么的,比起CardView设置圆角,功能更加强大. import and ...

  8. 教我徒弟Android开发入门（一）

    前言: 这个系列的教程是为我徒弟准备的,也适合还不懂java但是想学android开发的小白们~ 本系列是在Android Studio的环境下运行,默认大家的开发环境都是配置好了的 没有配置好的同学 ...

  9. 这些 Drawable 的小技巧，你都了解吗？

    一.前言 在 Android 的开发过程中,Drawable 经常会被用到,一般会用 Drawable 为 View 设置一个显示的效果.而在 Android 下,也提供了很多 Drawable 的默 ...

  10. 实践作业1：测试管理工具实践 Day3

    1.Vertrigoserv启动后,首先要配置apache,则需要修改监听端口,不要出现端口冲突2.配置mysql,在mysql console中输入密码vertrigo3.在浏览器中输入http:/ ...