JS实现时钟

标签: javascript

先看一下最终的效果:http://www.gongx.top/xian/time.html

不会做动图,就放到我个人网站上去了,大家可以去看一下。

本来不想记录这个,但是老师的一个操作让我突然生出一个念头:

我靠,还能这么操作?

话不多说,开始分析一下。

 

结构如下:

	 <!--最外层的div -->
	<div id="wrap">
		
		 <!--放置刻度 -->
		<ul></ul>
		 
		 <!--时针、分针、秒针 -->
		<div id="hour"></div>
		<div id="min"></div>
		<div id="sec"></div>
		
		 <!--指针下面的大黑点 -->
		<div id="ico"></div>
	</div>

1、写出最外层wrap的样式来

#wrap{
			width: 400px;
			height: 400px;
			border: 10px solid #999;
			border-radius: 50%;
			margin: 100px auto;
			
			 /*因为里面的元素和定会用到定位,而且是根据这个div定位,所以价格定位属性 */
			position: relative;
		}

 

2、将一个大体的测试界面搭建起来看一下

知识点一::nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

知识点二:-webkit-transform-origin:设置旋转的基点

知识点三:-webkit-transform:rotate(度数);设置围绕基点旋转的度数

 

当然,我们不能用css一个刻度一个刻度的设置,现在写出来看一下,一会用Js代码生成。

ul{
			list-style:none;
			margin: 0;
			padding: 0;
			height: 400px;
		}
		#wrap ul li{
			width: 3px ;
			height: 6px;
			border-radius: 10px;
			background-color:#666 ;
			position: absolute;
			left: 199px;
			top: 0;
			
			/*设置刻度以表盘的中心为基点进行旋转*/
			-webkit-transform-origin:center 200px; /*左右 上下*/
		}
		 /*现针对每个刻度旋转看一下效果 */
		#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}
		#wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}
		#wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}
		#wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}
		#wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}
		#wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}
		#wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}
		#wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}
		#wrap ul li:nth-of-type(5n+1){height:12px;}

 

3、先把刻度注释掉,一会用Js生成,现在将指针的样式写出来,

#hour{
		width: 6px;
		height: 75px;
		background-color: #000;
		position: absolute;
		left: 197px;
		top: 125px;
	}
	#min{
		width: 4px;
		height: 105px;
		background-color: #999;
		position: absolute;
		left: 198px;
		top: 95px;
	}
	#sec{
		width: 2px;
		height: 125px;
		background-color: red;
		position: absolute;
		left: 197px;
		top: 75px;
	}
	#ico{
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background-color: #666;
		position: absolute;
		top: 193px;
		left: 193px;
	}

 

4、因为指针旋转是按照底部中心旋转,所以把三个指针的旋转基点移动到底部中间

#hour,#min,#sec{
		-webkit-transform-origin: bottom; 
	}

 

5、现在通过js代码,把刻度加进来---通过ul.innerHTML循环添.加<li></li>

            //[1]找到ul
			var oUl =  document.getElementsByTagName('ul')[0];
			
			//[2]定义一个变量保存循环生成的<li></li>
			var strLi = '';
			
			//[3]循环生成<li></li>并添加到strLi中
			for(var i=0;i<60;i++){
				strLi +='<li></li>';
			}
			
			//[4]将strLi添加到ul中
			oUl.innerHTML = strLi;

 

6、现在给刚刚添加的<li></li>添加样式-----------旋转

这里就是老师让我眼前一亮的地方,直接拿到<style></style>标签,然后往里边插入数据

我是不是太没见识了一点。。。。哈哈哈

这里有一点需要注意,oStyle.innerHTML += strCss;

是加等,不是单纯的赋值,如果像之前<ul></ul>中没数据可以直接赋值,这里就需要 += 了

//[*1]找到<style>标签
			var oStyle = document.getElementById('style');
			
			//[*2]定义一个变量保存样式字符串
			var strCss = '';
			
			//[*3]在刚刚生成<li></li>的循环中添加样式代码
			//[3]循环生成<li></li>并添加到strLi中
			for(var i=0;i<60;i++){
				strCss +="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+(i*6)+"deg);}";
				console.log(i*6);
				strLi +='<li></li>';
			}
			
			//[*4]将strCss添加到<style></style>标签中
			oStyle.innerHTML += strCss;

 

7、现在界面已经搭建完成了,下面就是需要让指针动起来了。

 

//(a)先找到这些指针
			var oHour = document.getElementById('hour');
			var oMin = document.getElementById('min');
			var oSec = document.getElementById('sec');
			
			//(b)写一个函数让指针动起来
			function toTime(){
				//(b-1)拿到时间对象
				var oDate = new Date();
				//(b-2)拿到此时的时间
				var iSec = oDate.getSeconds();
				var iMin = oDate.getMinutes()+iSec/60;
				var iHour = oDate.getHours()+iMin/60;
				
				//(b-3)根据此时的时间给指针赋值
				oSec.style.webkitTransform = 'rotate('+(iSec*6)+'deg)';
				oMin.style.webkitTransform = 'rotate('+(iMin*6)+'deg)';
				oHour.style.webkitTransform = 'rotate('+(iHour*30)+'deg)';
			}
			
			//(c)添加定时器,动起来
			setInterval(toTime,1000);

 

 

ok,已经跑起来了;

 

下面总结一下用到的知识点:

1)选择器    nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

2)渐变        -webkit-transform-origin:设置旋转的基点

                    -webkit-transform:rotate(度数);设置围绕基点旋转的度数

3)时间函数    var oDate = new Date();-----------------声明时间对象

                       oDate.getHours()------------------小时

                      oDate.getHours()-------------------分钟

                      oDate.getHours()--------------------秒数

 

 

 

 

 

 

版权声明:本文为qq_39125684原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39125684/article/details/82254136

智能推荐

PoolThreadCache

缓存构成   PoolThreadCache的缓存由三部分构成:tiny、small 和 normal。 tiny   缓存数据大小区间为[16B, 496B]数据,数组长度为32,根据数据大小计算索引的办法:数据大小除以16,如下代码所示: small   缓存数据大小区间为[512B, 4KB]数据,数组长度为4,根据数据大小计算索引的办法:数据大小除以512,然后log2得到指数,如下代码所...

Intellij IDEA 搭建Spring Boot项目(一)

Intellij IDEA 搭建Spring Boot项目 标签(空格分隔): SpringBoot JAVA后台 第一步 选择File –> New –> Project –>Spring Initialer –> 点击Next  第二步 自己修改 Group 和 Artif...

CentOS学习之路1-wget下载安装配置

参考1: https://blog.csdn.net/zhaoyanjun6/article/details/79108129 参考2: http://www.souvc.com/?p=1569 CentOS学习之路1-wget下载安装配置 1.wget的安装与基本使用 安装wget yum 安装软件 默认安装保存在/var/cache/yum ,用于所有用户使用。 帮助命令 基本用法 例子:下载...

深入浅出Spring的IOC容器,对Spring的IOC容器源码进行深入理解

文章目录 DispatcherServlet整体继承图 入口:DispatcherServlet.init() HttpServletBean.init() FrameworkServlet.initServletBean() 首先大家,去看Spring的源码入口,第一个就是DispatcherServlet DispatcherServlet整体继承图 入口:DispatcherServlet....

laravel框架的课堂知识点概总

1. MVC 1.1 概念理解 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑 MVC 是一种使用 MVC(Model View Controller ...

猜你喜欢

Unity人物角色动画系统学习总结

使用动画系统控制人物行走、转向、翻墙、滑行、拾取木头 混合树用来混合多个动画 MatchTarget用来匹配翻墙贴合墙上的某一点,人物以此为支点翻墙跳跃 IK动画类似于MatchTarget,控制两只手上的两个点来指定手的旋转和位置,使得拾取木头时更逼真 创建AnimatorController: 首先创建一个混合树,然后双击 可以看到该混合树有五种状态机,分别是Idle、WalkForward、...

Composer 安装 ThinkPHP6 问题

Composer 安装 ThinkPHP6 问题 先说说问题 一.运行环境要求 二.配置 参考: ThinkPHP6.0完全开发手册 先说说问题 执行ThinkPHP6的安装命令 遇到问题汇总如下: 看提示是要更新版本,执行命令更新。 更新之后,再次安装ThinkPHP,之后遇到如下问题。 尝试了很多方法,依然不能解决。其中包括使用https://packagist.phpcomposer.com...

Spring Boot 整合JDBC

今天主要讲解一下SpringBoot如何整合JDBC,没啥理论好说的,直接上代码,看项目整体结构 看一下对应的pom.xml 定义User.java 定义数据源配置,这里使用druid,所以需要写一个配置类 上面指定druid的属性配置,和用户登录的账号信息以及对应的过滤规则: 下面定义数据访问接口和对应的实现: 数据访问层很简单,直接注入JdbcTemplate模板即可,下面再看对应的servi...

html鼠标悬停显示样式

1.显示小手:     在style中添加cursor:pointer 实现鼠标悬停变成小手样式     实例:         其他参数: cursor语法: cursor : auto | crosshair | default | hand | move | help | wait | tex...

Yupoo(又拍网)的系统架构

Yupoo!(又拍网) 是目前国内最大的图片服务提供商,整个网站构建于大量的开源软件之上。以下为其使用到的开源软件信息: 操作系统:CentOS、MacOSX、Ubuntu 服务器:Apache、Nginx、Squid 数据库:MySQLmochiweb、MySQLdb 服务器监控:Cacti、Nagios、 开发语言:PHP、Python、Erlang、Java、Lua 分布式计算:Hadoop...