溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關基于D3.js如何實現時鐘效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
主要利用的還是餅圖這個布局，添加了一個圓形顏色漸變的效果。
<!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如何實現時鐘效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
