javascript 通过面向对象编写圆形数字时钟
效果如图所示，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.hour{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
border: 3px solid #666666;display: inline-block}
.minute{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
border: 3px solid #666666;display: inline-block}
.second{height: 200px;width: 200px;position: relative;top:100px;left: 100px;border-radius: 50%;
border: 3px solid #666666;display: inline-block}
.innerLeft{height: 178px;width: 89px;position: absolute;top: 1px;left: 1px;border-radius: 178px 0 0 178px
;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-left: 10px solid #009bff;background: white
;transform-origin: 100% 50%;}
.innerRight{height: 178px;width: 89px;position: absolute;top: 1px;right: 1px;border-radius:0 178px 178px 0
;border-bottom: 10px solid #009bff;border-top: 10px solid #009bff;border-right: 10px solid #009bff;background: white;transform-origin: 0 50%;
transform: rotate(-180deg) ;}
.cover{position: absolute;height: 200px;width: 100px;border-radius: 198px 0 0 198px;background: white;z-index: 1}
input{position: absolute;top: 60px;left: 120px;}
span{height: 20px;width: 80px;line-height: 20px;display: block;position: absolute;;top: 90px;
z-index: 2; left: 60px;font-size: 16px;font-weight: bold;text-align: center}
</style>
</head>
<body>
<div class="hour">
<div class="innerLeft"></div>
<div class="cover"></div>
<div class="innerRight"></div>
<span></span>
</div>
<div class="minute">
<div class="innerLeft"></div>
<div class="cover"></div>
<div class="innerRight"></div>
<span></span>
</div>
<div class="second">
<div class="innerLeft"></div>
<div class="cover"></div>
<div class="innerRight"></div>
<span></span>
</div> <script>
window.onload=function(){
function roll(progress,n) {
innerLeft = document.querySelector('.'+this.className + ' .innerLeft');
innerRight = document.querySelector('.'+this.className + ' .innerRight');
span = document.querySelector('.'+this.className + ' span');
cover = document.querySelector('.'+this.className + ' .cover');
span.innerHTML = progress+''+this.className; if (progress*n < 180) {
console.log(this.className);
cover.style.display = 'block'; innerLeft.style.transform = 'rotate(' + (progress*n) + "deg)";
innerRight.style.transform = 'rotate(' + (progress*n - 180) + 'deg)';
}
else{
console.log(this.className);
cover.style.display = 'none'; innerLeft.style.transform = 'rotate(' + (progress*n) + "deg)";
innerRight.style.transform = 'rotate(0deg)';
}
}
var T=setInterval(function(){
var time=new Date();
var hours=time.getHours();
var minutes=time.getMinutes();
var seconds=time.getSeconds();
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second'); roll.call(hour,hours,30);
roll.call(minute,minutes,6);
roll.call(second,seconds,6);
},1000); }
</script>
</body>
</html>
在编程过程中向使用tansform 来实现动态效果，但是会出现归零时逆向，最后就没有使用，接下来还是去探索一下吧。
javascript 通过面向对象编写圆形数字时钟的更多相关文章
- JavaScript 在页面上显示数字时钟
显示一个钟表 拓展JavaScript计时:http://www.w3school.com.cn/js/js_timing.asp setTimeout() 方法会返回某个值.在下面的语句中,值被储存 ...
- 中国MOOC_面向对象程序设计——Java语言_第2周 对象交互_秒计时的数字时钟
第2周编程题 查看帮助 返回 第2周编程题,在课程所给的时钟程序的基础上修改 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系 ...
- 面向对象程序设计--Java语言第二周编程题：有秒计时的数字时钟
有秒计时的数字时钟 题目内容: 这一周的编程题是需要你在课程所给的时钟程序的基础上修改而成.但是我们并不直接给你时钟程序的代码,请根据视频自己输入时钟程序的Display和Clock类的代码,然后来做 ...
- 中国MOOC_面向对象程序设计——Java语言_第2周 对象交互_1有秒计时的数字时钟
第2周编程题 查看帮助 返回 第2周编程题,在课程所给的时钟程序的基础上修改 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系 ...
- javascript进阶——面向对象特性
面向对象的javascript是这门语言被设计出来时就考虑的问题,熟悉OOP编程的概念后,学习不同的语言都会发现不同语言的实现是不同的,javascript的面向对象特性与其他具有面向对象特性的语言的 ...
- js动态数字时钟
js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...
- JavaScript的面向对象原理之原型链详解
一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...
- js实现动态数字时钟
1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- html5 canvas js(数字时钟)
<!doctype html> <html> <head> <title>canvas dClock</title> </head ...
随机推荐
- 机器学习框架Scikit Learn的学习
一 安装 安装pip 代码如下:# wget "https://pypi.python.org/packages/source/p/pip/pip-1.5.4.tar.gz#md5=83 ...
- leetcode@ [327] Count of Range Sum (Binary Search)
https://leetcode.com/problems/count-of-range-sum/ Given an integer array nums, return the number of ...
- 批量ping主机脚本
#! /bin/bash for i in `cat test.list`do host=`echo $i|awk -F"," '{print $1}'` app_IP=` ...
- jvm所占空间的配置
http://www.cnblogs.com/mingforyou/archive/2012/03/03/2378143.html
- Struts2运行流程分析
一.Struts2运行流程图: 二.运行流程分析: 1. 请求发送给StrutsPrepareAndExecuteFilter 2.StrutsPrepareAndExecuteFilter询问Act ...
- 轻松学习 red5 教程 像视频一样很详细还有代码直接可Copy
转载自:http://blog.csdn.net/hongdianking/archive/2009/11/12/4804339.aspx 最近要做一个流媒体服务器,在网上逗留了好久决定选择 red5 ...
- Gym 100507A About Grisha N. （水题）
About Grisha N. 题目链接: http://acm.hust.edu.cn/vjudge/contest/126546#problem/A Description Grisha N. t ...
- 关于Aazure 使用以前保留的vhd创建虚拟机的基本步骤
1. 删除vm保留vhd(只删除虚拟机记录,不删除磁盘)2. 拷贝vhd以及status文件到指定的存储账号3. 使用拷贝的VHD创建disk4. 从disk创建vm,指定指定vnet以及cloud ...
- PID入门的十五个基本概念
PID调节系统PID功能由PID调节器或DCS系统内部功能程序模块实现,了解与PID调节相关的一些基本概念,有助于PID入门新手快速熟悉调节器应用,在自动调节系统中成功整定PID参数.1.被调量被调量 ...
- labview 变体数据类型
变体数据类型是LabVIEW中多种数据类型的容器.将其它数据转换为变体时,变体将存储数据和数据的原始类型,保证日后可将变体数据反向转换. 例如,如将字符串数据转换为变体,变体将存储字符串的文本,以及说 ...