Javascript Turorial App - Ứng dụng hiển thị ngày trong tuần
File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="JavaScript app that displays the day of the week!" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Day of the week</title>
<style>
body {
font-family:Helvetica, Arial, sans-serif;
margin: 50px;
background:#fff;
}
#container {
width:650px;
height:350px;
background-color: #00ffff;
margin:auto; /* This centers block elements like divs */
border-radius: 30px;
}
h1 {
font-size: 47px;
font-weight: 600px;
color:#fff;
text-transform:uppercase;
margin-bottom:20px;
margin-left: 170px;
background:#0000ff;
padding: 10px;
border-radius: 5px;
display:inline-block;
}
#weekday {
font-size: 80px;
color:#dd5800;
font-weight: 800px;
margin-left: 170px;
}
#phrase {
font-size: 40px;
color:#0000ff;
font-weight: 800;
margin-left: 170px;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id ="container">
<h1>Today is :</h1>
<div>
<span id="weekday">Display day of the week.</span><br/>
<span id="phrase">Display a quote</span>
</div>
</div>
<script src="myscript.js"></script>
</body>
</html>
File script.js
var d = new Date();
var weekday = new Array(7);
weekday[0]= "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var date2 = new Date();
var weekday2 = new Array(7);
weekday2[0]= "Time to chillax!";
weekday2[1] = "Monday morning blues!";
weekday2[2] = "Taco Time!";
weekday2[3] = "Two more days to the weekend.";
weekday2[4] = "The weekend is almost here...";
weekday2[5] = "Weekend is here!";
weekday2[6] = "Time to party!.";
var n = weekday[d.getDay()];
var n2 = weekday2[date2.getDay()];
var displayWeekday = document.getElementById('weekday');
var phrase = document.getElementById('phrase');
whatDayIsIt();
function whatDayIsIt() {
displayWeekday.innerText = n ;
phrase.innerText = n2;
}
