Preface
After learning the front end for a period of time, the three core knowledge was finally stumbling, so it took more than an hour to make such an animation clock that is equivalent to a summary review.
Functions implemented by this animated clock:
- Can switch back and forth between normal clock mode and timekeeping mode
- Timekeeping mode can set the target time, display the remaining time from the target or the elapsed time after the target
- Accuracy is in seconds
- The range is from January 1, 1st AD to December 31st, 99999 AD.
It's true. I tried it. There are pictures to prove
The actual animation effect is shown in the video.
Front-end development exercise-animation clock
Because the recording software can't record the date and time selection box, copy the code below to try it out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时钟 by见咲</title>
<style>
* {
padding: 0;
margin: 0;
}
/* 给时钟加点样式 */
.clock {
width: 240px;
height: 240px;
background-color: rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
position: absolute;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -120px;
border-radius: 120px;
}
.clock h1 {
text-align: center;
line-height: 80px;
}
.clock h2 {
text-align: center;
line-height: 50px;
}
#easy {
width: 240px;
height: 240px;
background-color: grey;
position: absolute;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -120px;
border-radius: 120px;
}
#date{
display: none;
}
#time{
display: none;
}
#easyNow {
line-height: 240px;
text-align: center;
font-size: 40px;
}
#btn {
cursor: pointer;
}
</style>
</head>
<body>
<div id="easy">
<h1 id="easyNow"></h1>
</div>
<div class="clock" id="box">
<h1 id = 'btn'>计时器</h1>
<h2 id='now'></h2>
<h2>
距离
<input type="date" id="date">
<input type="time" id="time" value="00:00">
</h2>
<h2 id="info"></h2>
</div>
<script>
var info = document.getElementById('info');
var now = document.getElementById('now');
var Arrd = new Array;
var Arrt = new Array;
//为当前时间的时、分、秒添加格式化函数
function zero(i) {
var tim = '0';
if (i < 10) {
tim += i;
return tim;
}
return i;
}
setInterval(function () {
var nowTime = new Date;
nowMon = Number(nowTime.getMonth()) + 1;
now.innerText = '现在是' + nowTime.getFullYear() + '年' + nowMon + '月' + nowTime.getDate() + '日' + zero(nowTime.getHours()) + ':' + zero(nowTime.getMinutes()) + ':' + zero(nowTime.getSeconds());
easyNow.innerText = zero(nowTime.getHours()) + ':' + zero(nowTime.getMinutes()) + ':' + zero(nowTime.getSeconds());
var date = document.getElementById("date").value;
Arrd = date.split("-"); // 根据“-”分割
var y = Arrd[0];
var m = Arrd[1];
var d = Arrd[2];
// 现在的日期
var nd = new Date();
// 目标的日期，月份需要特殊处理
var td = new Date(y, m - 1, d);
var time = document.getElementById('time').value;
Arrt = time.split(":");
var h = Arrt[0];
var min = Arrt[1];
// 毫秒差
var diff = td - nd + Number(h) * 60 * 60 * 1000 + Number(min) * 60 * 1000;
var day = parseInt(diff / (1000 * 60 * 60 * 24));
var hours = parseInt(diff % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
var minutes = parseInt(diff % (1000 * 60 * 60) / (1000 * 60));
var seconds = parseInt(diff % (1000 * 60 * 60) % (1000 * 60) / 1000);
if (seconds < 0) {
info.innerText = '已经过了' + -1 * day + '天' + -1 * hours + '时' + -1 * minutes + '分' + -1 * seconds + '秒';
}
else if (y) {
info.innerText = '还有' + day + '天' + hours + '时' + minutes + '分' + seconds + '秒';
}
}, 50);
// js+css实现动画部分
var btn = document.getElementById('btn');
var pos = 1;
btn.onclick = function() {
pos++;
box.style.transition = 'all 0.2s ease 0s';
if(pos%2){
box.style.marginLeft = '-120px';
box.style.width = '240px';
box.style.color = 'rgba(0, 0, 0, 0)';
box.style.backgroundColor = 'rgba(0, 0, 0, 0)';
date.style.display = 'none';
time.style.display = 'none';
box.style.boxShadow = 'none';
easy.style.boxShadow = '5px 5px 5px #888';
}else{
box.style.marginLeft = '-225px';
box.style.width = '450px';
box.style.color = 'black';
box.style.backgroundColor = 'grey';
box.style.boxShadow = '5px 5px 5px #888';
box.style.display = 'inline';
easy.style.boxShadow = 'none';
date.style.display = 'inline';
time.style.display = 'inline'
}
}
</script>
</body>
</html>
The content of this code can be divided into three parts: HTML basic structure, CSS style production, JS for calculation and with CSS to add animation effects. If you just look at the HTML part, it is very poor, and there are not many tags, but with the use of css and js, it can also show a different feeling. The front end is really an interesting subject.
to sum up
From knowing the front-end to the gadgets that have been knocked out in five weeks of spare time, it is a very fulfilling thing to do some interesting things while making use of the knowledge you have learned.
There should be a lot of immaturity in the code. I hope some big guys are willing to give me some advice. I am grateful!
Hope everyone will encourage together!