技术文章
当前位置:首页 > Javascript技术文章 > 一个简易时钟效果js实现代码

时钟效果js代码分享

  • 发布时间:
  • 作者:码农之家原创
  • 点击:83

这篇文章主要知识点是关于js、时钟、JS html时钟制作代码分享 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript之美
  • 类型:JavaScript大小:94 MB格式:PDF出版:中国电力出版社作者:安顿?科瓦诺夫
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

一个简易时钟效果js实现代码

本文实例为大家分享了js时钟特效 的具体代码,供大家参考,具体内容如下

一个简易时钟效果js实现代码

js代码

var canvas = document.getElementById("clock");
var clock = canvas.getContext("2d");
 
function zhong() {
 clock.save();
 //开始画外层圆
 clock.translate(200, 200);
 clock.strokeStyle = 'black';
 clock.lineWidth = 3;
 clock.beginPath();
 clock.arc(0, 0, 195, 0, 2 * Math.PI);
 clock.stroke();

 //时钟上的数字
 var shuzi = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
 clock.font = "30px Arial";
 clock.textAlign = "center";
 clock.textBaseline = "middle";
 shuzi.forEach(function(number, i) {
  var rad = 2 * Math.PI / 12 * i;
  var x = Math.cos(rad) * 180;
  var y = Math.sin(rad) * 180;
  clock.fillText(number, x, y);
 });

 // 小圆点

 for(j = 0; j < 60; j++) {
  var h = 2 * Math.PI / 60 * j;
  var m = Math.cos(h) * 180;
  var n = Math.sin(h) * 180;
  clock.fillStyle = 'black';
  clock.beginPath();
  if(j % 5 === 0) {
   continue;
  }
  clock.arc(m, n, 3, 0, 2 * Math.PI);
  clock.fill();
 }
}
function drawHour(hour,min) {
 clock.save();
 var rad = 2 * Math.PI / 12 * hour;
 var red = 2 *Math.PI/12/60*min;
 clock.rotate(rad+red);
 clock.lineWidth = 10;
 clock.lineCap = "round";
 clock.beginPath();
 clock.moveTo(0, 5);
 clock.lineTo(0, -100);
 clock.stroke();
 clock.restore();
}

function drawmin(min) {
 clock.save();
 var rad = 2 * Math.PI / 60 * min;
 clock.rotate(rad);
 clock.lineWidth = 5;
 clock.lineCap = "round";
 clock.beginPath();
 clock.moveTo(0, 10);
 clock.lineTo(0, -150);
 clock.stroke();
 clock.restore();
}

function drawsec(sec) {
 clock.save();
 var rad = 2 * Math.PI / 60 * sec;
 clock.rotate(rad);
 clock.lineWidth = 2;
 clock.lineCap = "round";
 clock.strokeStyle = "red";
 clock.beginPath();
 clock.moveTo(0, 10);
 clock.lineTo(0, -180);
 clock.stroke();
 clock.restore();
}

function dian() {
 clock.fillStyle = "white";
 clock.beginPath();
 clock.arc(0, 0, 2, 0, 2 * Math.PI);
 clock.fill();
}

function xuanzhuan() {
 clock.clearRect(0,0,400,400);
 zhong();
 var now = new Date();
 var hour = now.getHours();
 var min = now.getMinutes();
 var sec = now.getSeconds();
 drawHour(hour,min);
 drawmin(min);
 drawsec(sec);
 dian();
 clock.restore();
}
xuanzhuan();

setInterval(xuanzhuan, 1000);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

JS html时钟制作代码分享

时钟效果图:

JS html时钟制作代码分享

闲来无聊做了一个网页的时钟,效果模拟传统时钟的运行方式,

运用了html 的画布实现指针,背景图片引用了网络图片。

具体原理:

首先将时钟分为四个不同区域,对每个区域计算cos,sin 来确实指针顶点位置。在通过画布来绘画出指针。
通过setInterval 每秒刷新指针位置实现 传统机械表针的动态跳动。

本人是JS开发程序员,从业1年多。闲来无聊的简单页面,

欢迎大家提问,或者建议。共同进步

代码部分,直接复制HTML 文件中即可查看效果:

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
  <title>clock</title>
</head>
<body >
  <div >
    <div >
    </div>
    <canvas id="t" width="800" height="800"></canvas>
    <div >
    </div>
  </div>
  <script language="javascript">
        var s = setInterval(moveI, 1000);
        function moveI() {
          var c = document.getElementById("t");
          var pc = c.getContext("2d");
          c.height = c.height;
          //秒
          pc.lineWidth = 3;
          pc.strokeStyle = 'rgba(255,0,0,0.8)';
          var now = new Date();
          var sindex = getxy(150, now.getSeconds());
          pc.moveTo(400, 400);
          pc.lineTo(sindex.x, sindex.y);
          pc.stroke();
          pc.beginPath();
          //分
          pc.lineWidth = 7;
          pc.strokeStyle = 'rgba(50,50,50,0.8)';
          var mindex = getxy(120, now.getMinutes() + (now.getSeconds() / 60));
          pc.moveTo(400, 400);
          pc.lineTo(mindex.x, mindex.y);
          pc.stroke();
          pc.beginPath();
          //时
          pc.lineWidth = 10;
          pc.strokeStyle = 'rgba(0,0,0,0.8)';
          var hindex = getxy(80, ((now.getHours() > 12 ? now.getHours() - 12 : now.getHours()) + (now.getMinutes() / 60)) * 5);
          pc.moveTo(400, 400);
          pc.lineTo(hindex.x, hindex.y);
          pc.stroke();
        };

        function getxy(r, t) {
          //计算分区 0,1,2,3
          var a = parseInt(t / 15);
          //分区角度
          t = t - 15 * a;
          var y;
          var x;
          //基于分区的坐标计算
          switch (a) {
            case 0:
              y = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
              x = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
              break;
            case 1:
              y = r + (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
              x = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
              break;
            case 2:
              y = r + (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
              x = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
              break;
            case 3:
              y = r - (r * Math.sin(2 * Math.PI / 360 * 90 * (t / 15)));
              x = r - (r * Math.cos(2 * Math.PI / 360 * 90 * (t / 15)));
              break;
            default:
              break;
          }
          y = (400 - r) + y;
          x = (400 - r) + x;
          return {
            'x': x,
            'y': y
          };
        };
  </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到webpack 2的react开发配置详解、 javascript的写法总结、 js实现方块上下左右移动效、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:layui获取选中行数据的代码详解

下一篇:echarts中箱线图的分析与绘制实例分享

展开 +

收起 -

相关电子书
学习笔记
网友NO.950369

JS+H5 Canvas实现时钟效果

用JavaScript+Canvas来实现最简单的时钟效果,供大家参考,具体内容如下 效果图: 先看html代码: html head meta charset="UTF-8" title/title script type="text/javascript" src="js/demo3.js" /script /head body canvas id = "canvas"/canvas /body/html JavaScript代码: var canvas,context;function draw(){//定义划时钟的方法 var data = new Date(); var hHoure = data.getHours(); var mMin = data.getMinutes(); var sSec = data.getSeconds(); var hValue = (hHoure*30+mMin/2-90)*Math.PI/180; var mValue = (mMin*6-90)*Math.PI/180; var sValue = (sSec*6 -90)*Math.PI/180; var x = 200,y = 200,r = 150; context.clearRect(0,0,canvas.width,canvas.height); context.moveTo(x,y); context.arc(x,y,r,0,6*Math.PI/180,false); // context.beginPath(); context.lineWidth = 1; for(var i = 0;i60;i++){ context.moveTo(x,y); context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); } context.closePath(); context.stroke(); // context.beginPath(); context.fillStyle = "white"; context.moveTo……

网友NO.355410

JS+CSS实现滚动数字时钟效果

本篇内容我们用js配合css样式表来实现一个滚动时钟的动画效果,这个效果一般都是用在网页开场动画以及区域的时间显示中,非常好看,动画效果也很个性,我们先来看下运行后的效果: 下面就是这个滚动时钟动画的全部代码: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /titleCSS3+JS滚动数字时钟代码-码农之家/titlestylebody{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235, 0.89);font-family: 'Roboto Condensed', sans-serif;font-weight: 300;overflow: hidden;}.column,.colon{display: inline-block;vertical-align: top;font-size: 86px;line-height: 86px;}.column{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webk……

网友NO.961367

js数字滑动时钟的简单实现(示例讲解)

废话不多说,直接上代码 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleDocument/title style type="text/css" body,ul{margin:0;padding: 0;} .content{margin:100px auto;width: 1000px;} .box{position: relative;float: left;width: 50px;height: 120px;overflow: hidden;} .box li{position: absolute;left: 0;width:100%;height: 120px;list-style:none;font-size:80px;font-weight: bold;background-color: #fff; line-height: 120px; text-align: center;} .colon{float: left;height: 120px;font-size: 80px;color: #e91e63;font-weight: bold;line-height: 100px;} /style/headbody div class="content" /div script type="text/javascript" (function(){ var colors = ["#69D2E7", "#E20049", "#19215E", "#F38630", "#FA6900", "#FF4E50", "#F9D423", "#FFB6FF", "#474168", "#6ACAFC"]; var content = document.querySelector('.content'); var num = 0; var height = 120; var maxheight = (2-num)*height; var timeNum = [3,10,6,10,6,10]; var position = []; var NumberBoxs = []; for(var i =0;i10;i++){ position.push((1-i)*hei……

网友NO.673294

js实现一个简单的数字时钟效果

效果图: 代码如下: !DOCTYPE HTMLhtml head meta http-equiv="content-type" content="text/html; charset=utf-8" / title一个简单的数字时钟/title script type="text/javascript" charset="utf-8" // 定义一个函数用以显示当前时间 function displayTime() { var elt = document.getElementById("clock"); // 通过id= "clock"找到元素 var now = new Date(); // 得到当前时间 elt.innerHTML = now.toLocaleTimeString(); //让elt来显示它 setTimeout(displayTime,1000); //在1秒后再次执行 } window.onload = displayTime; //当onload事件发生时开始显示时间 /script style type="text/css" media="all" #clock { font: bold 24pt sans; background: #ddf; padding: 10px; border: 2px solid black; border-radius: 10px; } /style /head body h1一个简单的数字时钟/h1 span id="clock"/span /body/html 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持码农之家! ……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息