Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。
给你Java学习路线：html-css-js-jq-javase-数据库-jsp-servlet-Struts2-hibernate-mybatis-spring4-springmvc-ssh-ssm
一个好的Java工程师应该是全栈的，所以最近小编我补习了一下Web知识，近期做了几个小玩意给大家分享一下，在此也告诉大家，学Java千万不能忽视前端哦。
打造效果如下：
小编推荐一个学Java的学习裙【 六五零，五五四，六零七 】，无论你是大牛还是小白，是想转行还是想入行都可以来了解一起进步一起学习！裙内有开发工具，很多干货和技术资料分享！
动态时钟
接下来就是源码了..大家看了后会不会觉得简单。
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))
);
}
}
小编推荐一个学Java的学习裙【 六五零，五五四，六零七 】，无论你是大牛还是小白，是想转行还是想入行都可以来了解一起进步一起学习！裙内有开发工具，很多干货和技术资料分享！
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;
好啦，代码就分享到这里，大家觉得是不是挺简单的，一个好的项目是需要几个小玩意的，近期会继续分享类似小案例，大家可以关注我的动态哦！
