タブのフォーカスページ
15756 ワード
こんにちは、このポストでは、私はあなたに私がこのYouTubeビデオに奮い立たせた誰かに触発される単純なページを示します:
https://youtu.be/fSTQzlprGLI(そこに行って、JavaScriptを学びたいならば、私のような初心者にとって良いです)見てください.
を、部品で!
まず、HTMLテンプレートを作成する必要があります.
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 'の単語を使用する必要がありますので、コンストラクタを使用して時計機能を設定します.を使う.これをHTMLページと関数settimeoutに作成し、cronometerを作成します.ゼロ関数は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から取得した画像)に従って「グッドモーニング、午後、夕」というフレーズを表示するための条件を設定するための関数' 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
この問題について(タブのフォーカスページ), 我々は、より多くの情報をここで見つけました https://dev.to/eduardoslompo/amazing-new-tab-focus-page-with-javascript-3jkgテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol