Java是一種可以撰寫跨平臺(tái)應(yīng)用軟件的面向?qū)ο蟮某绦蛟O(shè)計(jì)語言。Java 技術(shù)具有卓越的通用性哈雏、高效性楞件、平臺(tái)移植性和安全性，廣泛應(yīng)用于PC裳瘪、數(shù)據(jù)中心土浸、游戲控制臺(tái)、科學(xué)超級(jí)計(jì)算機(jī)彭羹、移動(dòng)電話和互聯(lián)網(wǎng)黄伊，同時(shí)擁有全球最大的開發(fā)者專業(yè)社群。
給你Java學(xué)習(xí)路線：html-css-js-jq-javase-數(shù)據(jù)庫-jsp-servlet-Struts2-hibernate-mybatis-spring4-springmvc-ssh-ssm
一個(gè)好的Java工程師應(yīng)該是全棧的派殷，所以最近小編我補(bǔ)習(xí)了一下Web知識(shí)还最，近期做了幾個(gè)小玩意給大家分享一下，在此也告訴大家毡惜，學(xué)Java千萬不能忽視前端哦拓轻。
打造效果如下：
小編推薦一個(gè)學(xué)Java的學(xué)習(xí)裙【 六五零，五五四经伙，六零七 】扶叉，無論你是大牛還是小白，是想轉(zhuǎn)行還是想入行都可以來了解一起進(jìn)步一起學(xué)習(xí)帕膜！裙內(nèi)有開發(fā)工具枣氧，很多干貨和技術(shù)資料分享！
動(dòng)態(tài)時(shí)鐘
接下來就是源碼了..大家看了后會(huì)不會(huì)覺得簡單垮刹。
HTML部分：
CSS部分：
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
body{
background:hsl(50,20%,93%);
margin:0;
}
canvas{
display:block;
width:100%;
height:100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#clock-container{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-family: "Open Sans", sans-serif;
font-size: 8vw;
color:hsl(0,0%,25%);
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
li {
&:nth-of-type(-n+2) {
&:after {
content:':';
color: #666;
}
}
}
}
JS部分：
var c = document.body.appendChild(document.createElement("canvas")),
w = innerWidth,
h = innerHeight;
c.width = w;
c.height = h;
var ctx = c.getContext("2d"),
//degrees to radians conversion function
deg2rad = d => (Math.PI / 180) * d;
//constructor for the circles
function radialBar(x, y, r, max, value) {
var self = this;
self.X = x || 0;
self.Y = y || 0;
self.R = r || 0;
self.MAX = max || 1;
self.value = value || 0;
self.target = value || 0;
self.update = function(v) {
//lerp
self.target = v > 0 ? v : 0.1;
self.value += (self.target - self.value) * 0.05;
ctx.arc(
this.X,
this.Y,
this.R,
//move starting point to top
deg2rad(-90),
deg2rad(-90) + (deg2rad(360) * (self.value / self.MAX))
);
}
}
小編推薦一個(gè)學(xué)Java的學(xué)習(xí)裙【 六五零达吞，五五四，六零七 】荒典，無論你是大牛還是小白酪劫，是想轉(zhuǎn)行還是想入行都可以來了解一起進(jìn)步一起學(xué)習(xí)吞鸭！裙內(nèi)有開發(fā)工具，很多干貨和技術(shù)資料分享契耿！
ctx.lineWidth = 3;
ctx.lineCap = "round";
var spacing = 12,
radius = 150,
//contains values for hours, minutes, seconds
times,
//create circles
circles = {
H: new radialBar(w / 2, h / 2, radius, 12, 0),
M: new radialBar(w / 2, h / 2, radius - spacing, 60, 0),
S: new radialBar(w / 2, h / 2, radius - spacing - spacing, 60, 0)
},
//text elements
elements = {
H: document.getElementById("H"),
M: document.getElementById("M"),
S: document.getElementById("S")
};
//set text colors
Object.keys(elements).forEach((k, i) =>
elements[k].style.color =
"hsl(" + k.charCodeAt(0) * i + ", 50%, 50%)");
//update time values and text once per second
function updateTime {
var time = new Date;
var hours = time.getHours;
if (hours > 12) {
hours -= 12;
} else if (hours === 0) {
hours = 12;
}
times = {
H: hours,
M: time.getMinutes,
S: time.getSeconds
};
//update text
Object.keys(times).forEach(k =>
elements[k].innerHTML =
//pad with 0s if needed
String(times[k]).length > 1 ?
times[k] :
times[k] = "0" + times[k]
);
setTimeout(updateTime, 1000);
}
function draw {
ctx.clearRect(0, 0, w, h);
//update circles, set their color, draw
Object.keys(circles).forEach((k, i) => {
ctx.beginPath;
// ctx.setLineDash([.5, 15]);
circles[k].update(times[k]);
ctx.strokeStyle = "hsl(" + k.charCodeAt(0) * i + ", 50%, 50%)";
ctx.stroke;
ctx.lineWidth=10;
});
requestAnimationFrame(draw);
}
//start
updateTime;
draw;
好啦，代碼就分享到這里螃征，大家覺得是不是挺簡單的搪桂，一個(gè)好的項(xiàng)目是需要幾個(gè)小玩意的，近期會(huì)繼續(xù)分享類似小案例盯滚，大家可以關(guān)注我的動(dòng)態(tài)哦踢械！
