JavaScript를 사용한 놀라운 새 탭 포커스 페이지
15938 단어 javascriptcsshtml
https://youtu.be/fSTQzlprGLI (JavaScript를 배우고 싶다면 거기로 가서 보세요. 저 같은 초보자에게 좋습니다).
좋아, 부분적으로!
먼저 HTML 템플릿을 만들어야 합니다.
<div id="box">
<time id="time"></time>
<h1>
<span id="good"></span>
<span id="name"></span>
</h1>
<h2 id="phrase">Your focus?</h2>
<h2 id="coolThing" contenteditable="true"></h2>
</div>
이제 CSS로 이동합니다.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: black;
height: 100vh;
background-size: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#box {
background: rgba(255, 255, 255, 0.1);
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
background-size: auto;
width: 480px;
height: 330px;
}
#time {
font-size: 8rem;
}
h1 {
margin-bottom: 3rem;
}
h2 {
margin-bottom: 0.5rem;
opacity: 0.5;
}
#coolThing {
text-decoration: underline;
}
@media(max-width: 700px){
#time {
font-size: 6rem;
}
}
그리고 마지막으로 우리는 부분적으로 JavaScript 코드로 이동합니다. DOM 요소를 가져와야 합니다.
var time = document.getElementById('time');
var good = document.getElementById('good');
var phrase = document.getElementById('phrase');
var coolThing = document.getElementById('coolThing');
구성자를 사용하여 시계 기능을 설정하므로 시, 분, 초를 가져오는 구성자를 만들기 전에 'new'라는 단어를 사용해야 합니다. .innerHTML을 사용하여 이것을 HTML 페이지에 넣고 setTimeout 함수를 사용하여 cronometer를 만듭니다. theZero 함수는 1과 9 사이의 시간/분 또는 초에 0을 추가합니다.
function clock(){
let clockTime = new Date();
let hour = theZero(clockTime.getHours());
let min = theZero(clockTime.getMinutes());
let sec = theZero(clockTime.getSeconds());
time.innerHTML = `${hour}:${min}:${sec}`;
setTimeout(clock, 1000);
}
function theZero(number){
return (parseInt(number, 10) < 10 ? '0' : '') + number;
}
'askTheName' 함수는 프롬프트로 이름을 가져오고 'localStorage'를 사용하여 저장소에 기록된 이름을 가져와 프롬프트가 다시 표시되지 않도록 합니다.
function askTheName(){
let theName = localStorage.getItem('theName');
let name = document.getElementById('name');
if(!theName){
theName = prompt('Enter your name:');
}
if(theName != null){
localStorage.setItem('theName', theName);
document.title = 'Keep in Focus ' + theName + '!';
name.textContent = theName;
}
}
이제 배경 이미지(Unsplash에서 가져온 이미지)에 따라 "Good Morning, Afternoon or Evening"문구를 표시하도록 조건을 설정하는 'bgAndPhrase' 함수를 만듭니다.
function bgAndPhrase(){
let today = new Date();
hour = today.getHours();
if(hour < 12){
good.textContent = 'Good Morning';
document.body.style.backgroundImage = "url('https://source.unsplash.com/random/1024x720/?morning,sunrise')";
} else if(hour < 18){
good.textContent = 'Good Afternoon';
document.body.style.backgroundImage = "url('https://source.unsplash.com/random/1024x720/?afternoon,golden+hour')";
} else{
good.textContent = 'Good Evening';
document.body.style.backgroundImage = "url('https://source.unsplash.com/random/1024x720/?evening,night')";
}
}
이제 함수를 호출하기만 하면 됩니다.
askTheName();
clock();
bgAndPhrase();
즐기다!
Reference
이 문제에 관하여(JavaScript를 사용한 놀라운 새 탭 포커스 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/eduardoslompo/amazing-new-tab-focus-page-with-javascript-3jkg텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)