Question

I need help I would like the time to run but every time it hits a minute the font style, font size, and color in JavaScript. Directions below

Write an HTML document that uses JavaScript to show on your page the time (MM:SS) a visitor has spent viewing your web page.

0 0
Add a comment Improve this question Transcribed image text
Answer #1

Here is code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>
let fontType = ['Courier New',
'Times New Roman',
'Arial',
'Verdana',
'Franklin Gothic Medium',
'Gill Sans',
'Impact'
]
let colors = [
'Gray', 'Red', 'Blue', 'Green', 'Brown', 'Purple', 'Orange', 'Cyan'
]

function dateDiffToString(a, b) {
diff = Math.abs(a - b);
ms = diff % 1000;
diff = (diff - ms) / 1000
ss = diff % 60;
diff = (diff - ss) / 60
mm = diff % 60;
return {
"mm": mm,
"ss": ss
};
}


window.onload = () => {
let startDate = new Date();
setInterval(() => {
let currentDate = new Date();
let span = document.createElement("span");
let diffTime = dateDiffToString(startDate, currentDate);
span.innerText = (diffTime.mm < 10 ? '0' + diffTime.mm : diffTime.mm )+
":" +
(diffTime.ss < 10 ? '0' + diffTime.ss : diffTime.ss);
span.style.fontSize = diffTime.mm % 7 + 1;
span.style.fontFamily = fontType[diffTime.mm % 7];
span.style.color = colors[diffTime.mm % 7];
document.getElementById("output").innerHTML = span.outerHTML;
}, 1000);

}
</script>
</head>

<body>
<div>
<span>The time you have spent viewing this page so far : </span>
<span id="output"></span>
</div>
</body>

</html>

Output:

The time you have spent viewing this page so far: 01:14

Add a comment
Know the answer?
Add Answer to:
I need help I would like the time to run but every time it hits a...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • Can someone plz help me??? I would like a website that has to do with guitars...

    Can someone plz help me??? I would like a website that has to do with guitars or something to do with music, someone asked me what kind of website I would like to have and that would be awesome. The attributes to be included, are below. I need a small website that to where I need to interlink a CSS file into the HTML file. I don't know to save the files to have to be able to run with...

  • So I need help and I have little time. I was wondering if someone can help...

    So I need help and I have little time. I was wondering if someone can help me out. its due in a few hours and I have been trying to catch up because of persoanl reasons. https://www.dropbox.com/s/95w9wqkova5i8zy/New%20folder.zip?dl=0 those are the folder files, I am bit still behind on Bootstrap. of these SDS for t date. Diss payablo be IO With Its Positions abso, Width ean ute Positions abs a te Wich1 se FIGURE S.39 Completed project 2 PROJECT 3 Art...

  • You need not run Python programs on a computer in solving the following problems. Place your...

    You need not run Python programs on a computer in solving the following problems. Place your answers into separate "text" files using the names indicated on each problem. Please create your text files using the same text editor that you use for your .py files. Answer submitted in another file format such as .doc, .pages, .rtf, or.pdf will lose least one point per problem! [1] 3 points Use file math.txt What is the precise output from the following code? bar...

  • I need help incorporating javascript into my page. The Lessons page has a message box (not...

    I need help incorporating javascript into my page. The Lessons page has a message box (not an alert box) that becomes visible/invisible when the mouse is moved over/off the small, red hyperlink on the last line that says, "note." The note is 10pt, red, and italic. The message box contains the text, "Students who pre-pay for the entire term will have the registration fee waved." It is 150px wide, with an "azure" background and a black border. It has 5px...

  • Need help starting from question 9. I have tried multiple codes but the program says it is incorrect. Case Problem 1 Da...

    Need help starting from question 9. I have tried multiple codes but the program says it is incorrect. Case Problem 1 Data Files needed for this Case Problem: mi pricing_txt.html, mi_tables_txt.css, 2 CSS files, 3 PNG files, 1 TXT file, 1 TTF file, 1 WOFF file 0 Marlin Internet Luis Amador manages the website for Marlin Internet, an Internet service provider located in Crystal River, Florida. You have recently been hired to assist in the redesign of the company's website....

  • given below are the project description and their Html and css files i need javascript according...

    given below are the project description and their Html and css files i need javascript according to the project and other files! WEB230 - JavaScript 1 Assignment 6b - Event Delegation Before starting, study the HTML and open it in a browser so that you understand the structure of the document. You will add functionality to perform several tasks in our shopping list app. Clicking the red "X" at the right of an item will delete that item. Clicking on...

  • QUOTE OF THE DAY not totally working in JAVA I need to fix this code, the...

    QUOTE OF THE DAY not totally working in JAVA I need to fix this code, the problem that I have is that I have to include before the listed quotes , one of the quotes and the date and later are the listed quotes. Now when I run it , it only shows the title and the list of quotes. I have been trying to figure out the problem, any help...? I need it to run the title "Quote of...

  • Don't attempt if you can't attempt fully, i will dislike a nd negative comments would be...

    Don't attempt if you can't attempt fully, i will dislike a nd negative comments would be given Please it's a request. c++ We will read a CSV files of a data dump from the GoodReads 2 web site that contains information about user-rated books (e.g., book tit le, publication year, ISBN number, average reader rating, and cover image URL). The information will be stored and some simple statistics will be calculated. Additionally, for extra credit, the program will create an...

  • Don't attempt if you can't attempt fully, i will dislike and negative comments would be given...

    Don't attempt if you can't attempt fully, i will dislike and negative comments would be given Please it's a request. c++ We will read a CSV files of a data dump from the GoodReads 2 web site that contains information about user-rated books (e.g., book titnle, publication year, ISBN number, average reader rating, and cover image URL). The information will be stored and some simple statistics will be calculated. Additionally, for extra credit, the program will create an HTML web...

  • I'm need help in the Pacific Trails section of the assignment. I posted my chapter 2...

    I'm need help in the Pacific Trails section of the assignment. I posted my chapter 2 assignment on the bottom of the picture. I'm using Notepad++. This was the previous assignment: CHAPTER 2 ASSIGMENT paste the first content to index.html file and second to yurts.html. First: (index.html contents are below) <!DOCTYPE html> <head> <title>Pacific Trails Resorts</title> </head> <style> a{    padding-right:14px; /* padding anchor tage to right 15px for nav menu */ } </style> <body> <header> <h1>Pacific Trails Resort</h1>   ...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT