Java编程Web基础案例：动态时钟 不一样的Java酷炫风 附源码！

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;

好啦，代码就分享到这里，大家觉得是不是挺简单的，一个好的项目是需要几个小玩意的，近期会继续分享类似小案例，大家可以关注我的动态哦！