<script>
var today = new Date();
var hourNow = today.getHours();
var greeting;
var icon;
if (hourNow < 12) {
greeting = "Good Morning";
icon = "coffee";
} else if (hourNow < 20) {
greeting = "Good afternoon!";
icon = "sun";
} else if (hourNow < 24) {
greeting = "Good evening";
icon = "moon";
} else {
greeting = "Welcome";
}
document.getElementById("col-1").innerHTML = "<h3>" + greeting + " </h1>";
document.getElementById("icon").innerHTML =
'<i class="fas fa-' + icon + '" aria-hidden="true"></i>';
</script>
This is the code I am using above - the icon name is added after the "fas fa-" How can I not use font awesome and just have an image appear for the different times of the day instead? Thanks
Replace the URLs with images of your choice:
if (hourNow < 12) {
greeting = "Good Morning";
icon = "https://picsum.photos/50";
} else if (hourNow < 20) {
greeting = "Good afternoon!";
icon = "https://picsum.photos/50";
} else if (hourNow < 24) {
greeting = "Good evening";
icon = "https://picsum.photos/50";
} else {
greeting = "Welcome";
}
document.getElementById("col-1").innerHTML = "<h3>" + greeting + " </h3>";
document.getElementById("icon").innerHTML = `<img src=${icon} alt="">`;
Also, fix the closing tag of your heading.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.