站长资源网络编程
基于D3.js实现时钟效果
简介今天做了一个小时钟动画，因为学习canvas也做过一个时钟，所以想着可不可以使用d3来做个时钟动画。主要利用的还是饼图这个布局，添加了一个圆形颜色渐变的效果。时钟</div>
<div class="news_infos"><div id="MyContent"><p>今天做了一个小时钟动画，因为学习canvas也做过一个时钟，所以想着可不可以使用d3来做个时钟动画。</p>
<p>主要利用的还是饼图这个布局，添加了一个圆形颜色渐变的效果。</p>
<div class="htmlcode">
<pre class="brush:xhtml;">
<!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"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) "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 ":"+(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></pre>
</div>
<p>效果图：</p>
<p><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/201807171117525.gif');"><img src="/UploadFiles/2021-04-02/201807171117525.gif" alt="基于D3.js实现时钟效果" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。</p></div>
</div>
</div>
<div class="share"> </div>
<div class="nextinfo">
<p>上一篇：<a href="/3g/1/91071.html" title="JS中实现隐藏部分姓名或者电话号码的代码">JS中实现隐藏部分姓名或者电话号码的代码</a></p>
<p>下一篇：<a href="/3g/1/91073.html" title="vue生成token并保存到本地存储中">vue生成token并保存到本地存储中</a></p>
</div>
<div class="otherlink">
<h2>最新资源</h2>
<ul>
<li><a href="/3g/1/623703.html" title="群星《奔赴！万人现场 第2期》[FLAC/分轨]">群星《奔赴！万人现场 第2期》[FLAC/分轨]</a></li>
<li><a href="/3g/1/623702.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623701.html" title="群星《奇妙浪一夏 (上海迪士尼度假区音乐">群星《奇妙浪一夏 (上海迪士尼度假区音乐</a></li>
<li><a href="/3g/1/623700.html" title="【古典音乐】詹姆斯·高威《季节》1993[WA">【古典音乐】詹姆斯·高威《季节》1993[WA</a></li>
<li><a href="/3g/1/623699.html" title="贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]">贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]</a></li>
<li><a href="/3g/1/623698.html" title="小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE">小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE</a></li>
<li><a href="/3g/1/623697.html" title="群星《欢迎来到我身边 电影原声专辑》[32">群星《欢迎来到我身边 电影原声专辑》[32</a></li>
<li><a href="/3g/1/623696.html" title="群星《欢迎来到我身边 电影原声专辑》[FL">群星《欢迎来到我身边 电影原声专辑》[FL</a></li>
<li><a href="/3g/1/623695.html" title="雷婷《梦里蓝天HQⅡ》 2023头版限量编号低">雷婷《梦里蓝天HQⅡ》 2023头版限量编号低</a></li>
<li><a href="/3g/1/623694.html" title="群星《2024好听新歌42》AI调整音效【WAV分">群星《2024好听新歌42》AI调整音效【WAV分</a></li>
</ul>
</div>
</div>
<div class="sidebar">
</div>
<div class="sidebar">
友情链接:<a href="http://www.imxmx.com/" title="杰晶网络" target="_blank">杰晶网络</a> <a href="/" title="DDR爱好者之家" target="_blank">DDR爱好者之家</a> <a href="http://www.nqxw.com/" title="南强小屋" target="_blank">南强小屋</a> <a href="http://www.paidiu.com/" title="黑松山资源网" target="_blank">黑松山资源网</a> <a href="http://www.dyhadc.com/" title="白云城资源网" target="_blank">白云城资源网</a> <a href="/sitemap1.xml">站点地图</a> <a href="/sitemap.xml">SiteMap</a>
</div>
</article>
<footer>
<p>Design by <a href="http://m.ddrfans.com">DDR爱好者之家</a> <a href="http://m.ddrfans.com">http://m.ddrfans.com</a></p>
</footer>
<script src="/images3g/nav.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
var elm = jQuery('#left_flow2');
var startPos = jQuery(elm).offset().top;
jQuery.event.add(window, "scroll", function() {
var p = jQuery(window).scrollTop();
jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');
jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
});
});
</script>
</body>
</html>