序文
フロントエンドを一定期間学んだ後、3つのコア知識がついにつまずいたので、要約レビューに相当するようなアニメーション時計を作るのに1時間以上かかりました。
このアニメーション時計によって実装される機能：
- 通常の時計モードと計時モードを切り替えることができます
- 計時モードでは、目標時間を設定したり、目標からの残り時間を表示したり、目標からの経過時間を表示したりできます。
- 精度は秒単位です
- 範囲は、西暦1年1月1日から西暦9 9999年12月31日までです。
それは本当です。私はそれを試しました。証明する写真があります
実際のアニメーション効果はビデオに示されています。
フロントエンド開発演習-アニメーション時計
記録ソフトウェアは日付と時刻の選択ボックスを記録できないため、以下のコードをコピーして試してみてください。
<!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>
このコードの内容は、HTMLの基本構造、CSSスタイルの作成、計算用のJS、アニメーション効果を追加するためのCSSの3つの部分に分けることができます。HTMLの部分だけを見ると、非常に貧弱でタグも少ないですが、cssとjsを使うと違った感じになります。フロントエンドは本当に興味深いテーマです。
総括する
フロントエンドを知ることから、5週間の暇な時間にノックアウトされたガジェットまで、あなたが学んだ知識を利用しながらいくつかの興味深いことをすることは非常に充実したことです。
コードには未熟な部分がたくさんあるはずです。大勢の人が喜んでアドバイスをくれたらいいのにと思います。感謝しています。
みんなが一緒に励ましてくれることを願っています！