js 시계 효과 구현
오늘 제작 시간 을 공유 해 드 리 도록 하 겠 습 니 다.
일단 코드 를 공유 해 드릴 게 요.
우선 자 바스 크 립 트 코드
<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>
더 많은 자 바스 크 립 트 시계 필터 보기 클릭:자 바스 크 립 트 시계 필터 테마
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
