快捷導(dǎo)航

js實(shí)現(xiàn)電子時鐘效果

更新時間：2022年06月19日 12:01:15 作者：小歡不歡

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)電子時鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)電子時鐘效果的具體代碼，供大家參考，具體內(nèi)容如下

代碼區(qū)域

代碼如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? ? #watch{

? ? ? ? ? ? margin-top: 200px;
? ? ? ? ? ? font-size:100px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ??
? ??
? ? </style>
</head>
<body>
? ? <div id = "watch"></div>

? ? <script>
? ? ? ? //獲取id是 watch的元素
? ? ? ? var watch = document.getElementById('watch');
? ? ? ? //調(diào)用 獲取日期時間
? ? ? ? getDateTime();
? ? ? ? //開啟定時器
? ? ? ? setInterval (getDateTime,1000);
?
? ? ? ? //定義定時器的回調(diào)函數(shù)，獲取當(dāng)前日期時間

? ? ? ? function getDateTime(){
? ? ? ? //創(chuàng)建時間，日期，對象
? ? ? ? var date = new Date();
? ? ? ??
? ? ? ? //獲取年月日時分秒
? ? ? ? var y = date.getFullYear();
? ? ? ? var m = date.getMonth()+1;
? ? ? ? var d = date.getDate();
? ? ? ? var h = date.getHours();
? ? ? ? var i = date.getMinutes();
? ? ? ? var s = date.getSeconds();

? ? ? ? //如果個位前面補(bǔ)充零
? ? ? ? m = m < 10 ? '0' + m : m;
? ? ? ? d = d < 10 ? '0' + d : d;
? ? ? ? h = h < 10 ? '0' + h : h;
? ? ? ? i = i < 10 ? '0' + i : i;
? ? ? ? s = s < 10 ? '0' + s : s;
? ? ? ?
? ? ? ?var dateTimeStr = y + '-'+ m + '-'+ d + ' '+ h + ':' + i + ':' + s ;

? ? ? ?//把字符串顯示在元素中
? ? ? ? ? watch.innerHTML = dateTimeStr;


? ? }
? ? ? ?
? ??
? ? </script>
</body>
</html>

之前小編收藏了一段電子時鐘的實(shí)現(xiàn)代碼，分享給大家，也謝謝原作者的分享：

<!DOCTYPE html>
<html>
<head>
?? ?
<style type="text/css" media="screen">
?
body {
? ? background: black;
}
?
#txt {
? ? position: absolute;
? ? top: 50%;
? ? left: 50%;
? ? transform: translateX(-50%) translateY(-50%);/*使時鐘居中顯示*/
? ? color: greenyellow;
? ? font-size: 60px;
? ? font-family: sans-serif;
? ? letter-spacing: 7px;
?? ?/*creating a gradient to be used as background, and then clipping mask with text?
?? ?that shows background only where text is present.*/
? ? background-image: linear-gradient(to bottom right, red, yellow, green);
?? ?color:transparent;
?? ?-webkit-background-clip: text;
? ? border: 5px solid silver;
}
?
</style>
?
<script>
function startTime() {
? var today = new Date();
? var h = today.getHours();
? var m = today.getMinutes();
? var s = today.getSeconds();
? m = showInTwoDigits(m);
? s = showInTwoDigits(s);
? document.getElementById('txt').innerHTML =
? h + ":" + m + ":" + s;
? setTimeout(startTime, 1000);//設(shè)定刷新頻率為1000毫秒
}
function showInTwoDigits(i) {
? if (i < 10) {i = "0" + i}; ?// 10以下的數(shù)字前加0
? return i;
}
</script>
?? ?
</head>
?
<body onload="startTime()">
?
<div id="txt"></div>
?
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: