基于D3.js实现时钟效果


Posted in Javascript onJuly 17, 2018

今天做了一个小时钟动画,因为学习canvas也做过一个时钟,所以想着可不可以使用d3来做个时钟动画。

主要利用的还是饼图这个布局,添加了一个圆形颜色渐变的效果。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>时钟</title>
</head>
<body>
 
 <script type="text/javascript" src='../../../js/d3.js'></script>
 <script type="text/javascript">
 
 var width = 500,
 height = 500;
 var svg = d3.select('body').append("svg").attr("width", width).attr("height", height);
 var innerRadius = 190, //圆的内半径、外半径
 outerRadius = 200; 
 var arc = d3.svg.arc() //弧生成器
 .innerRadius(innerRadius) //设置内半径、0则为实心圆
 .outerRadius(outerRadius); //设置外半径
 
 //下面的数组的作用是这样的:
 //首先我的圆的颜色渐变的,而我的渐变方法是将圆切割成很多份,每份是渐变过程中的一个颜色。
 //当切割的份数多的时候就是看起来像渐变的一样。 
 //下面的时针、分针、秒针也会在指着不同的角度的时候同时改变自身的颜色。
 //当然也看到了其他的圆渐变的方法,你可以自己搜索。
 var sum = 1000; //sum代表圆被分成了多少份。 
 var num = new Array(); 
 for (var i = 0; i < sum; i++) {
 num.push(1);
 }
 var linear = d3.scale.linear() //通过线性比例尺来计算插值。
 .domain([0, sum])
 .range([0, 1])
 var arcs = svg.selectAll("g")
 .data(d3.layout.pie()(num)) //绑定转换后的数据piedata
 .enter()
 .append("g")
 .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
 
 var color = d3.scale.category10()
 var a = d3.rgb(0, 255, 255); //红色 设置渐变颜色的起始
 var b = d3.rgb(255, 255, 0); //绿色
 var c = d3.rgb(255, 0, 0);
 var compute = d3.interpolate(a, b); //他的值是介于0-1的
 
 
 arcs.append("path")
 .attr('fill', function(d, i) {
 return compute(linear(i)); //通过上面的linear比例函数看i当前是在多少。当然也可以直接(1/sum*i)
 })
 .attr('stroke-width', "0")
 .attr("d", function(d) {
 return arc(d); //使用弧生成器
 });
 
 //下面是给将圆给分成了60等份
 var num2 = new Array();
 for (var i = 0; i < 60; i++) num2.push(i);
 var ticks = svg.append('g').selectAll('g')
 .data(num2)
 .enter()
 .append('g')
 .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
 ;
 
 ticks.append("line")
   .attr("x1", 1)
   .attr("x1", 0)
   .attr("x2", function(d,i){
    return i%15==0?10:6; //添加圆内的刻度线 根据是不是3、6、9、12来判断是否加长
   })
   .attr("y2", 0)
   .attr('transform',function(d,i){
    
    return "rotate(" + (6*i -90) + ")" 
      + "translate(" + (innerRadius-10) +")";
   })
   .style('stroke',function(d,i){
    return compute(i/60);
   })
   .style('stroke-width',5); 
 
 ticks.append("text")
 .attr('transform', function(d, i) {
 var angle = (Math.PI * 2) / 60 * i - Math.PI;
 return "translate(" + (Math.sin(angle) * (innerRadius - 20) ) + "," + (Math.cos(angle) * (innerRadius - 20) )+ ")";
 })
 .attr("x", 8)
 .attr("dy", ".35em")
 .style('font-size', function(d, i) {
 if (i % 15 == 0)
  return "2em"
 })
 .style("text-anchor", function(d) {
 return i > 29 ? "end" : null;
 })
 .text(function(d, i) {
 return !(i % 5) ? (60 - i) / 5 : null;
 });
 
 var arc2 = d3.svg.arc().innerRadius(0).outerRadius(10);
 
 svg.selectAll('g')
 .data(d3.layout.pie()(num))
 .enter()
 .append('g')
 arcs.append("path")
 .attr('fill', function(d, i) {
 return compute(linear(i))
 })
 .attr("d", function(d, i) {
 return arc2(d);
 });
 
 var SecondsLine = svg.append('g').append('line')
 .attr("x1", width / 2)
 .attr("y1", height / 2)
 .style('stroke-width', 1)
 
 
 var MinutesLine = svg.append('g').append('line')
 .attr('x1', width / 2)
 .attr('y1', height / 2)
 .style('stroke-width', 3)
 
 var HoursLine = svg.append('g').append('line')
 .attr('x1', width / 2)
 .attr('y1', height / 2)
 .style('stroke-width', 5);
 
 var str=[1];
 var updatetimetext=svg.append('g')
 .selectAll('.timetext').data(str)
 .enter()
 .append('text')
 .attr('class', 'timetext')
 .text(function(d, i) {
  return d;
 })
 .attr('transform', function(d, i) {
  return "translate(" + (width / 2) + "," + (height - 20) + ")"
 })
 .style('text-anchor', "middle")
 .style('font-size', "2em");
 function chuli() {
 var d = new Date();
 var dm = d.getTime() % 1000;
 var h = (d.getHours() >= 12 ? d.getHours() - 12 : d.getHours());
 var m = d.getMinutes();
 var s = d.getSeconds();
 var angle = (Math.PI * 2) / 60 * (60 - s) + Math.PI;
 var angle2 = (Math.PI * 2) / (60 * 60) * ((60 * 60 - m * 60-s)) + Math.PI;
 var angle3 = (Math.PI * 2) / (12 * 60 * 60) * (12 * 60 * 60 - h * 60 * 60 - m * 60 - s) + Math.PI;
 SecondsLine.attr('x2', function(d, i) {
  return width / 2 + (innerRadius - 30) * Math.sin(angle);
 })
 .attr('y2', function(d, i) {
  return height / 2 + (innerRadius - 30) * Math.cos(angle);
 })
 .style('stroke', compute((s / 60)));
 
 MinutesLine.attr('x2', function(d, i) {
  return width / 2 + (innerRadius - 50) * Math.sin(angle2);
 })
 .attr('y2', function(d, i) {
  return height / 2 + (innerRadius - 50) * Math.cos(angle2);
 })
 .style('stroke', compute((m / 60)));
 
 HoursLine.attr('x2', function(d, i) {
  return width / 2 + (innerRadius - 80) * Math.sin(angle3);
 })
 .attr('y2', function(d, i) {
  return height / 2 + (innerRadius - 80) * Math.cos(angle3);
 })
 .style('stroke', compute((h / 12)));
 
 str.pop();    //删除上一个文本
 str.push(d.getHours()+":"+(m<10?"0"+m:m)+":"+(s<10?"0"+s:s)); //存入新的时间并且一位数时补0
 updatetimetext.data(str).text(function(d){return d;}) //更新时间
  
 
 
 setTimeout(chuli, 1000 - dm);//获取当前的毫秒,用1000减去,则是到下一秒的毫秒时间。
 }
 chuli();
 
 </script>
</body>
</html>

效果图:

基于D3.js实现时钟效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
vue生成token并保存到本地存储中
Jul 17 #Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 #Javascript
使用svg实现动态时钟效果
Jul 17 #Javascript
详解.vue文件中style标签的几个标识符
Jul 17 #Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 #Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 #Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 #Javascript
You might like
一个简单php扩展介绍与开发教程
2010/08/19 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
use jscript with List Proxy Server Information
2007/06/11 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
JS如何生成动态列表
2020/09/22 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
python修改操作系统时间的方法
2015/05/18 Python
python实现给数组按片赋值的方法
2015/07/28 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
分析python请求数据
2018/08/19 Python
python如何实现一个刷网页小程序
2018/11/27 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
详解python 内存优化
2020/08/17 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
《落花生》教学反思
2014/02/25 职场文书
五一活动标语
2014/06/30 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
医院党员公开承诺书
2014/08/30 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
python Polars库的使用简介
2021/04/21 Python