1.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中时钟表盘的更多相关文章

  1. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  2. js 动态时钟

    js 动态时钟 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. js实现时钟

    <!DOCTYPE html> <html> <head> <title>Js版带表盘的时钟</title> <meta charse ...

  4. JavaScript基础(3)-JS中的面向对象、定时器、BOM、位置信息

    一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...

  5. 积累js中的一些问题及解决方案

    一.取字符串的第i位不兼容的问题 1.问题:对于字符串str来说,要获取第i位,常见的是str[i],但是在低版本的浏览器中不兼容,例如ie7. 2.解决:使用str.charAt(i); 二.使用定 ...

  6. 解读前端js中签名算法伪造H5游戏加分

    信息安全在我们日常开发中息息相关,稍有忽视则容易产生安全事故.对安全测试也提出更高要求.以下是笔者亲自实践过程: 一. 打开某个数钱游戏HTML5页面,在浏览器 F12 开发工具中,查看的js,如下, ...

  7. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  8. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  9. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

随机推荐

  1. C#.NET 无法直接启动带有类库输出类型的项目怎么办

    我把Driver.cs文件去掉了一行注释,发现报错   右击这个解决方案,选择属性,然后再启动项目中改成MySample    

  2. yarn-cli 显示文件目录

    显示yarn bin文件夹的位置. yarn bin yarn bin将打印yarn将为您的软件包安装可执行文件的文件夹.一个可执行文件的例子可能是你已经为你的包定义的脚本,可以通过执行yarn ru ...

  3. Guake Terminal ── linux下完美帅气的终端

    虽说如今非常多Linux发行版.比方Ubuntu,已经基本上能够採用GUI来完毕绝大部分一般性的任务. 可是,终端程序对于linux用户来说仍是不可缺少的. Gnome自带的gnome-termina ...

  4. ImportError: No module named &#39;ConfigParser&#39;

    Resolve Method: I found the problem. I had manually installed a newer version of python (version 3.2 ...

  5. 黑马day13 分页思路&amp;实现

    分页的总体思想: 分页包含什么: 1.当前页,每页显示的记录数,总的记录数,总的页码,集合List存放的是JavaBean,首页, 尾页,上一页,下一页 传递的參数:当前页,每页显示的记录数.这两个本 ...

  6. IIS6下PHP配置(转载)

    Windows 2003+IIS6+PHP5.4.10配置PHP支持空间的方法 (2013-01-10 16:48:56)标签: php it php环境 php配置 分类: PHP环境配置简介:一般 ...

  7. 公钥加密,摘要算法MD5,SSH相关概念

    1.公钥加密,又叫非对称加密,一般指的是用一组密钥来保证通信的安全.(公钥,私钥)成对存在且惟一,典型的公钥算法有 RSA(计算出的是1024位,128字节),顺便提一下与公钥加密算法相对应的就是传统 ...

  8. Linux 常用命令大全2

    Linux 常用命令大全 [帮助命令] command —help man command man 2 command 查看第2个帮助文件 man -k keyword 查找含有关键字的帮助 info ...

  9. G. 铁路修复计划 最小生成树

    G. 铁路修复计划 二分答案,改变边的权值,找最小生成树即可. 类似的思想还可以用在单度限制最小生成树和最优比例生成树上. #include<iostream> #include<c ...

  10. Java多线程系列二——Thread类的方法

    Thread实现Runnable接口并实现了大量实用的方法 public static native void yield(); 此方法释放CPU,但并不释放已获得的锁,其它就绪的线程将可能得到执行机 ...