文档章节

js作业2:20170330 钟表框架

工业革命
 工业革命
发布于 2017/03/31 04:57
字数 637
阅读 17
收藏 0

熬夜不只一杯水, 听着一夜的歌。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js作业2:20170330 钟表框架</title>
<style>
	#c_frame{
		width: 200px;
		height: 200px;
		border: dashed 1px #f00;
		border-radius: 50%;
		margin: 50px auto;
		
		position: relative; //内部的元素都相对此进行绝地定位;
	}
	#hour,#minute,#second{
		width: 200px;
		height: 200px;
		position: absolute; /*不加这句,这几个DIV要飞到天边去了== */
	}/*这几个div和他们的内部div都是相对于c_frame进行绝对定位的.*/
	
	
/*	#hour{
		border: solid 1px gray;
	}*/
	#hour div{
		height: 100px;
		width: 2px;
		border: solid 1px black;
		background-color: #000;
		
		position: absolute; /*相对于#c_frame进行绝对定位*/
		left: 50%;
		top: 10px;
	}
	
/*	#minute{
		border: solid 1px gray;	
	}*/
	#minute div{
		height: 100px;
		width: 1px;
		border: solid 1px black;
		
		position: absolute; /*相对于#c_frame进行绝对定位*/
		left: 50%;
		top: 10px;
		
	}
	
/*	#second{
		border: solid 1px gray;
	}*/
	#second div{ /*00.从最简单的秒针开始理解*/
		height: 100px;
		width: 1px;
		border: dashed 1px gray;
		
		position: absolute; /*相对于#c_frame进行绝对定位*/
		left: 50%;
		top: 10px;
	}
	
	
	
	/*之前,我是让 border-right:0,1,2;来显示针的,但没有设置旋转基点,所以才导致没法出目的结果的.*/
</style>
</head>
	
<body>
<div id="c_frame">
	
	<div id="hour">
		<div></div>
	</div>
		
	<div id="minute">
		<div></div>
	</div>
	
	<div id="second">
		<div></div>
	</div>
</div>

<center>
<div id="show">现在时间是:</div>
</center>

<script>

	var h,m,s;//时分秒;
	var d;//日期;
	var t=document.getElementById("show");//这里显示电子时间;
	
	setInterval(function(){ //利用时间值获取度数进行旋转.简单说,就是旋转度数随时间变化而变化.
		var d=new Date();
		
		h=d.getHours();
		m=d.getMinutes();
		s=d.getSeconds();
		
		document.getElementById("hour").style.transform="rotate("+h*30+"deg)";	//360°相比12时 相差 30倍;另外,钟表只有12个小时。
		document.getElementById("minute").style.transform="rotate("+m*6+"deg)";
		document.getElementById("second").style.transform="rotate("+s*6+"deg)"; //360°相比60秒 相差6倍;
		
		
		//增加个电子时间显示:-->案例二开始:
		
		t.innerHTML=("现在时间是: "+e_time(h)+":"+e_time(m)+":"+e_time(s)+" "+isPAm());
		
		
	},900);
	
	function e_time(val){
		
		if(val<10){
			 return ("0"+val);
		}
		return val;
	}
	
	function isPAm(){
		if(h<=12){
			return "am";
		}
		return "pm";
	}
	//案例二结束.
	
/*本质性质:(以秒针为例)
 * 
	 div-secods是一个和 div-c_frame一样宽高的div(可以设置比div-c_frame一些),
	 
	 然后在div-seconds 内配置一个div,这个是seconds内部的div,用于显示秒针,
	 
	 旋转的是div-seconds,而显示的是只有div-seconds一半大小的div-seconds内部的div(它会显示一个秒针);
	 所以,实际转动的div-s,旋转默认是以div中心为基点的。
	 
	 基于同理,时、分针也是如此;(Ps: 旋转基点是可以修改的,但在这里没必要).
 *//*之前错误的原因是:让 border-right或left充当显示针和旋转针,但没有设置旋转基点。*/
</script>
</body>
</html>

效果见图:

© 著作权归作者所有

工业革命
粉丝 1
博文 21
码字总数 8826
作品 0
太原
高级程序员
私信 提问
如何将 MongoDB MapReduce 速度提升 20 倍

分析在MongoDB中正成为越来越重要的话题,因为它在越来越多的大型项目中使用。人们厌倦了使用不同的软件来做分析(包括Hadoop),它们显然需要传输大量开销的数据。 MongoDB提供了两种内置分...

oschina
2013/10/30
5.9K
8
第二十二天到第二十四天:JavaScript 里面的居民们-IFE

第二十二天到第二十四天:JavaScript 里面的居民们 日期 总用时 学习目标 2018.08.18-2018.08.21 12h JavaScript 元素相关 学习目标 MDN 数字 MDN 字符串 MDN 对象 MDN 数组 学习内容 Math 函...

mumubin
09/29
0
0
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
7.6K
1
[翻译]理解异步JavaScript

写在文章前 这篇文章是翻译自Sukhjinder Arora的 Understanding Asynchronous JavaScript。这篇文章描述了异步和同步JavaScript是如何在运行环境中,使用调用栈,消息队列,作业队列,以及事...

YukiSong
2018/12/10
0
0
JavaScript的宏任务与微任务

在介绍前端宏任务与微任务之前,先列出来一道题,一块看一下。 诸位可以先给出来一个自己的答案,运行一下结果,看看是否与自己想的一致。 1.基本概念 这里介绍一下JavaScript里面的一些基本...

公子穷奇
04/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
5
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部