js指针时钟

最新推荐文章于 2021-03-11 16:07:58 发布
最新推荐文章于 2021-03-11 16:07:58 发布
阅读量356 收藏
点赞数
文章标签： python javascript ViewUI
原文链接：https://my.oschina.net/oisanblog/blog/865632
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

电子时钟会写了，看看写指针时钟。 

<html>
 <head> 
  <title>指针时钟</title> 
  <style type="text/css">
        #clock
        {     
            position: relative;
            margin-left: 400px;
        }
    </style> 
  <script type="text/javascript">        
    function drawClock() {
    document.getElementById("clock").innerHTML = "";
    //圆盘
    for (var i = 0; i < 360; i++) {
        var point = document.createElement("div");
        point.style.backgroundColor = "#FF8EFF";
        point.style.width = "2px";
        point.style.height = "2px";
        point.style.position = "absolute";
        if (i % 30 == 0) {
            point.style.backgroundColor = "black";
            point.style.width = "3px";
            point.style.height = "3px";
            point.style.left = (120 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (120 * Math.sin(i * Math.PI / 180) + 125) + "px";

        } else if (i % 6 == 0) {
            point.style.backgroundColor = "#CA8EFF";
            point.style.width = "1px";
            point.style.height = "1px";
            point.style.left = (120 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (120 * Math.sin(i * Math.PI / 180) + 125) + "px";
        } else {
            point.style.left = (125 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (125 * Math.sin(i * Math.PI / 180) + 125) + "px";
        }
        document.getElementById("clock").appendChild(point);
    }
    //小时数字
    for (var i = 0; i < 360; i++) {
        var point = document.createElement("div");
        point.style.position = "absolute";
        switch (i) {
        case 0:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "3";
            break;
        case 30:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "4";
            break;
        case 60:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "5";
            break;
        case 90:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 122) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "6";
            break;
        case 120:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 123) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "7";
            break;
        case 150:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 123) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "8";
            break;
        case 180:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 120) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 117) + "px";
            point.innerHTML = "9";
            break;
        case 210:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 120) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "10";
            break;
        case 240:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 121) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "11";
            break;
        case 270:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 117) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 117) + "px";
            point.innerHTML = "12";
            break;
        case 300:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 120) + "px";
            point.innerHTML = "1";
            break;
        case 330:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 120) + "px";
            point.innerHTML = "2";
            break;
        }
        document.getElementById("clock").appendChild(point);
    }

    var today = new Date();
    for (var j = 0; j <= 123; j++) {
        var point = document.createElement("div");
        point.style.backgroundColor = "red";
        point.style.width = "1px";
        point.style.height = "1px";
        point.style.position = "absolute";

        //秒            
        point.style.left = (Math.cos(today.getSeconds() * 6 * Math.PI / 180 - Math.PI / 2) * j

        + 125) + "px";
        point.style.top = (Math.sin(today.getSeconds() * 6 * Math.PI / 180 - Math.PI / 2) * j +

        125) + "px";
        document.getElementById("clock").appendChild(point);
    }

    //分
    for (var j = 0; j <= 100; j++) {
        var point = document.createElement("div");
        point.style.backgroundColor = "blue";
        point.style.width = "2px";
        point.style.height = "2px";
        point.style.position = "absolute";
        point.style.left = (Math.cos(today.getMinutes() * 6 * Math.PI / 180 - Math.PI / 2) * j

        + 125) + "px";
        point.style.top = (Math.sin(today.getMinutes() * 6 * Math.PI / 180 - Math.PI / 2) * j +

        125) + "px";
        document.getElementById("clock").appendChild(point);
    }
    //时
    for (var j = 0; j <= 70; j++) {
        var point = document.createElement("div");
        point.style.backgroundColor = "DodgerBlue";
        point.style.width = "3px";
        point.style.height = "3px";
        point.style.position = "absolute";
        point.style.left = (Math.cos(today.getHours() * 30 * Math.PI / 180 - Math.PI / 2) * j + 125) + "px";
        point.style.top = (Math.sin(today.getHours() * 30 * Math.PI / 180 - Math.PI / 2) * j + 125) + "px";
        document.getElementById("clock").appendChild(point);
    }

    setTimeout(drawClock, 1000);
}
  </script> 
 </head> 
 <body onload="drawClock()"> 
  <div> 
   <div id="clock"> 
   </div> 
  </div>  
 </body>
</html>

-9-13更新整点间时针移动

<html>
 <head>
     <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>指针时钟</title> 
  <style type="text/css">
        #clock
        {     
            position: relative;
            margin-left: 20%;
            margin-top: 10%;
        }
    </style> 
  <script type="text/javascript">        
        function drawClock() {
    document.getElementById("clock").innerHTML = "";
    //圆盘
    for (var i = 0; i < 360; i++) {
        var point = document.createElement("div");
        point.style.backgroundColor = "#FF8EFF";
        point.style.width = "2px";
        point.style.height = "2px";
        point.style.position = "absolute";
        if (i % 30 == 0) {
            point.style.backgroundColor = "black";
            point.style.width = "3px";
            point.style.height = "3px";
            point.style.left = (120 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (120 * Math.sin(i * Math.PI / 180) + 125) + "px";

        } else if (i % 6 == 0) {
            point.style.backgroundColor = "#CA8EFF";
            point.style.width = "1px";
            point.style.height = "1px";
            point.style.left = (120 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (120 * Math.sin(i * Math.PI / 180) + 125) + "px";
        } else {
            point.style.left = (125 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (125 * Math.sin(i * Math.PI / 180) + 125) + "px";
        }
        document.getElementById("clock").appendChild(point);
    }
    //小时数字
    for (var i = 0; i < 360; i++) {
        var point = document.createElement("div");
        point.style.position = "absolute";
        switch (i) {
        case 0:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "3";
            break;
        case 30:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "4";
            break;
        case 60:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "5";
            break;
        case 90:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 122) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "6";
            break;
        case 120:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 123) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "7";
            break;
        case 150:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 123) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "8";
            break;
        case 180:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 120) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 117) + "px";
            point.innerHTML = "9";
            break;
        case 210:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 120) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "10";
            break;
        case 240:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 121) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 115) + "px";
            point.innerHTML = "11";
            break;
        case 270:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 117) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 117) + "px";
            point.innerHTML = "12";
            break;
        case 300:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 120) + "px";
            point.innerHTML = "1";
            break;
        case 330:
            point.style.left = (110 * Math.cos(i * Math.PI / 180) + 125) + "px";
            point.style.top = (110 * Math.sin(i * Math.PI / 180) + 120) + "px";
            point.innerHTML = "2";
            break;
        }
        document.getElementById("clock").appendChild(point);
    }

    var today = new Date();
    
    //时针整点之间移动
    var offs;
    var minuts = today.getMinutes();
    if (minuts >= 6 && minuts < 12) {
        offs = 0.07;
    } else if (minuts >= 12 && minuts < 18) {
        offs = 0.1;
    } else if (minuts >= 18 && minuts < 24) {
        offs = 0.17;
    } else if (minuts >= 24 && minuts < 30) {
        offs = 0.22;
    } else if (minuts >= 30 && minuts < 36) {
        offs = 0.27;
    } else if (minuts >= 36 && minuts < 42) {
        offs = 0.3;
    } else if (minuts >= 42 && minuts < 48) {
        offs = 0.37;
    } else if (minuts >= 48 && minuts < 52) {
        offs = 0.4;
    } else if (minuts >= 52 && minuts <= 59) {
        offs = 0.46;
    } else {
        offs = 0;
    }
    //时
    for (var j = 0; j <= 90; j++) {
        var point = document.createElement("div");
        point.style.backgroundColor = "DodgerBlue";
        point.style.width = "3px";
        point.style.height = "3px";
        point.style.position = "absolute";
        point.style.left = (Math.cos(today.getHours() * 30 * Math.PI / 180 + offs - Math.PI / 2) * j + 125) + "px";
        point.style.top = (Math.sin(today.getHours() * 30 * Math.PI / 180 + offs - Math.PI / 2) * j + 125) + "px";
        document.getElementById("clock").appendChild(point);
    }

    //分
    for (var j = 0; j <= 115; j++) {
        var point = document.createElement("div");
        point.style.backgroundColor = "blue";
        point.style.width = "2px";
        point.style.height = "2px";
        point.style.position = "absolute";
        point.style.left = (Math.cos(today.getMinutes() * 6 * Math.PI / 180 - Math.PI / 2) * j

        + 125) + "px";
        point.style.top = (Math.sin(today.getMinutes() * 6 * Math.PI / 180 - Math.PI / 2) * j +

        125) + "px";
        document.getElementById("clock").appendChild(point);
    }
    //秒  
    for (var j = 0; j <= 123; j++) {
        var point = document.createElement("div");
        point.style.backgroundColor = "red";
        point.style.width = "1px";
        point.style.height = "1px";
        point.style.position = "absolute";      
        point.style.left = (Math.cos(today.getSeconds() * 6 * Math.PI / 180 - Math.PI / 2) * j
        + 125) + "px";
        point.style.top = (Math.sin(today.getSeconds() * 6 * Math.PI / 180 - Math.PI / 2) * j +
        125) + "px";
        document.getElementById("clock").appendChild(point);
    }


    setTimeout(drawClock, 100);
}
    </script> 
 </head> 
 <body onload="drawClock()"> 
  <div> 
   <div id="clock"> 
   </div> 
  </div>  
 </body>
</html>

如图；

转载于:https://my.oschina.net/oisanblog/blog/865632

weixin_34071713
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js时钟表盘
weixin_43117402的博客
03-18 427
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>xxx</title> <link rel="stylesheet" href="./index.css" /> <meta ...
js 时钟小案例
一阵云翳✲
06-11 635
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;时钟&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0;
js 指针式钟表
10-16
很好的指针式钟表，纯js实现，兼容IE 、火狐
原生js实现动态指针时钟效果
09-25
原生js实现动态指针时钟效果,简单又直接的效果，css3+js实现
javascript实例 —指针式时钟
weixin_30699443的博客
02-03 119
查看文章 写新文章 2007-07-06 15:49 <html><head><title>时钟</title><SCRIPT language=javascript><!--pX=400;pY=200obs = new Array(13)fu...
JavaScript-demo-指针时钟
baldyoung
03-11 109
source code: <html> <head> <style> #mainArea { width:200px; height:200px; border-radius:100px; background:gray; margin:0 auto; margin-top:300px; transform:rotate(90deg); } #houre { position:re
js+css3罗马数字指针时钟代码
06-24
在本文中，我们将深入探讨如何使用JavaScript（JS）和CSS3技术来创建一个具有罗马数字指针的圆形时钟。这个独特的设计不仅展示了这两种技术的强大功能，还为网页添加了一丝个性化元素。以下是对实现这一功能所需的...
简单js实现的指针时钟
01-24
"简单js实现的指针时钟"这个项目就是一个典型的例子，它利用了JavaScript的强大功能来模拟真实世界中的指针时钟。下面将详细介绍这个项目的相关知识点。 1. **JavaScript基础**：首先，你需要了解JavaScript的基本...
纯js实现指针时钟
03-08
不需要加载任何图片，纯粹的对JavaScript的API的熟练使用和完成一个指针表的矢量图。
js做的带三个指针的时钟。
10-28
自己用js做的时钟，根据系统时间，分针、秒针、时针自动移动。使用了raphael.js库，使用这个库可以很容易地做出强大的矢量图形和动画。
js html5实现简易指针时钟表代码.zip
07-05
js html5实现简易指针时钟表代码是一款个性的自动获取本地时间指针时钟特效下载。
指针时钟js
02-09
指针时钟JS是一种利用JavaScript编程语言实现的动态时钟效果，它可以在网页上展示一个模拟的指针式钟表，通常包括时针、分针和秒针，并且支持用户自定义背景，以适应不同网站设计的需求。在这个项目中，我们主要会...
shizhong.zip_指针时钟_时钟指针
09-24
在IT领域，指针时钟是一种常见的用户界面元素，它模拟了传统机械钟表的显示方式，用指针来指示当前的时间。在这个“shizhong.zip”压缩包中，包含了一个名为“shizhong.txt”的文件，我们可以推测这可能是关于一个...
JS简单的指针时钟动态效果
weixin_44683600的博客
04-27 1069
简单的指针时钟动态效果 <!DOCTYPE html> <html> <head> <title>指针时钟</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="generator" con...
JS实现时钟
任重道远
08-31 7805
先看一下最终的效果：http://www.gongx.top/xian/time.html 不会做动图，就放到我个人网站上去了，大家可以去看一下。 本来不想记录这个，但是老师的一个操作让我突然生出一个念头： 我靠，还能这么操作？ 话不多说，开始分析一下。   结构如下： &lt;!--最外层的div --&gt; &lt;div id="wrap"&gt; &lt...
js写一个会动的指针时钟
最新发布
05-05
以下是一个基于JavaScript实现的指针时钟动画： ```html <!DOCTYPE html> 指针时钟 canvas { background-color: #000; display: block; margin: 0 auto; } <canvas id="canvas"></canvas> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值