之前就看到园子里很多牛人写js应用都非常炫，看的我是心痒痒，但技术有限，只能做些及丑陋又不实用的东西来玩玩，班门弄斧呢

View Code

<html>
<head>
<title>js时钟</title>
<script type="text/javascript">
function clock(obj){
    var $ = function(id){
        return document.getElementById(id);
    }
    
    var box = $(obj), bh,bw,hour=new Array(),minute=new Array(),second=new Array(),raduis,re;
    box.style.position = 'relative';
    bh = box.clientHeight;
    bw = box.clientWidth;
    function createInterface(){
        var point1 = document.createElement('span');
        point1.style.height = '3px';
        point1.style.width='3px';
        point1.style.backgroundColor='#000';
        point1.style.lineHeight = '1px';
        point1.style.fontSize = '1px'
        point1.style.position = 'absolute';
        var point2 = document.createElement('span');
        point2.style.height = '5px';
        point2.style.width='5px';
        point2.style.lineHeight = '1px';
        point2.style.fontSize = '1px'
        point2.style.backgroundColor='#000';
        point2.style.position = 'absolute';
        var centerY = bh/2;
        var centerX = bw/2;
        raduis = (centerY >= centerX ? centerY : centerX) - 10;
        for(var angle=0; angle < 360 ; angle+=30){
            var qy = Math.round(Math.sin(angle * Math.PI / 180) * raduis);
            var qx = Math.round(Math.cos(angle * Math.PI / 180) * raduis);
            var el = point1.cloneNode(true);
            el.style.top = centerY + qy + 'px';
            el.style.left = centerX + qx + 'px';
            box.appendChild(el);
        }
        for(var angle=0; angle < 360 ; angle+=90){
            var qy = Math.round(Math.sin(angle * Math.PI / 180) * raduis);
            var qx = Math.round(Math.cos(angle * Math.PI / 180) * raduis);
            var el = point2.cloneNode(true);
            el.style.top = centerY + qy + 'px';
            el.style.left = centerX + qx + 'px';
            box.appendChild(el);
        }
        var hourone = document.createElement('span');
        hourone.style.width = '8px';
        hourone.style.height = '8px';
        hourone.style.backgroundColor = '#000';
        hourone.style.position = 'absolute';
        hourone.style.lineHeight = '1px';
        hourone.style.fontSize = '1px'
        for(var i=0; i < 30; i++){
            var hone = hourone.cloneNode(true);
            box.appendChild(hone);
            hour.push(hone);
        }
        minuteone = document.createElement('span');
        minuteone.style.width = '6px';
        minuteone.style.height = '6px';
        minuteone.style.backgroundColor = '#888';
        minuteone.style.position = 'absolute';
        minuteone.style.lineHeight = '1px';
        minuteone.style.fontSize = '1px'
        for(var i=0; i < 30; i++){
            var mone = minuteone.cloneNode(true);
            box.appendChild(mone);
            minute.push(mone);
        }
        
        secondone = document.createElement('span');
        secondone.style.width = '4px';
        secondone.style.height = '4px';
        secondone.style.backgroundColor = '#f00';
        secondone.style.position = 'absolute';
        secondone.style.lineHeight = '1px';
        secondone.style.fontSize = '1px'
        for(var i=0; i < 40; i++){
            var sone = secondone.cloneNode(true);
            box.appendChild(sone);
            second.push(sone);
        }
    }
    function calhour(h,m){
        return ((h * 60 + m) / (12 * 60)) * 360 - 90;
    }
    
    function calaa(m){
        return (m / 60) * 360 - 90;
    }
    
    function setTime(h,m,s){
        var hourA = calhour(h,m);
        var minuteA = calaa(m);
        var secondA = calaa(s);
        for(var i=0,len=hour.length; i < len ; i++){
            var araduis = (i/len) * (raduis * 0.5);
            var hy = Math.round(Math.sin(hourA * Math.PI / 180) * araduis);
            var hx = Math.round(Math.cos(hourA * Math.PI / 180) * araduis);
            hour[i].style.top = (bh/2) + hy + "px";
            hour[i].style.left = (bw/2) + hx + "px";
        }
        
        for(var i=0,len=minute.length; i < len ; i++){
            var araduis = (i/len) * (raduis * 0.6);
            var hy = Math.round(Math.sin(minuteA * Math.PI / 180) * araduis);
            var hx = Math.round(Math.cos(minuteA * Math.PI / 180) * araduis);
            minute[i].style.top = (bh/2) + hy + "px";
            minute[i].style.left = (bw/2) + hx + "px";
        }
        
        for(var i=0,len=second.length; i < len ; i++){
            var araduis = (i/len) * (raduis * 0.8);
            var hy = Math.round(Math.sin(secondA * Math.PI / 180) * araduis);
            var hx = Math.round(Math.cos(secondA * Math.PI / 180) * araduis);
            second[i].style.top = (bh/2) + hy + "px";
            second[i].style.left = (bw/2) + hx + "px";
        }
    }
    function update(){
        var d = new Date();
        var h = Math.abs(d.getHours() - 12);
        var m = d.getUTCMinutes();
        var s = d.getSeconds();
        setTime(h,m,s);
    }
    function run(){
        re = setInterval(update,1000);
    }
    function stop(){
        clearInterval(re);
    }
    createInterface();
    update();
    return {'run':run,'stop':stop};
}
window.onload = function(){
    clock('clock').run();
}
</script>
<style type="text/css">
#clock{ height:300px; width:300px; border:1px solid #ccc;}
</style>
</head>
<body>
<div id="clock">
</div>
</body>
</html>

转载于:https://www.cnblogs.com/xingzhi/archive/2011/04/16/2017645.html

javascript实现的时钟相关推荐

  1. JavaScript制作的时钟

    JavaScript制作的时钟 分享一个自己制作的时钟.算是低级版的吧,秒钟分钟时钟都是可以获取到时间,根据时间来动的.是动态的. 效果图如下: 制作之前肯定要先把钟的各个部件画出来,然后加上样式,最 ...

  2. 数字时钟html脚本,javascript实现数字时钟效果

    本文实例为大家分享了javascript实现数字时钟效果的具体代码,供大家参考,具体内容如下 效果图 需求分析 1.通过date获取时间 2.通过间隔定时器setInterval动态获取时间 3.间隔 ...

  3. web——javascript实现动态时钟

    web--javascript实现动态时钟 javascript实现动态时钟,与当前时间同步. <!DOCTYPE html> <html lang="en"&g ...

  4. JavaScript实现动态时钟显示

    目录 动态时钟显示效果 代码实现 1.创建html文件(时钟显示.html) 2.设置html标签 3.设置html标签的CSS样式 4.设置JavaScript 1)创建函数和Date 2)获取da ...

  5. JavaScript制作网页时钟

    javascript  运用时间戳实现时间获取并换算成时分秒,并结合css相关属性实现时钟转动 效果图-实现网页版时钟 <!DOCTYPE html> <html lang=&quo ...

  6. 使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程)

    在线演示地址:https://haiyong.site/demo/clock1.html 文章目录 步骤1:创建制作此时钟的基本结构 步骤2:使用 CSS 代码设计背景 步骤3:使用 CSS 代码设计 ...

  7. JavaScript之数码时钟

    下面,我就教大家如何利用JavaScript做一个简单的数码时钟. 在做之前我们需要在网上找到从0-9的10张数字图片,保存到一个文件夹里面,并将数字图片对应为相应的数字,作为我们的素材工具. 具体步 ...

  8. 基于JavaScript的数码时钟

    用JavaScript+html+css做的一个简易的数码时钟,具有一定的观赏性,Demo效果: 具体步骤如下: 数码时钟的做法思路就是:给出六张图片,分别对应"时分秒"六个数字, ...

  9. JavaScript实现美女时钟

    该文章将通过JavaScript脚本语言来实现一个时钟的功能. 代码 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  10. JavaScript水滴动态时钟和倒计时时钟

    4.3 date对象的常用属性和方法 Dpale 对象包含日期和时间的相关信息.Dule对象没有任何属性,它只具有很多用于现 创建日期对象的语法如下: var now = new Date();//获 ...

最新文章

  1. php mysqli扩展之预处理
  2. vi使用技巧（转载）
  3. python接口自动化测试面试题_Python 接口自动化测试实战
  4. Matplotlib（一）工作流程
  5. Java学习笔记_方法
  6. node.js学习笔记5——核心模块1
  7. Android设备的ID
  8. 【WC2013】糖果公园
  9. viewstate和session(转自博客园)
  10. 图片扫描纠偏java_Delphi 下 用 ImageEN 进行图像纠偏
  11. ROS位置导航基础之坐标变换
  12. #includefile.h与#includefile.h的区别
  13. 《英语语法新思维初级教程》学习笔记（四）数量限定词和个体限定词
  14. Android应用程序中的DVM和Linux中进程的区别
  15. MarkdownPad2 使用教程
  16. Python负数除法取余操作
  17. ESlint 自动格式化代码 补缺代码 添加空格
  18. P2p网站建设解决方案
  19. 大数据时代的10个重大变化
  20. etcd学习和实战：3、go使用etcd实现服务发现和管理

热门文章

  1. Fmask算法——影像云检测算法
  2. 【虚拟机】VMware启动时报错：该虚拟机似乎正在使用中....请按“获取所有权(T)”按钮获取它的所有权
  3. linux远程连接windows桌面背景,Centos远程Windows桌面_远程桌面
  4. Android仿格瓦拉循环滚动View
  5. 吊炸天！15岁成杀人犯，监狱里学编程，37岁获释后年薪70万
  6. 在钢筋混泥土的城市，打铁还需身体硬
  7. 调用dll 返回65535_一种通用DLL劫持技术研究
  8. split函数python_python有split函数吗
  9. json获取key对应的值java_java 获取json字符串中key对应的值
  10. 服务器延迟和时间偏移怎么设置,针对大量时间偏移配置 W32Time - Windows Server | Microsoft Docs...