⌛ HTML CSSのJS SVGクロック🕐

3242 ワード
テキストリンク
どのようにHTML、CSS、SVGの画像とJavaScriptを使用して超簡単なクロックを作成するには?
まあ、いくつかの重要な点を念頭に置いて複雑ではない.
このようにHTMLページ内にSVGサークルイメージを直接配置する必要があります.
<div class="clock-container flex">
  <svg class="svg-seconds" width="24px" height="24px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
  <svg class="svg-minutes" width="24px" height="24px" viewBox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
  <svg class="svg-hours" width="24px" height="24px" viewBox="0 0 24 24"    xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486  10-10S17.514 2 12 2z"/></svg>
    
   <div class="time-box">
            <div class="time">00:00:00</div>
   </div>
</div>
そして、これはあなたが本当に必要とするHTMLコードです.
CSSの部分では、時間ボックスdivに対する位置を指定する必要がありますので、
.time-box{
    position: relative;
...
}

/* SVGS  */
svg.svg-seconds{  
    position: absolute;
    width: 360px;
    height: 360px;
    fill: var(--second);
    stroke: var(--third);
    stroke-width: 0.5;
    stroke-dasharray: 63;
}

svg.svg-minutes{  
    position: absolute;
    width: 330px;
    height: 330px;
    fill: transparent;
    stroke: var(--fourth);
    stroke-width: 0.6;
    stroke-dasharray: 63;
}

svg.svg-hours{  
    position: absolute;
    width: 270px;
    height: 270px;
    fill: transparent;
    stroke: var(--seventh);
    stroke-width: 3;
    stroke-dasharray: 63;
}
JavaScript部分の代わりに、SVG円のストロークを変更し、時刻文字列を返す単純関数を作成する必要があります
// TIME FN
function timeFn (){
    let time = new Date();
    let hours = addZero(time.getHours());
    let minutes = addZero(time.getMinutes());
    let seconds = time.getSeconds().toString().padStart(2,0);
    // 4 SVG OFFSET
    secCircle.style.strokeDashoffset = -(63 - (64 * seconds) / 60);
    minCircle.style.strokeDashoffset = -(63 - (64 * minutes) / 60);
    hoursCircle.style.strokeDashoffset = -(63 - (64 * hours) / 24)
    // FULL TIME
    let fullTime = `${hours}:${minutes}:${seconds}`;
    // console.log(fullTime)
    return fullTime;
}
ゼロを追加するには、関数を使用できます
function addZero (timeValue) {
    return Number(timeValue) >= 10 ? timeValue : '0'+ timeValue;
};
またはpadstart ()メソッドを使用する
.toString().padStart(2,0);
今、あなたがする必要があるすべての間隔を1秒(デフォルト)に設定されているたびに、時間のdiv
setInterval(()=> time.innerHTML = timeFn());
ここでコードを見つけることができますgithub
これは単純なvideo guideです
👋
hive--Sort Merge Bucket Map Join
การใช้ join ()ใน ジャバスクリプト