本篇文章給大家分享的是有關使用JavaScript怎么實現一個小時鐘效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
<script>
function setTime(){
var now = new Date();
var year = now.getFullYear(); //獲取現在的年份。
var mouth = now.getMonth() + 1; //獲取本年的月份，默認的是 0-11；所以進行加 1 操作；
var date = now.getDate(); //獲取日期，號
var week = now.getDay(); //獲取當前時段的星期
var hour = now.getHours(); //獲取當前時段的小時位
var minute = now.getMinutes(); //獲取當前時段的分鐘位
var second = now.getSeconds(); //獲取當前時段的秒位
var week1 = ['日' , '一' , '二' , '三' , '四' , '五' , '六']
var week2 = week1[week];
//從當前時間中提取出 年、月、日、周、時、秒、分
a.innerHTML = year;
b.innerHTML = mouth;
c.innerHTML = date;
d.innerHTML = week;
e.innerHTML = hour;
f.innerHTML = minute;
g.innerHTML = second;
}
setTime();
//背景顏色
function Color(){
var w = parseInt(Math.random()*256);
var j = parseInt(Math.random()*256);
var t = parseInt(Math.random()*256);
return `rgb(${w},${j},${t})`;
}
l.style.background = Color();
setInterval(function(){
setTime();
l.style.background = Color();//背景顏色隨機變化
g.style.color = Color();//字體顏色隨機變化
g.style.background = Color();//背景顏色隨機變化
} , 1000)
</script>大家可以看到，在這里我們主要用的是定時器。
// 定時器
// 根據設定的時間間隔,來循環執行程序
// 只要定時器不停止,程序就會一直執行
// setInterval( 參數1 , 參數2 )
// 參數1:要執行的程序,必須是一個函數的形式 function(){ 定義程序 }
// 參數2:執行程序的間隔時間 單位是毫秒
// 時間間隔不能無限小,與計算機的刷新頻率有關
// 60Hz 60赫茲 代表,1秒刷新60次
// 1次就是 1000 / 60 ---- 16.666... 毫秒
// 你定義的程序的時間間隔,不能小于 16.6666... 毫秒
// 我們一般都定義最少 0.1秒,也就是 100毫秒
// 每間隔1000毫秒,也是一秒,重復執行 function(){}中的程序下面的是全部的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 750px;
margin: 100px auto;
text-align: center;
background-color: cyan;
border-radius: 20px;
padding: 50px 10px;
font-size: 30px;
}
span{
display: inline-block;
background-color: gainsboro;
font-size: 30px;
padding: 10px 5px;
border-radius: 4px;
}
</style>
</head>
<body>
<div id="l">
<span id="a"></span> 年 <span id="b"></span> 月
<span id="c"></span> 日 星期 <span id="d"></span>
<span id="e"></span> 時 <span id="f"></span> 分
<span id="g"></span> 秒
</div>
<script>
function setTime(){
var now = new Date();
var year = now.getFullYear(); //獲取現在的年份。
var mouth = now.getMonth() + 1; //獲取本年的月份，默認的是 0-11；所以進行加 1 操作；
var date = now.getDate(); //獲取日期，號
var week = now.getDay(); //獲取當前時段的星期
var hour = now.getHours(); //獲取當前時段的小時位
var minute = now.getMinutes(); //獲取當前時段的分鐘位
var second = now.getSeconds(); //獲取當前時段的秒位
var week1 = ['日' , '一' , '二' , '三' , '四' , '五' , '六']
var week2 = week1[week];
//從當前時間中提取出 年、月、日、周、時、秒、分
a.innerHTML = year;
b.innerHTML = mouth;
c.innerHTML = date;
d.innerHTML = week2;
e.innerHTML = hour;
f.innerHTML = minute;
g.innerHTML = second;
}
setTime();
//背景顏色
function Color(){
var w = parseInt(Math.random()*256);
var j = parseInt(Math.random()*256);
var t = parseInt(Math.random()*256);
return `rgb(${w},${j},${t})`;
}
l.style.background = Color();
setInterval(function(){
setTime();
l.style.background = Color();//背景顏色隨機變化
g.style.color = Color();//字體顏色隨機變化
g.style.background = Color();//背景顏色隨機變化
} , 1000)
</script>
</body>
</html>以上就是使用JavaScript怎么實現一個小時鐘效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
