js中时钟表盘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.clock{
width: 600px;
height: 600px;
margin: 50px auto;
background: url(./images/clock.jpg) no-repeat;
position: relative;
}
.clock div{
width: %;
height: %;
position: absolute;
top: ;
left: ;
}
.h{
background: url(./images/hour.png) no-repeat center center;
}
.m{
background: url(./images/minute.png) no-repeat center center; }
.s{
background: url(./images/second.png) no-repeat center center; }
</style>
</head>
<body>
<div class="clock">
<div class="h" id="hour"></div>
<div class="m" id="minute"></div>
<div class="s" id="second"></div>
</div>
</body>
<script>
function $(id)
{
return document.getElementById(id);
}
var hour = $('hour');
var minute = $('minute');
var second = $('second');
// var date = new Date();
// console.log(date);
// console.log(hour);
//开始定时
var s =,m=,h=,ms=;
setInterval(function(){
//内容处理开始
var date = new Date();//获取时间
ms = date.getMilliseconds(); //现在的毫秒数
s = date.getSeconds() + ms/;
m = date.getMinutes() + s / ;
h = date.getHours() % + m /;
// document.write(parseInt(h) +":"+parseInt(m ) +":"+parseInt(s) ); //旋转角度
//一圈 360度 一共60秒 一秒是 6度
second.style.WebkitTransform = "rotate("+s* + "deg)";
minute.style.WebkitTransform = "rotate(" + m* + "deg)";
hour.style.WebkitTransform = "rotate(" + h* + "deg)"; },);
</script>
</html>
2.在线预览
js中时钟表盘的更多相关文章
- js实现小时钟,js中Date对象的使用?
介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...
- js 动态时钟
js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- js实现时钟
<!DOCTYPE html> <html> <head> <title>Js版带表盘的时钟</title> <meta charse ...
- JavaScript基础(3)-JS中的面向对象、定时器、BOM、位置信息
一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...
- 积累js中的一些问题及解决方案
一.取字符串的第i位不兼容的问题 1.问题:对于字符串str来说,要获取第i位,常见的是str[i],但是在低版本的浏览器中不兼容,例如ie7. 2.解决:使用str.charAt(i); 二.使用定 ...
- 解读前端js中签名算法伪造H5游戏加分
信息安全在我们日常开发中息息相关,稍有忽视则容易产生安全事故.对安全测试也提出更高要求.以下是笔者亲自实践过程: 一. 打开某个数钱游戏HTML5页面,在浏览器 F12 开发工具中,查看的js,如下, ...
- 5.0 JS中引用类型介绍
其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...
- 【repost】JS中的异常处理方法分享
我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...
- JS中给正则表达式加变量
前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下. 一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
随机推荐
- 使用go语言实现简单的反向代理工具激活IntelliJ和PyCharm,持续更新
最近Jetbrians系列IDE更新至2017.3版本,激活检测机制也变成了动态封禁域名,导致大部分域名激活被屏蔽了,所以找了下资料,根据ilanyu的代码,改了下地址,实现了本地反向代理激活服务器. ...
- Python学习系列之反射
反射的定义 根据字符串的形式去某个对象中操作成员 根据字符串的形式去某个对象中寻找成员 根据字符串的形式去某个对象中设置成员 根据字符串的形式去某个对象中删除成员 根据字符串的形式去某个对象中判断成员 ...
- kafka-manager 的编译和使用(附安装包)
kafka-manager 的编译和使用(附安装包) 学习了:https://my.oschina.net/wangjiankui/blog/653139
- MyEclipse 8.5安装Aptana
Aptana简单介绍 Aptana是一个很强大,开源,专注于JavaScript的Ajax开发IDE它的特性包含: 1.JavaScript,JavaScript函数,HTML,CSS语言的Co ...
- Unity3D研究之多语言用中文做KEY
做多语言的时候用中文做KEY绝对是有100%的优点,假设用英文表示那么代码里面给文字赋值的地方全都是英文.写的代码多了以后维护起来就没有人能看懂了,或者看起来非常费劲. 对PoolManager ...
- Hdu2111
<span style="color:#6600cc;">/* J - Saving HDU Time Limit:1000MS Memory Limit:32768K ...
- [Python网络编程]浅析守护进程后台任务的设计与实现
在做基于B/S应用中.常常有须要后台执行任务的需求,最简单比方发送邮件.在一些如防火墙,WAF等项目中,前台仅仅是为了展示内容与各种參数配置.后台守护进程才是重头戏.所以在防火墙配置页面中可能会常常看 ...
- Python 批量修改root密码
#_*_coding:utf8_*_ from multiprocessing import Process, Pool import paramiko import sys,os host_list ...
- 我是怎样自学 Android 的?
1. Java知识储备 本知识点不做重点解说: 对于有基础的同学推荐看<Java编程思想>,巩固基础,查漏补全,了解并熟悉很多其它细节知识点. 对于没有基础的同学推荐看一本Java基础的书 ...
- Android Studio 使用 SVN 必然遇到问题:commit ** File out of data 问题解决方法
转载请注明:http://blog.csdn.net/lrs123123/article/details/44829579 Android Studio 的使用已经越来越成为趋势.而结合版本号控制工具 ...